20

#PlatziWebChallange - Semana #2

Escuela de Desarrollo Web by Platzi - Article preview component

desktop-preview.jpg

Bienvenida/o al reto 2

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

Estás lista/o?

Frontend Mentor challenges allow you to improve your skills in a real-life workflow.

Para realizar este reto, necesita un conocimiento básico de HTML y CSS y un poco de JavaScript.

El reto

Tu reto es construir este componente de vista previa de un artículo y lograr que se parezca lo más posible al diseño.

El único JavaScript que necesitará para este desafío es mostrar la sección de compartir cuando alguien haga clic en el icono de compartir.

Tus usuarios deberían poder:

  • Ver el diseño óptimo del componente según el tamaño de pantalla de su dispositivo. (Mobile First es requerido)
  • Ver los enlaces para compartir en las redes sociales cuando hagan clic en el icono de compartir

¿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.
  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 el hashtag #PlatziWebChallange y @degranda10 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:
4
24143Puntos

Reto 2 Completado 😄
#PlatziWebChallange @degranda10
-> DEMO - Github Pages
-> REPO - Github

  • Intenté ingresar al grupo de Telegram pero me sale que no existe el grupo.
Des.JPG
CEl.JPG
2
24143Puntos
un año

Si alguién me puede pasar el link para unirme al grupo en Telegram estaría muy agradecido 💚

1
3626Puntos
un año

Quedo igualito! 👍😁
Cambien traté de hacerlo, aunque no salió específicamente similar al reto. 😯

4
35744Puntos

Reto terminado! 😄

Estoy abierto a recibir feedback, les dejo los enlace a mi git y al sitio

Live url 👉 https://leocode0.github.io/challenge_platzi02/
Repositorio 👉 https://github.com/LeoCode0/challenge_platzi02

Screenshot_2020-08-25 Frontend Mentor Article preview component(1).png
Screenshot_2020-08-25 Frontend Mentor Article preview component.png
2
16604Puntos
un año

íjole bro, andas con nitro ¡Está genial! 😄

3
19222Puntos

Genial, estos retos son lo que estábamos necesitando. Gracias Platzi 💚 Ahora mismo empiezo

2
16604Puntos
un año

Sí, está genial para consolidar conocimiento 😄

2
24820Puntos

Me gusta mucho que no reintenten la deuda =P, alguno de los aqui presentes se ha mirado la pagina de Frontend Mentor?

Me parece super interesante, han juntado el aspecto social de Platzi con esa herramienta.¿ Qué opinan vale la pena pagar el premium de allí?

2
4598Puntos

Que padre! 😃 cómo le hago para que melleguen notificaciones de los retos? 😛

1
29284Puntos

Tarde pero seguro, aquí está mi solución al reto #2.

Es un reto que ya había hecho antes directamente para frontend mentor, pero la solución es la misma.

Repositorio acá

Live URL acá

1
2124Puntos

hola esta interesante el reto de esta semana

1
18088Puntos

Mejorando un poco más:

desktop.png
pequeña.png