Introducción al curso
  • Los Proyectos en este curso
Introducción y básicos de Flexbox
  • ¿Qué es Flexbox?
  • El Contenedor Flex o Flex Container
  • Flex Direction
  • Flex Wrap
  • Flex Flow y Order
  • Flex Grow, Flex Shrink, Flex Basis y el Shorthand Flex
  • Flex Grow y flex a fondo
  • Alineando con Flexbox
  • Poniendo todo en práctica (Video 1 de 3)
  • Poniendo todo en práctica (Video 2 de 3)
  • Poniendo todo en práctica (Video 3 de 3)
PROYECTO: Diseño de tipo Cards en Flexbox
  • Arrancando el Proyecto
  • Agregando Media Queries a los Cards
  • Estilos a los cards
Creando Menús de Navegación con Flexbox
  • Creando un Menú Sencillo
  • Creando un Menú con Iconos (Pt 1 de 2)
  • Creando un Menú con Iconos (Pt 2 de 2)
  • Creando un Dropdown Menu
  • Creando un Menú de Redes Sociales
  • Creando un Menú de Redes Sociales y Dropdown
PROYECTO: Sitio Web de Cursos
  • ¿Porque usar Autoprefixr?
  • Instalando Dependencias
  • Compilando SASS con Gulp
  • Agregando un watch
  • Comenzando los estilos del Proyecto
  • Estilos al carrito de compras con SASS
  • Agregando una fuente de Google Fonts
  • Creando un Mixin
  • Creando otros mixins útiles
  • Creando la imagen principal y buscador
  • Creando mixins para media queries
  • Creando la barra principal
  • Creando la sección de los cursos
  • Finalizando la sección de los cursos
  • Creando el footer
  • Creando los menús del footer
PROYECTO: Login de Netflix con SASS, Gulp y Flexbox
  • Primeros pasos con el Proyecto
  • Compilando SASS con Gulp
  • Agregando un watch
  • Creando e importando las Variables
  • Creando e Importando Mixins
  • Escribiendo el HTML del login
  • CSS al Body
  • CSS al Logo
  • Primeros pasos con el formulario
  • CSS a los inputs
  • Animando el Label cuando vamos a escribir en el formulario
  • Creando el botón de Iniciar Sesión
  • Finalizando el formulario
  • CSS al Footer
  • Validación del Formulario
  • Agregando clases y mensajes de error
  • Agregando un botón de ocultar / mostrar en el password
PROYECTO: Diseño de un Blog
  • Arrancando el Proyecto
  • Trabajando con la imagen principal
  • Estilos al Header
  • Estilos al Menú Principal
  • Creando la sección de categorias
  • Estilos a las categorías
  • Creando el footer
  • Estilos al footer y fin
PROYECTO: Holy Grail Layout o Layout de 1 o 2 columnas con contenido al centro
  • Introducción al Proyecto
  • Creando la navegación Principal
  • Agregando los Sidebars
Otros diseños en Flexbox
  • Creando el Media object o comentarios con fotografia
  • Diseño con Footer fijo abajo
  • Diseño con elementos en distinta alineación
  • Finalizando el diseño
  • Creando un Diseño Masonry en Flexbox
PROYECTO: AdminFlex o Panel de Administración en Flexbox
  • Arrancando el Proyecto
  • Creando el Header
  • Primeros estilos al Proyecto
  • Creando la barra superior
  • Estilos al Nombre del sitio
  • Estilos a la barra superior
  • Estilos a los menús
  • Creando la barra lateral
  • Estilos al buscador
  • Estilos al Menú Lateral
  • Ocultando y mostrando el Menú Principal
  • Estilos al área principal
  • Creando los formularios
Introducción a CSS Grid
  • ¿Qué es CSS Grid? y términos básicos
  • El Grid Container
  • Definiendo columnas y rows
  • Colocando elementos dentro de los rows y columns
  • Grid Shorthand, grid-row, grid-column, grid-area
  • Repeat en CSS Grid