Utilizando CSS Grid, Flex & Media Queries

En esta ocasión, creamos un proyecto utilizando CSS Grid para la estructura de columnas y filas de nuestro header y Flex para ajustar el contenido a cada celda de nuestro contenedor Grid. También vimos cómo podemos modificar el Grid con media queries para diferentes tamaños de pantalla.

Este es el resumen del proyecto:

* Utilizamos HTML5 + CSS3.

* Utilizamos CSS Grid y Flex para crear la estructura y ajustes de contenido.

* Adaptamos nuestro layout para hacerlo 100% responsive, es decir, adaptado a cualquier tamaño de pantalla.

Tengo otra publicación con más detalles de CSS Grid, puedes verla en la siguiente dirección: CSS Grid Layout – Primeros Pasos

Puedes ver un video que preparé con algunos ejemplos útiles para comenzar hoy mismo a utilizar Grid en tu proyecto.

Suscríbete a nuestro canal en Youtube y dale click a la campanita para recibir notificaciones cuando tengamos nuevo contenido útil para mejorar tus habilidades como desarrollador Front-end. Recuerda que siempre hay algo nuevo por aprender. Para suscribirte puedes utilizar el siguiente enlace:  Canal en Youtube

    Te cuento que puedes unirte a nuestro grupo de Meetup styleLeading donde hacemos proyectos en vivo y conversamos sobre diseño y desarrollo de sitios web: https://www.meetup.com/es/STYLE-LEADING/

    Puedes utilizar el siguiente formulario para recibir en tu correo electrónico el proyecto con los archivos HTML y CSS, y así poder realizar las modificaciones que necesites y así mejorar el proyecto. 

    No olvides visitar nuestro BLOG para ver más contenido interesante y también otros proyectos con los archivos HTML y CSS, y así poder realizar las modificaciones que necesites.

    Me despido como siempre, deseándote los mejor en tus proyectos.

    Compartir:

    Share on facebook
    Facebook
    Share on twitter
    Twitter
    Share on pinterest
    Pinterest
    Share on linkedin
    LinkedIn

    Redes Sociales

    Más Popular

    Get The Latest Updates

    Subscribe To Our Weekly Newsletter

    No spam, notifications only about new products, updates.

    Publicaciones Relacionadas

    Reto FrontEnd StyleLeading Panamá

    Reto FrontEnd de StyleLeading 06

    Reto Frontend de StyleLeading CSS + HTML Detalles del Evento y Formulario de Registro como Participante Reto FrontEnd de StyleLeading Fecha del Evento Jueves 21

    Reto FrontEnd StyleLeading Panamá

    Reto FrontEnd de StyleLeading #05

    Reto Frontend de StyleLeading CSS + HTML Detalles del Evento y Formulario de Registro como Participante Reto FrontEnd de StyleLeading Fecha del Evento Jueves 14

    Reto FrontEnd StyleLeading Panamá

    Reto FrontEnd de StyleLeading #04

    Reto Frontend de StyleLeading #4 Detalles del Evento y Formulario de Registro como Participante Reto FrontEnd de StyleLeading Fecha del Evento Jueves 07 enero de

    Reto FrontEnd StyleLeading Panamá

    Reto FrontEnd de StyleLeading #03

    Reto Frontend de StyleLeading Detalles del Evento y Formulario de Registro como Participante Fecha del Evento Jueves 10 dic: 7:30 p.m. – 08:30 p.m. Detalles