Desarrollo Web

Curso de Flexbox y CSS Grid

Aprende a maquetar tu Web de forma fácil y profesional con Flexbox y CSS grid, las nuevas técnicas de maquetación que nos ha traído la nueva especificación CSS3.
4.5 (388 valoraciones)
2 horas y 2 minutos · Curso
Flexbox y CSS Grid

Lo que aprenderás en este curso:

  • Conocerás toda la potencia de los nuevos contenedores que nos proporciona CSS3.
  • Conocerás las posibilidades de los contenedores FLEX.
  • Aprenderás las características de los contenedores GRID.
  • Realizarás dos proyectos prácticos para poder comparar ambos y te daremos pistas sobre cuándo elegir uno u otro tipo de contenedores.
  • Convertiremos ambos proyectos en web responsivas.

Requisitos del curso

Para poder seguir el curso con soltura y comprendiendo todo lo que en el mismo se detalla, es imprescindible poseer conocimientos básicos de HTML5 y CSS3 y de maquetación CSS en general.

Valoraciones de estudiantes:

  • 5
  • 4
  • 3
  • 2
  • 1
4.5
388 valoraciones

Contenido del curso:

    • 1m
    • ¿Qué son Flex y Grid?
      4m
    • Entorno de trabajo y referencias
      3m
    • Estructura del resto del curso
      2m
    • Elementos de maquetación con CSS Flex
      2m
    • Propiedades en el contenedor Flex
      13m
    • 2m
    • Elementos flexibles
      7m
    • Elementos flexibles: alineación, justificación y espacio libre
      4m
    • Ejercicios con Flex (Parte I)
      8m
    • Ejercicios con Flex (Parte II)
      11m
    • Elementos de la maquetación con CSS Grid
      3m
    • Propiedades en el contenedor Grid
      14m
    • Elementos del Grid: posición y tamaño
      14m
    • Áreas Grid
      4m
    • Ejercicios con Grid (Parte I)
      7m
    • Ejercicios con Grid (Parte II)
      11m
    • ¿Flex o Grid?
      3m
También te puede interesar

Te dejamos una selección de cursos, carreras y artículos

Dominando Vue

Dominando Vue: De los fundamentos a la gestión de estado global

5 horas y 5 minutos · Curso

Este curso es una inmersión en Vue 3 y todo lo que nos ofrece la última versión del popular framework de JavaScript para la construcción …

  • Desarrollo Web
Vue en la práctica

Vue en la práctica: Desarrollo de una aplicación de lista de compras

3 horas y 20 minutos · Curso

Este curso es un estudio práctico de Vue 3 a través del desarrollo de una aplicación de lista de compras. Los participantes trabajarán en cada …

  • Desarrollo Web

Dudas frecuentes

1

¿Cuál es el precio?

En OpenWebinars no vendemos formaciones.

Tenemos diferentes tipos de suscripciones, que te dará acceso completo a todas las formaciones de la plataforma y a las nuevas que vamos lanzando, siempre y cuando tu suscripción esté activa (como Spotify con la música o Netflix con las películas y series).

¿Eres una empresa? Tenemos planes especiales para ti. Consúltanos aquí.

2

¿Obtengo un diploma de certificación?

En todos los cursos existe un examen final para evaluar tus conocimientos adquiridos. Si superas este examen con más de un 80% de preguntas correctas obtendrás el diploma de certificación. Puedes realizar un intento cada 24 horas.

Este diploma es un certificado privado emitido por OpenWebinars, y valorado en el mundo empresarial, ya que tenemos grandes compañías clientes que se forman con nosotros y valoran nuestras certificaciones.

No olvides poner tu certificación en tu perfil Linkedin y en tu currículum.

3

¿Cuándo comienza la formación?

En OpenWebinars las formaciones no tienen fecha de inicio y de final.

Cada curso tiene una fecha de publicación y desde ese día estarán 100% disponible todos los contenidos del curso para los usuarios suscritos a alguno de nuestros planes.

¿Quieres llevar un paso más allá tus conocimientos en maquetación web? Este curso de Flexblox y CSS Grid te permitirán maquetar webs utilizando estos novedosos modelos.

Realizar esta formación te permitirá obtener al mismo tiempo los conocimientos de Flexbox y CSS Grid, de una forma muy práctica, para así poder saber cuándo utilizar un tipo de contenedor u otro.

La estructura del curso es básicamente dos bloques bien diferenciados, el primero dedicado a la maquetación con contenedores Flex, y el segundo dedicado a la maquetación con contenedores Grid, cada uno de ellos divididos en varias lecciones.

Antes de entrar directamente en lo que sería propiamente la formación, te proponemos una introducción con varios propósitos, como conocer un poco al profesor que imparte el curso.

Una vez acaba la introducción ya puedes pasar al primer bloque formativo, para entrar de lleno a aprender sobre los contenedores Flex, comenzando por explicar qué son estos contenedores, qué tipo de maquetación permiten realizar y cuáles son los elementos que intervienen en la misma.

Continuarás tu aprendizaje conociendo las diferentes propiedades que tiene el contenedor Flex, como la dirección de los elementos flexibles, el ajuste de los mismos, las diferentes alineaciones que podemos darles y muchas otras.

Todo lo expuesto se irá desarrollando tanto de forma teórica como de forma práctica así podrás ver de forma visual cómo afectan los cambios aplicados a los contenedores Flex y los elementos que contienen los mismos.

En la siguiente lección entraremos a explicar cómo modificar las propiedades de los elementos flexibles que están dentro del contenedor Flex, como su tamaño y orden de colocación, detallando qué valores se le pueden asignar a los mismos para ello.

Dentro del detalle de las propiedades de los elementos flexibles, continuaremos con otra lección en la que te explicaremos cómo alinearlos, justificarlos y trabajar con el espacio libre entre ellos. Para finalizar este primer bloque hemos preparado una serie de ejercicios, que te servirán para aplicar todos los conocimientos vistos durante esta sección y comprobar si lo has asimilado correctamente.

En la segunda parte del curso trataremos los contenedores Grid, comenzando por explicar en qué consiste la maquetación mediante Grid o la maquetación en rejilla, sus ventajas y los elementos que participan en la misma.

A continuación veremos cómo utilizar el contenedor Grid para controlar la maquetación de la web, cómo definir su estructura y cómo aplicar propiedades dentro del contenedor. En otra lección aprenderás a tratar los elementos que están dentro del contenedor, a darles propiedades de posición y tamaño.

Para finalizar este bloque entraremos a desarrollar el concepto de áreas en Grid, que nos va a permitir maquetar de una forma aún más sencilla. Tras esta lección final, de nuevo tienes la posibilidad de realizar los ejercicios prácticos que ha preparado el tutor, para poner a prueba los conocimientos adquiridos durante todo el bloque del curso.

Y a modo de resumen final te presentamos una comparativa entre Flex y Grid, de sus ventajas y desventajas, para que puedas así determinar cuál elegir en cada ocasión según lo que ofrece cada una de estos contenedores.

Artículos
Ver todos