Web Dev (Frontend)

Antes de comenzar

¿Qué es la programación?

conceptos

¿Qué es sintaxis?

conceptos

El código sólo es texto

conceptos
🎬

¿En dónde se usa la programación?

conceptos

Introducción

¿Qué es Web Dev?

conceptos

¿Cómo funciona la web?

conceptos

¿Qué es Frontend?

conceptos

¿Qué necesitamos para aprender Frontend?

opinión

Alternativa Local

Consigamos VS Code

herramientas
🎬

Sobre Live Server

herramientas
🎬

Sobre Prettier

herramientas
🎬

Alternativa Remota

🚧 Usando plataformas

Primeros pasos

Construyendo casas virtuales

conceptos

Aprendamos HTML

html
🎬 📱 🖼️

Etiquetas básicas de contenido

html
🎬 📱 🖼️

Ejercicio - Hagamos un periódico

html
🎬
Extra: Dominando herramientas: Emmet

Dominando herramientas: Emmet

Mejoremos nuestra velocidad de programación aprendiendo atajos de autocompletado

🚧 Un poco de historia sobre la web

Aprendamos CSS

css
🎬 📱

Propiedades básicas CSS

css
🖼️

Colores nombrados

css
🎬 📱

Formatos de color más comunes

css

Formas de agregar estilos

css
🎬 📱

¿Cómo agregar comentarios en CSS?

css

Vamos a replicarlo

css

Aprendiendo el flujo de trabajo

¿Cómo subir mi página a un enlace real? | GitHub

github
🎬 📱

¿Qué es el Control de Versiones?

herramientas

🚧 Control de versiones con Git

🚧 Control de Versiones con GitHub Desktop

Ampliando conocimientos

Sobre fuentes

css

Sobre el modelo de caja

css

Etiquetas de bloque y en línea

css

Tablas en HTML

html
🖼️

Enlaces a secciones y páginas internas

html

Aprendiendo programación

Introducción a JavaScript para web

javascript
🎬

Un poco de historia sobre JavaScript

conceptos

Formas de agregar scripts

javascript

Variables y constantes

javascript

Nombres válidos en JavaScript

javascript

Convenciones de nombramiento

buenas prácticas
📱

Tipos de dato

javascript

Sobre los objetos

javascript

Sobre las funciones

javascript

Aprendamos visualmente

¿Cómo seleccionar elementos?

javascript
📱 🖼️

¿Cómo modificar elementos?

javascript

¿Cómo crear, anexar y borrar elementos?

javascript

Conceptos básicos

Operadores aritméticos

javascript
🖼️

Operadores de asignación

javascript

Formas de crear strings

javascript

Sobre ciclos o bucles

javascript

Lógica y manipulación de información

Métodos de entrada de datos

html

Argumentos y parámetros

javascript

Valores por defecto

javascript

Sobre parámetros y valores de retorno

javascript

🚧 Sobre las funciones callback

🚧 ¿Cómo conseguir información del usuario?

¿Cómo conseguir información de formularios?

javascript

🚧 Eventos

Más sobre HTML

Entidades HTML

html
📱

🚧 Diferencia entre input submit y button submit

Cómo seccionar una lista de opciones

html

🚧 Etiquetas de metadatos

🚧 Etiquetas semánticas

🚧 Plantillas

🚧 Audio y video

🚧 Imágenes responsivas

🚧 SVG

🚧 Accesibilidad HTML

🚧 Microdatos

🚧 APIs

🚧 Estructura global e internacionalización

Más sobre CSS

Formas de centrar contenido

css
🎬

Formas avanzadas de agregar estilos

css

¿Cómo agregar modo oscuro?

ui
🎬

🚧 Sobre Flexbox

🚧 Sobre Grid

🚧 Pseudo-clases y Pseudo-elementos

🚧 Sobre Media Queries

🚧 Variables CSS

🚧 Accesibilidad

🚧 Transiciones y Animaciones

🚧 Gradientes

🚧 Funciones

🚧 Selectores avanzados

🚧 Preprocesadores

🚧 Frameworks

🚧 Técnicas avanzadas de distribución

🚧 Diseño responsivo avanzado

🚧 Optimización de rendimiento en CSS

🚧 Arquitectura CSS

🚧 Componentes web

Más sobre JavaScript

🚧 Tipos de funciones

🚧 Verificación de tipos

🚧 Optimización de rendimiento en JavaScript

🚧 Seguridad

🚧 Frameworks y librerías

🚧 Aplicaciones Web Progresivas

🚧 JavaScript para servidor

Extra

¿Qué es sintaxis?

conceptos

¿Qué son los niveles de abstracción?

conceptos

Una pantalla oscura llena de letras

conceptos

Editores de código

herramientas

Programming VS Coding

conceptos

🚧 Trabajando en equipo con GitHub Desktop