Pasar al contenido principal

CSS Avanzado: Grid + Flexbox

https://cursos.ed.team/css-avanzado?comprar
CSS Avanzado: Grid + Flexbox

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. Comenzamos las clases en vivo el 30 de mayo, con dos de los más reconocidos expertos en diseño web en español. Te esperamos.

Semana 1
Semana 2
Semana 3
Semana 4

Flexbox I 30 may

  • ¿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

Flexbox II 2 jun

  • 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
  • Ejercicio: Pricing table
  • Ejercicio: Flexbox grid
  • Ejercicio: Calendario
  • Ejercicio: Banner estático

CSS Grid I 6 jun

  • El papel del grid (cuadricula) en el diseño de layouts
  • Los enfoques (historicos) de la construcción de layouts con CSS
  • 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

CSS Grid II 9 jun

  • Creación de templates con Grid
  • 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

Metodologías de trabajo 13 jun

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

Flujo de trabajo 16 jun

  • Levantar requerimientos
  • Diseño de bocetos y wireframe
  • Mockups y prototipado
  • Llevandolo a código
    • 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

Projecto final (1) 20 jun

  • El primer proyecto, a cargo del profesor Jon Mircha, será un sitio web multipágina con la temática "Las maratones más importantes del mundo"
  • Se aplicarán todos los conceptos aprendidos durante el curso

Proyecto final (2) 23 jun

  • El seguundo proyecto del curso, a cargo del profesor Álvaro Felipe, será un sitio web single page para un fotógrafo o agencia de fotografía.
  • Se aplicarán todos los conceptos aprendidos durante el curso

Muestra gratis del curso

¿Por qué estudiar en EDteam?

Clases en vivo

Vive la experiencia de un aula donde te encuentres, pues hay interacción constante con el profesor y tus compañeros.

Profesores reales

Con nosotros no te llevarás esa amarga sorpresa de que el profesor domina el tema pero no sabe explicarlo.

Preguntas y respuestas

Dentro de cada clase encontrarás una sección de preguntas y respuestas donde vamos más allá de la clase junto con los compañeros y el profesor.

Proyecto final

Comenzamos desde cero y culminamos con un proyecto del mundo real en el que aplicarás lo aprendido.

Sin pagos mensuales

Olvidate de las suscripciones. Paga solo el curso que necesites y estúdialo a tu propio ritmo.

Acceso de por vida

Tómate el tiempo que desees para aprender. Los cursos que compres son tuyos para siempre.

ABCDE
0
40
CSS Avanzado: Grid + Flexbox
Profesor

Álvaro Felipe

Jon Mircha

Comprar (Paypal)

* Precio en dólares americanos

Ver otros medios de pago

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 en vivo