CursosEmpresasBlogLiveConfPrecios

Diseño de Grillas para Páginas Web de Comida

Clase 8 de 13 • Curso de CSS Grid Básico

Contenido del curso

Tomar examen
Resumen

Crear proyectos es de hecho la parte más importante de tu aprendizaje, ya que al crear algo real fortaleces tu conocimiento en gran medida.

Proyecto de creación del curso

Demos un vistazo al template final que vamos a construir:

image.png

Bien, el primer paso es imaginar cómo están divididas nuestras secciones:

image.png

La celda es la unidad mínima de nuestra grilla, por lo que debemos prestarle mucha atención. En la sección de la mitad, observamos que las cuatro celdas pequeñas de la derecha nos indican que la sección tendrá cuatro columnas y dos filas.

Maquetación Inicial

Primero, creamos una estructura simple con un main dentro.

<body>
    <main>
        
    </main>
</body>
  • En los estilos, seteamos todo la hoja para usar la fuente Roboto.
  • Le damos un ancho máximo de 1200px al proyecto.
  • Centramos todo el contenido con margin: 0 auto.
* {
    font-family: ""Roboto"", sans-serif;
}

main {
    max-width: 1200px;
    margin: 0 auto;
}

Como te diste cuenta usaremos varias imágenes como parte de la página. Puedes descargar todas desde este enlace.

Genial, ¡ahora estamos listos para empezar a crear los contenedores!

Contribución creada por: José Miguel Ventimilla (Platzi Contributor) con aportes de César Palma.