- Track: Common Core
- Curso: Creando tu primer sitio web interactivo
- Unidad: Maquetado web con HTML & CSS
Para completar este reto, hemos creado este repositorio boilerplate (plantilla inicial) con todos los recursos que necesitas. Esto incluye imágenes y estructura de carpetas y archivos donde colocarás tu código.
-
Debes realizar un fork de este repositorio.
-
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>/freelancer.git
El reto consiste en replicar el sitio de Freelancer, este será el resultado a lograr:
-
Encontrarás un archivo base
index.html
en el cual deberás escribir la estructura de tu proyecto y enlazar tus archivos de estilos (CSS). -
En la carpeta
css
tendrás un archivo basemain.css
donde agregarás los estilos necesarios para tu proyecto. -
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. -
Esta web utiliza 2 tipografías:
Montserrat
yLato
. -
La paleta de colores puedes obtenerla inspeccionado el sitio original, pero para ganar tiempo, puedes usar los siguientes:
#2c3e50
,#18bc9c
,#212529
. -
Los íconos de redes sociales puedes obtenerlos de Font Awesome.
-
Para este reto, encontrarás ciertas cosas que probablemente aun no has visto en clase (formularios). No te preocupes, estamos seguros que lo afrontarás con éxito, de igual forma aquí unos tips:
- Para el formulario, revisa las etiquetas como
form
,input
,button
.
- Para el formulario, revisa las etiquetas como
-
El subrayado que incluye la estrella en las diversas secciones del sitio, en la web original se hace con un ícono y pseudoelementos (
:after
,:before
), es un reto entretenido, sin embargo, no trates de enfocarte en esa parte desde un inicio ya que no es el objetivo principal del reto :) -
Puedes ver el sitio original para que te des una idea de como debe quedar.
Nota: El sitio original tiene ciertos efectos y funcionalidades que están fuera del alcance de este reto. Enfócate en obtener la maquetación lo más parecido posible, usando lo aprendido en clase ;)
Este reto será evaluado sobre lo siguiente:
- Pixel perfect (replicar el diseño con exactitud)
- Nombramiento de clases, id, etc
- Indentación
- Archivo
README.md
actualizado y correctamente redactado - Uso de comentarios para hacer tu código más legible