Alinear elementos donde realmente los quieres puede ser una tarea sumamente complicada. Afortunadamente, CSS nos permite hacer páginas impresionantes con muy poco esfuerzo. El secreto está en conocer muy bien sus propiedades y funciones.
En este desafío debemos convertir un diseño web en una página 100% profesional. ¡Debe quedar igualita! No basta con que se parezca un poquito. Debe ser una réplica exacta que demuestre nuestras capacidades y hable bien de nuestro trabajo.
Puedes descargar los assets y los archivos de diseño del desafío en el siguiente link: github.com/juandc/web-unicorn-challenge/challenge.
Para aprobar este desafío debes seguir las siguientes instrucciones:
- Programar una página web 100% replica del diseño.
- Hacer deploy de tu página web para que todos podamos ver el resultado en internet. Puedes usar Github Pages, Zeit Now, Heroku o la herramienta que más te guste.
- Mandar un Issue a este repositorio indicando dónde podemos encontrar tu solución: la URL, el código y una imágen .
Todo esto lo puedes aprender en el Curso Profesional de Desarrollo Web.
Para demostrar que tu solución es la más creativa puedes intentar ganar aún más puntos de la siguiente manera:
- Modificar o añadir secciones del diseño, puedes hacer todos los cambios que quieras SIEMPRE y cuando el resultado de tu página web sea 100% basado en tu nuevo diseño.
- Diseñar y programar la versión mobile de tu página web. Si necesitas ayuda puedes tomar el Curso de Responsive Design de Platzi.
- Añadir animaciones y transiciones de todo tipo. Puedes ayudarte del Curso de Animaciones para Web.
- Mejorar la experiencia de los usuarios en tu sitio web con WPO: Optimización de Carga de Sitios Web.
- Utilizar CSS Grid para la estructura de tu página web
- Utilizar compiladores y procesadores de CSS y JavaScript como Webpack, Gulp, Sass, Less, Stylus o PostCSS.
Tu resultado fue el más limpio. Excelente visualmente. Además, la nueva sección de contacto sigue el estilo del resto del proyecto y funciona realmente bien. La aplicación fue construida con React.js y Webpack.
Las modificaciones y nuevas secciones son excelentes. Hay animaciones espectaculares por todas partes. La aplicación fue construida con CSS Grid y Bootstrap (la versión móvil está en construcción).
Las animaciones no solo aparecen porque sí, algunas también reaccionan al comportamiento de los usuarios.
Gabriel De Andrade: Gabriel no solo resolvió muy muy bien el desafío, también nos dio un tutorial espectacular para crear animaciones basadas en física de resortes con React Spring.
Jaime Burbano: me encantan los colores y la limpieza de tu solución. Y como si fuera poco, tienes presentación en Behance. ¡Y un video de cómo codeaste la aplicación! 😱 😮 🙌