Biblioteca recurso mega 2

Hola navegantes de internet, hoy les comparto un recurso llamado “Curso CSS Avanzado Grid & Flex de EDTEAM”.

CSS está avanzando a pasos agigantados, brindándonos soluciones que antes solo eran posibles usando JavaScript. Grid es el último módulo estándar de CSS que ya es soportado por todos los navegadores y que permite crear layouts que no podían crearse siquiera con Flexbox.

En este curso aprenderán técnicas avanzadas de maquetación combinando el poder de Grid y de Flexbox, para trabajar en conjunto diseñando layouts y componentes.

Temario de curso:

Módulo 1:

1. Flexbox I:

1.1. Bienvenida y que es Flexbox

1.2. Terminología Flexbox

1.3. Elemento padre: Propiedad Display

1.4. Elemento padre: Propiedad Flex direction

1.5. Elemento padre: Propiedad Flex wrap

1.6. Elemento padre: Propiedad Justify content

1.7. Elemento padre: Propiedad Align-items y Align-content

1.8. Elementos hijos: Flex-shrink, Flex-grow y Flex-basis

1.9. Shortand con Flex-grow, shrink y basis

1.10. Elementos hijos: Propiedad Align-self y order

1.11. Estructura inicial Holy grail layout

1.12. Ejercicios Holy grail layout

1.13. Ejercicios Holy grail layout (2da versión)

1.14. Estructura inicial de Slider animado

1.15. Ejercicio Slider animado

1.16. Ejercicio Flexbox y pseudoelementos

2. Flexbox II:

2.1. Ejercicios Split Lasyout

2.2. Ejercicio Widget de ecommerce

2.3. Ejercicio Centrado total

2.4. Ejercicio Layout de Blog

2.5. Ejercicio Header and Footer fijos

2.6. Ejercicios Flexbox grid

2.7. Ejercicios Sticky Footer

2.8. Ejercicio Banner estatico

2.9. Ejercicio Contenedores de alturas iguales

2.10. Ejercicio Pricing Table

2.11. Ejemplo de cabecera

2.12. Ejercicio Calendario

Módulo 2:

3. CSS Grid I:

3.1. El papel del grid en el diseño de Layouts

3.2. Los enfoques de la construcción de layouts con CSS

3.3. Elementos, terminología y funcionamiento de CSS Grid

3.4. Propiedades del grid container

3.5. Propiedades de los grid ítems

3.6. Ejercicio Holy grail layout responsive

3.7. Ejercicio Dibujar un dado

3.8. Ejercicio Menu off-canvas

3.9. Ejercicio Dibujar un tablero de ajedre

4. CSS Grid II:

4.1. Creación de Templates con GRID

4.2. Grid Placement

4.3. Grid Placement DRY

4.4. Alineación y dimensiones

4.5. Responsive Web Design con CSS GRID

4.6. Cross Browser con CSS GRID

Módulo 3:

5. Flujo de trabajo:

5.1. Introducción a arquitectura, filosofía modular y componentes

5.2. Arquitectura SMACSS

5.3. Arquitectura OOCSS

5.4. Arquitectura ITCSS

5.5. Arquitectura Atomic Design

5.6. Nomenclatura BEM

5.7. Nomenclatura SuitCSS

5.8. Control de tipografía

5.9. Ritmo Vertical

6. Metodología de trabajo:

6.1. Introducción al flujo de trabajo

6.2. Levantar requerimientos

6.3. Diseño de boceto y prototipo

6.4. Mockup y prototipado

6.5. Llevándolo a código

6.6. Preparar entorno de desarrollo

6.7. Introducción a boilerplate

6.8. Componentes script de npm

6.9. Creación de un boilerplate

6.10. Minificación de archivos

Módulo 4:

7. Proyecto final 1:

7.1. Iniciando el proyecto

7.2. Estructura de navegación y reset

7.3. Navegación off canvas

7.4. Funcionalidad con JavaScript en el menú y estilos dinámicos

7.5. Componentes header-poster

7.6. Componentes video-youtube

7.7. Transparent header

7.8. Sección acerca y maratón history

7.9. Breve explicación sobre los comandos npm

7.10. Sección Windows gallery

7.11. Sección maratones

7.12. Optimización de archivos

7.13. Sección Mujeres

7.14. Sección Mujeres detalles

7.15. Sección El más veloz

7.16. Sección Contacto

7.17. Componentes social media, mapas y 404

7.18. Minificación de archivos

8. Proyecto final 2:

8.1. Herramientas de prototipado

8.2. Guías de estilo y mockup

8.3. Estructura del proyecto y gulpfile

8.4. Maquetación HTML del singlepage

8.5. Estilos base, variables y tipografía

8.6. Definiendo mixins de responsive

8.7. Logo, menú y banner

8.8. Grid de galería

8.9. Sección Acerca

8.10. Contacto y detalles del layout

8.11. Footer

Clic en el botón para ir al enlace directo.

Si les pide clave usen esta: !lx7qNQLGNae_BHnlDHo9YA

Recuerden: El conocimiento es libre y debe ser compartido.

Muchas gracias por leer el post, hasta una nueva oportunidad.

NOTA: Dejen sus comentarios, eso me anima a seguir buscando recursos en Internet.

COMENTARIOS: