Esta landing page se ha creado como solución al code challenge de MONOBO. Partiendo de un diseño base en Figma he maquetado una landing page con HTML5 y CSS3. Al no requerise funcionalidad no he necesitado añadir Javascript.
- HTML5
- Sass como framework de CSS.
- Gulp como sistema de build.
- Font Awesome para los iconos.
-
Clonar el repositorio:
git clone
-
Instalar dependencias:
npm install
-
Run:
npm start
Esto ejecuta la aplicación en modo desarrollo. Abrir http://localhost:3000 para verlo en el navegador.
Algunas decisiones tomadas a la hora de realizar la solución:
-
Generalmente estoy más habituada a trabajar con frameworks de Javascript como React, pero en este caso al requerise sólo un landing page estática sin requerimientos de funcionalidad, he optado por una solución directa en HTML con Sass para el CSS.
-
He utilizando un starter-kit basado en Gulp como base del proyecto. Este starter-kit permite utilizar partials de HTML para una mejor organización del código y poder componetizarlo. También incluye Sass que me permite añadir utilidades extra a la hora de generar el CSS.
-
En el Figma no se especificaba el diseño responsive pero he intentado aplicarlo en los puntos que he visto, así como añadido algunas media queries a modo de ejemplo.
-
Para los iconos he decidido utilizar la librería de Font Awesome.
-
Todos los enlaces dirigen a https://monobo.es/portfolio-category/digital/ ya que no se especificaba la url, salvo el nav que hay de navegación interna que si dirige a cada sección
- Mejoraría la propuesta de responsive que he aplicado pidiendo más información sobre el diseño y los dispositivos a cubrir.
- Añadiría alguna funcionalidad como por ejemplo en el formulario de la newsletter o que funcione el carrousel de las news.
- En la sección de news hacer que para la última noticia visible donde se corta la imágen, también se corte el texto.