https://github.com/devdevi/freelancer

https://github.com/devdevi/freelancer

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/devdevi/freelancer
• Owner: devdevi
• Created: 2017-10-24T03:04:15.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-10-24T03:05:43.000Z (over 7 years ago)
• Last Synced: 2025-02-14T14:53:30.497Z (4 months ago)
• Language: HTML
• Size: 1000 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Freelancer

* **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.

## Flujo de trabajo

1. Debes realizar un [**fork**](https://gist.github.com/ivandevp/1de47ae69a5e139a6622d78c882e1f74)

   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í:

   ```bash

   git clone https://github.com//freelancer.git

   ```

## Objetivo

El reto consiste en replicar el sitio de **Freelancer**, este será el resultado

a lograr:

![Freelancer Website](docs/fullpage.png)

## Consideraciones

* 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 base `main.css` donde agregarás los

  estilos necesarios para tu proyecto.

* 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.

* Esta web utiliza 2 tipografías: `Montserrat` y `Lato`.

* 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](http://fontawesome.io/).

* 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`.

* 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](https://blackrockdigital.github.io/startbootstrap-freelancer/)

  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 ;)

## A tener en cuenta

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