- Esta landing la estoy realizando dentro del curso Front End de la carrera Certified Tech Developer
- Periodo : Mayo - Julio 2023
Front End I - Práctica integradora
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 una herramienta llamada Figma de donde podremos obtener toda la información necesaria para realizar el maquetado.
Utilizando el diseño desarrollado en Figma, disponible en el siguiente enlace, la idea será revisar los diferentes elementos y estilos que corresponden a ese resultado visual y maquetarlo. Por el momento usaremos las propiedades del modelo de caja vistas en clase para poder maquetarlo. La barra azul del Header deberá quedar fija en la parte superior al hacer scroll en la página.
Pantalla de Desktop - v1
Utilizaremos el siguiente boceto en Figma para adaptar nuestro proyecto de súpers a tablets y celulares. Para ello, debemos seguir los siguientes cambios:
- Medidas relativas en fuentes y elementos estructurales de HTML.
- Utilizar dos media queries con viewport para tablet y celular.
- Escribir las propiedades necesarias en las mismas para su adaptación.
Pantalla de Tablet
Pantalla de Mobile
La tarea obligatoria para esta clase es maquetar el formulario de Contacto, las secciones Home y Detail son opcionales para que quede un diseño más completo y por si queremos seguir practicando.
Pantalla de Desktop - v2
Pantalla de Desktop - v2
La tarea para esta clase es dar interactividad con CSS utilizando los conceptos vistos en la clase asincrónica. El objetivo principal es utilizar los pseudoselectores y pseudoelementos que permitan lograr la interactividad que presenta el boceto.
Realizado por : Sammy Gigi Cantoral Montejo (sgcm14)
