AppLove

  • Track: Common Core
  • Curso: Creando tu primer sitio web interactivo
  • Unidad: Maquetado web con HTML & CSS

Para completar tu web AppLove hemos creado este repositorio boilerplate (plantilla inicial) con todos los recursos que necesitas. Esto incluye las imágenes y algunas clases CSS que ya hemos creado para ti :)

Flujo de trabajo: Empieza por realizar un fork y clonar este repositorio

  1. Debes realizar un fork de este repositorio

  2. Luego deberás clonar tu fork en tu máquina. Recuerda que el comando a usar es git clone y su estructura normalmente se ve así:

    git clone https://github.com/<nombre-de-usuario>/AppLove.git

Objetivo

El reto consiste en maquetar la web AppLove, este es el resultado final:

AppLove

Detalles adicionales

  • Encontrarás un archivo base index.html el cual contiene una estructura inicial sobre la que deberás completar tu proyecto.

  • En la carpeta css tendrás un archivo base main.css donde hay clases reutilizables, quiere decir que dichas clases pueden ser usadas más de una vez. Por ejemplo:

    .text-uppercase {
      text-transform: uppercase;
    }

    Si usamos la clase .text-uppercase en algún texto lo que hará es ponerlo en mayúsculas. De esta manera podrás reutilizar esta clase varias veces. No olvides enlazar tu archivo CSS a tu HTML.

  • El header tiene que estar estático, como se muestra en la siguiente imagen gif:

AppLove-gif

  • Dentro de la carpeta assets se encuentra la carpeta images donde encontrarás todas las imágenes necesarias para completar tu proyecto.

  • Deberás actualizar el archivo README.md explicando el contenido de tu repositorio.

  • El tipo de fuente a utilizar será Raleway.

Consideraciones generales

Este reto sera evaluado sobre lo siguiente:

  • Pixel perfect (replicar el diseño con exactitud)
  • Nombramiento de clases, id, etc
  • Indentación
  • Estructura de tus archivos
  • Archivo README.md actualizado y correctamente redactado
  • Uso de comentarios para hacer tu código más legible