El propósito de este ejercicio es conocer tus habilidades de diseño web. No vamos a evaluar que tan experto eres, sino lo que buscamos es comprobar que tienes las bases necesarias para poder aprovechar al máximo nuestro bootcamp.
- Descarga este repositorio en tu computadora, puedes clonarlo o descargarlo como zip.
- Codifica la página web de acuerdo a los requerimientos funcionales y no funcionales que se describen más abajo.
- Puedes utilizar las herramientas de programación que desees como HTML, CSS, Bootstrap entre otros.
- Una vez que hayas terminado tu trabajo, sube el código a un repositorio en tu cuenta de Github.
- No es necesario que nos envies un correo para avisarnos que has terminado, nosotros nos daremos cuenta cuando hayas hecho un push a tu repositorio.
Para evaluar tus habilidades de diseño web utilizaremos un ejercicio tomado de la página Frontend Mentor.
Tu reto es desarrollar esta sección de prueba social (Social Proof) y hacer que se parezca lo más posible al diseño.
Puedes utilizar las herramientas que desees para ayudarte a completar el desafío. Así que, si tienes algo en particular que te gustaría practicar, siéntete libre de intentarlo.
Tus usuarios deberían poder:
- Ver el diseño óptimo de la sección dependiendo del tamaño de pantalla de su dispositivo.
Tu tarea es desarrollar el proyecto de acuerdo a los diseños que se encuentran en la carpeta /design. Encontrarás tanto una versión para dispositivos móviles como una versión para escritorio del diseño en los formatos JPG estáticos. Esto significa que tendrás que utilizar tu mejor juicio para estilos como el tamaño de fuente (font-size), el relleno (padding) y el margen (margin). Esto te ayudará a entrenar tu ojo para percibir diferencias en espacios y tamaños.
Todos los archivos necesarios se encuentran en la carpeta /images y ya están optimizados.
También hay un archivo style-guide.md que contiene la información que necesitarás, como la paleta de colores y las fuentes.
Siéntete libre de utilizar cualquier flujo de trabajo con el que te sientas cómodo. A continuación, se sugiere un proceso, pero no sientas que debes seguir estos pasos al pie de la letra:
- Observa los diseños para planificar cómo abordarás el proyecto. Este paso es crucial para pensar en las clases de CSS que podrías crear para hacer estilos reutilizables.
- Antes de agregar cualquier estilo, estructura tu contenido con HTML. Escribir primero el HTML puede ayudarte a centrar tu atención en la creación de contenido bien estructurado.
- Escribe los estilos base para tu proyecto, incluyendo estilos generales de contenido, como la
font-familyy elfont-size. - Comienza a agregar estilos en la parte superior de la página y trabaja hacia abajo. Solo pasa a la siguiente sección una vez que estés seguro de haber completado la zona en la que estás trabajando.
- Ejecución
- Apariencia de la página, es decir que tan similar es al diseño solicitado
- La página debe ser responsiva, por eso se proporciona tanto el diseño móvil como el de escritorio
- Código fuente
- HTML + CSS (si así lo prefieres puedes utilizar el framework de tu elección)
- Código fuente en Github
- La solución debe cumplir con los requerimientos funcionales y no funcionales
- HTML + CSS
- No es necesario utilizar algún framework en particular, pero si necesitas hacerlo adelante, no hay problema.
- Cumplimiento de los requerimientos funcionales
- Cumplimiento de los requerimientos no funcionales