Pasar al contenido principal

🔥 ¡Nuevo curso! JavaScript en el navegador. Aprende a manipular lo que ves en pantalla y responder a la interacción del usuario.

Alexys Lozada
Jose Luján
Luis Avilés
Álvaro Felipe, Jon MirCha
Álvaro Felipe
Jose Luján
Alberto Quiroga
Alexys Lozada, Álvaro Felipe, Daniel Romero, Jon MirCha
Daniel Romero
Alexys Lozada, Daniel Romero
Álvaro Felipe
Francisco Romero
Alexys Lozada
Jose Luján
Daniel Romero
Jon MirCha
Álvaro Felipe
Daniel Romero
Jose Luján
Álvaro Felipe
Freddy Cahuas
Álvaro Felipe
Alexys Lozada
Jose Luján
Luis Avilés
Álvaro Felipe, Jon MirCha
Álvaro Felipe
Jose Luján
Alberto Quiroga
Alexys Lozada, Álvaro Felipe, Daniel Romero, Jon MirCha
Daniel Romero
Alexys Lozada, Daniel Romero
Álvaro Felipe
Francisco Romero
Alexys Lozada
Jose Luján
Daniel Romero
Jon MirCha
Álvaro Felipe
Daniel Romero
Jose Luján
Álvaro Felipe
Freddy Cahuas
Álvaro Felipe
Luis Avilés
Álvaro Felipe
Jon MirCha
https://app.ed.team/cursos/css-grid-flexbox?7
css-avanzado

CSS Avanzado: Grid + Flexbox

CSS ha avanzado a pasos agigantados en los últimos años, dándonos soluciones nativas que antes solo eran posibles con JavaScript. El último módulo estándar de CSS es Grid que ya es soportado por todos los navegadores y que permite crear layouts que no podían hacerse siquiera con flexbox. En este curso aprenderás técnicas avanzadas de maquetación combinando el poder de Flexbox y de Grid para trabajar en conjunto diseñando layouts y componentes.

Este el primer curso (y el único) en español en abordar a fondo CSS Grid con dos de los más reconocidos expertos en diseño web en español.

1. Flexbox I

  • ¿Qué es?
  • Terminología Flexbox
  • Propiedades y valores del elemento padre
  • Propiedades y valores de los elementos hijos
  • Ejercicio: Holy grail layout I
  • Ejercicio: banner animado
  • Ejercicio: Holy grail layout II
  • Ejercicio: flexbox y pseudoelementos (ver gratis)

2. Flexbox II

  • Ejercicio: Split layout
  • Ejercicio: Centrado total
  • Ejercicio: Header y footer fijos
  • Ejercicio: Sticky footer
  • Ejercicio: Contenedores con alturas iguales
  • Ejercicio: Ejemplo de cabecera
  • Ejercicio: Widget de ecommerce
  • Ejercicio: Layout de blog (ver gratis)
  • Ejercicio: Pricing table
  • Ejercicio: Flexbox grid
  • Ejercicio: Calendario
  • Ejercicio: Banner estático

3. CSS Grid I

  • El papel del grid (cuadricula) en el diseño de layouts
  • Los enfoques (historicos) de la construcción de layouts con CSS (ver gratis)
  • Elementos, terminología y funcionamiento de CSS Grid
  • Propiedades del grid container
  • Propiedades de los grid items
  • Ejercicio: Holy grail layout responsive
  • Ejercicio: Dibujar un dado
  • Ejercicio: Dibujar un tablero de ajedrez
  • Ejercicio: Menu off canvas

4. CSS Grid II

  • Creación de templates con Grid (ver gratis)
  • Grid placement
  • Alineación y dimensiones
  • Responsive web design con CSS Grid
  • Cross browser con CSS grid - trucos y fallbacks
  • Grid y Flexbox
  • Ejercicio: Layout con grid, componentes con flexbox
  • Ejercicio: Layout con flexbox, componentes con grid

5. Metodologías de trabajo

  • Arquitectura
    • SMACSS
    • OOCSS
    • ITCSS
    • Atomic design
  • Nomenclatura
  • Estrategias de CSS modular
    • Control de tipografías
    • Ritmo vertical

6. Flujo de trabajo

  • Levantar requerimientos
  • Diseño de bocetos y wireframe
  • Mockups y prototipado
  • Llevandolo a código (ver gratis)
    • Estructura HTML
    • Estructura CSS / Sass
  • Preparar entorno de desarrollo
  • Integrar CSS y HTML en flujo de trabajo frontend
  • Herramientas de compilación
  • PostCSS
  • Creación de un boilerplate

7. Projecto final (1)

8. Proyecto final (2)

¿Por qué estudiar en EDteam?

Profesores reales

Somos la única plataforma con profesores reales con años de experiencia en aulas.

Aprende desde cero

Si quieres aprender algo nuevo, sin conocimientos previos, no hay mejor opción en español que EDteam.

Proyecto de fin de curso

Creamos el concepto de proyecto de fin de curso que se ha puesto de moda en todas las plataformas online.

Sin mensualidades

Líbrate de las ataduras. Paga solo lo que necesites aprender y estudiálo a tu ritmo y con acceso de por vida.

Secuencia de aprendizaje

Cursos desde cero que continuan con cursos avanzados para que aprendas en orden y sin perderte.

Clases bonus gratuitas

Accede a los EDtaller Premium, clases extra de todos los cursos (incluso de los que no hayas comprado) 100% gratis.

ABCDE
0
25
CSS Avanzado: Grid + Flexbox
Profesor
Comprar $

Acceso de por vida a este curso

Suscribirse $ 30 USD / mes Acceso a todos los cursos de EDteam

Medios de pago

logo Paypal

Acceso en segundos

Peru Colombia México Bolivia Western Union

Acceso en 24h

Horarios

Clases en vivo los martes y viernes

  • 4:00 pm (CR / GT / SV )
  • 5:00 pm (PE / EC / CO / PA / MX / EST)
  • 6:00 pm (VE / BO / CU / DO )
  • 7:00 pm (CL / AR / UY / PY / BR )
  • 11:00 pm (ES)
Clases grabadas