5

#PlatziWebChallange - Semana #8

Escuela de Desarrollo Web by Platzi - Job Listings Challenge

desktop-preview.jpg

Bienvenida/o 👋

Los retos que encontarás semana a semana permiten mejorar tus habilidades en un flujo de trabajo de la vida real.

Estás lista/o?

Para realizar este reto, necesita un conocimiento básico de HTML, CSS y un poco de JavaScript, recomendamos el Curso Definitivo de HTML y CSS

El reto

Tu reto es construir esta página inicial de una e-commerce y lograr que se parezca lo más posible al diseño.

Los usuarios deberían poder:

  • Ver el diseño óptimo para el sitio según el tamaño de pantalla de su dispositivo (Mobile First es requerido)
  • Ver el efecto hover para todos los elementos interactivos de la página
  • Filtrar la lista de trabajos basado en las categorias.

Filtos

Opción 1

Filtrar listados de trabajo según las categorías usando el HTML data- attribute. En esta opción, usaría el contenido codificado que ya existe en el archivo index.html.

Las categorías son:

  • Rol: Frontend, Backend, Fullstack
  • Nivel: Junior, Midweight, Senior
  • Idiomas: Python, Ruby, JavaScript, HTML, CSS
  • Skills: React, Sass, Vue, Django, RoR (Ruby on Rails)

Entonces, si una lista de trabajo tiene las siguientes categorías Frontend, Junior, JavaScript, React tu HTML data attributes se vería así data-role=“frontend” data-level=“junior” data-languages=“javascript” data-tools=“react”.

Opción 2

Usa el archivo de data.json para extraer los datos y luego agregar dinámicamente el contenido. Esto sería perfecto si está buscando practicar una library/framework de JS como React, Vue, o Svelte.

Para agregar un filtro, el usuario debe hacer clic en las tabletas en el lado derecho de la lista en el escritorio o en la parte inferior en el móvil. Para cada filtro agregado, solo se deben devolver los listados que contengan todos los filtros seleccionados.

¿Donde encontrar todo?

Tu tarea es realizar el reto con los diseños dentro de la carpeta /design. Ahí encontrará una versión móvil y de escritorio del diseño a trabajar.

Los diseños están en formato estático JPG. Esto significa que deberá utilizar su mejor criterio para estilos como font-size, padding y margin. Esto debería ayudar a entrenar su ojo para percibir las diferencias en los espacios y tamaños.

Encontrará todos los assets necesarios en la carpeta de /images. Los assets ya están optimiza.

También hay un archivo de style-guide.md, que contiene la información necesaria, como la paleta de colores y fuentes.

Construyendo tu proyecto

No dudes en utilizar cualquier flujo de trabajo con el que te sienta más cómoda/o. A continuación te muestro el proceso sugerido, pero toma esto como sugerencia y no regla:

  1. Clona éste repo en un repo público desde tu GitHub. Esto hará que sea más fácil compartir tu código con la comunidad si necesita ayuda. Si no está seguro de cómo hacer esto, Lee este recurso - Prueba Git.
  2. Puedes configurar tu repositorio para utilizar GitHub Pages. Esto también será útil si necesita ayuda durante el reto, ya que puede compartir la URL de tu proyecto con la URL de tu repositorio. Hay varias formas de hacer esto, pero recomendamos usar GitHub Pages.
  3. Mira los diseños para comenzar a planificar cómo abordará el proyecto. Este paso es crucial para ayudarte a pensar en las clases de CSS que podría crear para hacer estilos reutilizables.
  4. Antes de agregar cualquier estilo, estructura tu contenido con HTML. Crear la arquitectura de tu HTML primero puede ayudarte a centrar tu atención en la estructura de tu contenido.
  5. Escriba los estilos base para tu proyecto, incluidos los estilos de contenido general, como font-family y font-size.

Compartenos tu resultado

  1. Asegurate de tener tu reto terminado en GitHub y GitHub Pages.
  2. Deja el enlace a tu repo en este hilo, en el sistema de comentarios.
  3. Compartenos en el grupo de Telegram de Escuela de Desarrollo Web el número del reto junto con la URL de tu reto del foro.
  4. Lanza un tweet a Platzi y @degranda10 con el hashtag #PlatziWebChallange mencionandonos la URL de tu hilo para que nosotros y toda la comunidad de Platzi podamos verlo y celebrar contigo.

Diviértete y disfruta creando éste reto! 🚀

Créditos por el diseño y reto.

Este reto pertenece a la lista de retos de Frontend Mentor

Escribe tu comentario
+ 2
Ordenar por:
2
24820Puntos

React.js y Redux con typescript. Toda una experiencia…
Aun me queda averiguar porque no se ven las imágenes en producción, pero usando npm run start se podrá ver la pagina en local =P
Repo : https://github.com/juanmavelez/static-job-listing
Page : https://static-job-listing-blush.vercel.app/

1
24820Puntos
un año

No es posible mostrar imágenes en producción sin hacer un import de la imagen. O,o

Si alguien conoce alguna solución a este problema comen. Solo se me ocurre hacer un base de datos, subir las imágenes allí y hacer llamadas para obtener las imagenes

2
29284Puntos

Les dejo mi solución al reto #8. Está hecho con JS puro, no sé si eso es un logro. xD

La verdad me emocionó mucho hacerlo, hubo momentos en los que quería dejarlo a medias, pero sí continúe.

URL: https://hec-lopz.github.io/job-list/
Repositorio: https://github.com/hec-lopz/job-list

2
24820Puntos
10 meses

bohh! me encantan las animaciones que les has puesto!.
Hay algún curso de Platzi para aprender a esos trucos ?

En mi opinion si sabes hacerlos en js es suficiente ya que la lógica que has usado sera casi la misma en todos lados =P

0
8500Puntos

Hola compañeros, les vengo a compartir mi felicidad, al fin pude terminarlo:
Demo: https://job-list-s8.vercel.app/
Repo: https://github.com/ankynator/job-list-S8
La curva de aprendizaje fue alta para mi, no pude realizar el reto con vanilla js, asi que toco aprender react
Algo que no pude agregar son las medias queries para el responsive(y es algo que obivio ire aprendiendo y agregando en el futuro), pero creo que se ve decente en su version desktop