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 :)
-
Debes realizar un fork de este repositorio.
-
Luego deberás clonar este repositorio boilerplate, después crear un repositorio remoto en tu cuenta de
GitHub
y vincular tu local con tu remoto. Para esto, sigue los siguientes pasos:-
Crea un repositorio remoto en tu cuenta de
GitHub
con el nombre del ejercicio (tip: recuerda usar "New Repository") -
Obten el URL del repositorio boilerplate haciendo clic en el botón verde "clone or download"
-
En tu línea de comandos, clona el repositorio boilerplate y vincúlalo con tu repositorio remoto. Para hacer esto debes usar los comandos
git clone
,git remote add
ygit push
que se muestran a continuación:~ git clone <URL del repositorio _boilerplate_ de Laboratoria> ~ git remote add origin <URL del repositorio remoto que creaste en tu cuenta de GitHub> ~ git push origin master
-
El reto consiste en maquetar la web AppLove, este es el resultado final:
-
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 basemain.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 archivoCSS
a tuHTML
. -
El
header
tiene que estar estático, como se muestra en la siguiente imagen gif:
-
Dentro de la carpeta
assets
se encuentra la carpetaimages
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
.
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