En el siguiente vínculo vas a encontrar el diseño de una web hecho en Adobe XD, en versión desktop y mobile: https://xd.adobe.com/view/f3229a4d-559d-4a23-500f-6c99f584ac0e-8513/ Podés alternar entre la vista interactiva o la vista de especificaciones con los botones de la derecha, para poder ver datos de medidas, tipografías, colores, etc.
El objetivo del ejercicio es maquetar el diseño usando html y css. Cuanto más fiel al diseño sea el resultado mejor. Podés armarlo como te sea más cómodo, si preferís usar sass, less, o incluso algún framework. Siempre aclarando si hace falta hacer alguna instalación o correr algún comando para poder ver el resultado.
- Fidelidad al diseño desktop y mobile
- Que el resultado sea responsive
- Código prolijo y semántico
- Convenciones en nombres de clases (ej BEM)
Cualquier detalle que le quieras agregar es bienvenido, pero opcional, aquí algunas sugerencias:
- Armar un menú desplegable para mobile
- Hacer una funcionalidad de acordeon para los filtros para ocultar/mostrar cada atributo
- Hacer que al seleccionar un atributo de los filtros se muestren solo algunos de los productos
- Agregar un selector o botones arriba a la derecha para cambiar la cantidad de columnas de la grilla de productos entre 2, 3 y 4 en desktop, ó 1 y 2 en mobile.
- Cargar los productos tomando info desde un archivo JSON externo
- Hacer un fork del repositorio en tu cuenta.
- Armar el código de la pantalla según el diseño.
- Hacer push de tus cambios en el fork.
- Crear un pull request en el repositorio original (git@github.com:blaurenzano/test-maquetado.git).
- Avisarnos que ya está listo el ejercicio por el mismo medio en que estábamos en contacto y enviar un link al pull request.
- Descargarte este código inicial como .zip con el botón verde de arriba
- Armar el código de la pantalla según el diseño.
- Enviarnos un .zip con el código final por el mismo medio en que estábamos en contacto.