Profesor: Ing. Fabio D. Argañaraz
Tema: Maquetado con Flexbox y Diseño Responsive
Este repositorio contiene el proyecto base para la actividad práctica de Flexbox correspondiente al desarrollo Front End. Se trata de una landing page para "Pizza Front", una pizzería ficticia, en la cual deberás aplicar las reglas de CSS Flexbox necesarias para lograr un maquetado flexible y responsive a partir del diseño de referencia.
Ejercicio-Flex/
├── css/
│ └── style_base.css # Estilos base (con indicaciones de dónde añadir flex)
├── img/ # Recursos gráficos y bocetos
│ ├── VectorPizza.svg # Logo
│ └── (bocetos desktop y mobile)
├── index.html # Estructura HTML
└── README.md
- Figma (diseño completo): AP - Pizza Front
- Bocetos: En la carpeta
img/encontrarás los bocetos de cómo debe verse el sitio en vista desktop y mobile.
Una de las principales tareas de un desarrollador Front End es tanto estructurar interfaces como aplicar estilos a partir de un wireframe o una imagen.
El desafío será reconocer las diferentes etiquetas y los correspondientes estilos que podrían conformar el maquetado y diseño para comenzar a estructurar un archivo hasta obtener un resultado visual similar a la referencia.
En esta oportunidad utilizaremos un proyecto base y añadiremos Flexbox a sus elementos según sea necesario.
Utilizando el proyecto disponible en la consigna, la propuesta para esta clase es que puedan:
- Añadir las reglas necesarias para que el mismo sea flexible (Flexbox).
- Añadir los estilos necesarios para que sea responsive en el breakpoint de 768px de ancho.
En style_base.css encontrarás comentarios /*Añadimos flex*/ que indican los lugares donde se recomienda aplicar las propiedades de Flexbox:
headerheader nav ulheader .header__logomain .containermain section .podio.top5.top5 .podio__imgfooterfooter .footer__logofooter ul
En el media query de 768px se sugiere:
- Ocultar los botones de navegación del header
- Añadir el ícono hamburguesa
Antes de concentrarnos en el código, un ejercicio interesante es comprender cuáles serán los elementos que necesitaremos para estructurar un sitio.
Esto nos dará la posibilidad de tomar decisiones fáciles de modificar ya que, una vez hecho esto, el proceso de estructurar HTML será solo insertar etiquetas con sus valores correspondientes.
Pensemos también qué reglas CSS podemos utilizar para lograr el resultado deseado.
¡Hasta la próxima!