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
