Introducción
  • Introducción y bienvenida
  • Instalación de editor de texto
  • Instalación de postman
  • Instalando NodeJS
  • Instalando Chrome
HTML básico
  • Que es HTML?
  • Primeras etiquetas
  • Títulos, párrafos, salto de línea y línea horizontal
  • Comentarios, negrita, citas y código
  • Enfasis o cursiva, preformateado, texto tachado y pequeño
  • Strong, subrayado y div
HTML: formularios
  • Formularios e inputs
  • Textarea, button, select y opciones
  • Label, placeholder, fieldset para agrupar campos y legend
Imágenes, links, listas y tablas
  • Imágenes y links
  • Listas ordenadas y no ordenadas
  • Tablas, cabeceras, pie, filas y celdas
Ejercicios
  • Demo de sitio de gatitos
  • Construcción de nuestro sitio de gatitos
  • Demo formulario de contacto
  • Construcción de nuestro formulario de contacto
CSS
  • Cargando CSS, selectores, propiedades y valores
  • Selectores: Id y class
CSS, modelo de caja
  • Introducción y margin
  • Padding y border
  • Bordes redondos, alto, ancho y color del texto
  • Ejercicio, crear una caja flotante en CSS
  • Solución del ejercicio caja flotante en CSS
CSS: Texto
  • Color y alineado
  • Text decoration, align, transform, indent y height
  • Word spacing y text shadow
  • Tipos de fuentes
CSS: Links, listas y tablas
  • Links parte 1
  • Links parte 2
  • Listas
  • Tablas
CSS: Display, max-width, position, overflow, float, más selectores y opacidad
  • Display
  • max-width y position
  • Overflow
  • Float, más selectores y opacidad
CSS: Elementos útiles
  • Cómo construir una barra de navegación
  • Dropdown menu
  • Formulario de contacto
CSS avanzado
  • Backgrounds en detalle
  • Colores en detalle y opacidad
  • Fondos con gradientes
  • Sombras
  • Transformaciones en 2 dimensiones
  • Transformaciones en 3 dimensiones
  • Transiciones animadas
  • Ejercicio de cajas para reportería
  • Solución ejercicio de cajas para reportería
CSS Grid
  • Intro a grid
  • Columnas y filas
  • tamaño mínimo y máximo
  • Repetir dimensiones
  • Brechas entre elementos
  • Expandir elementos de la grilla
  • Asignando nombres a las líneas de la grilla
  • Usando repeat para nombre de lineas predecibles
  • Areas de grillas
  • Grilla implícita
  • Alinea y justifica todos los elementos de una grilla
  • Alinea y justifica un solo elemento de la grilla
  • Alineando la grilla completa
  • Juego de CSS grid
Flexbox
  • Introducción y diferencias con CSS grid
  • Conceptos básicos de flexbox
  • Propiedades del contenedor
  • justify-content y align-items
  • align-content
  • Manipular el orden de los elementos
  • Hacer que los elementos crezcan de manera dinámica
  • flex-basis y flex
  • align items
  • Juego de flexbox
Javascript, declaración de variables y tipos de datos
  • Explicación flujo de trabajo
  • Primer programa
  • Porque hola mundo?
  • Tipos de datos
  • Primera variable
  • Re-asignando valor a variable
  • Más tipos de datos
  • Objetos en javascript
  • Arreglos