El desafío es construir la web de "Coming Soon" y hacer que se vea lo más parecida al diseño propuesto.
Podés usar cualquier herramienta que quieras para completar el challenge. Si tenés algo que te gustaría practicar, no dudes en hacerlo.
Lxs usuarixs tienen que poder:
- Ver el diseño óptimo de la web dependiendo del tamaño del dispositivo
- Ver los estados del hover para cada elemento interactivo
La tarea del desafío es construir la web con los diseños dentro de la carpeta /design. Dentro vas a encontrar tanto la versión mobile como desktop para trabajar.
Los diseños son archivos JPG estáticos. Esto significa que vas a tener que usar tu criterio para estilso como font-size, padding and margin. Esto debería ayudar a entrenar el ojo para percibir diferencias en espacios y tamaños.
Vas a encontrar todos los activos necesarios en la carpeta /images.
También hay un archivo style-guide.md, que tiene la información que vas a necesitar, como paleta de colores y fuentes.
Feel free to use any workflow that you feel comfortable with. Below is a suggested process, but do not feel like you need to follow these steps:
- Initialize your project as a public repository on GitHub. This will make it easier to share your code with the community if you need some help. If you're not sure how to do this, have a read through of this Try Git resource.
- Configure your repository to publish your code to a URL. This will also be useful if you need some help during a challenge as you can share the URL for your project with your repo URL. There are a number of ways to do this, but we recommend using ZEIT Now. We've got more information about deploying your project with ZEIT below.
- Look through the designs to start planning out how you'll tackle the project. This step is crucial to help you think ahead for CSS classes that you could create to make reusable styles.
- Before adding any styles, structure your content with HTML. Writing your HTML first can help focus your attention on creating well-structured content.
- Write out the base styles for your project, including general content styles, such as
font-familyandfont-size. - Start adding styles to the top of the page and work down. Only move on to the next section once you're happy you've completed the area you're working on.
Sentite libre de usar cualquier flujo de trabajo con el que te sientas cómoda. A continuación mostramos un proceso sugerido, pero no sientas que tenés seguir estos pasos:
- Inicializá el proyecto como un repositorio público en [GitHub] (https://github.com/). Esto hará que sea más fácil compartir el código si necesita ayuda.
- Configurá tu repositorio para publicar tu código en una URL. Esto también será útil si necesitás ayuda durante un desafío, ya que podés compartir la URL del proyecto. Hay varias formas de hacerlo, pero recomendamos usar [ZEIT Now] (http://bit.ly/fem-zeit). Más adelante tenemos más información sobre cómo subir el proyecto con ZEIT.
- Mirá los diseños para comenzar a planificar cómo abordar el proyecto. Este paso es crucial para ayudarte a pensar con anticipación las clases de CSS que podrías crear para hacer estilos reutilizables.
- Antes de agregar cualquier estilo, estructura el contenido con HTML. Escribir el HTML primero puede ayudar a centrar tu atención en la creación de contenido bien estructurado.
- Escribí los estilos base para el proyecto, incluidos los estilos de contenido general, como
font-familyyfont-size. - Comenzá a agregar estilos en la parte superior de la página y empezá a trabajar para abajo. Pasá a la siguiente sección solo cuando estés segura de haber completado el área en la que estás trabajando.
¡Divertite programando! 🚀