47

#PlatziWebChallange - Semana #1

Escuela de Desarrollo Web by Platzi - Huddle landing page with single introductory section

desktop-preview.jpg

Bienvenida/o 👋

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?

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

¿Donde encontar 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.

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

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. Mia los diseños para comenzar a planificar cómo abordaras 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

There are multiple places you can share your solution:

  1. Asegurate de tener tu reto terminado en GitHub y GitHub Pages.
  2. Deja el enlace a tu repo en este hilo.
  3. 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

En el Curso practico de HTML y CSS te enseñamos todo lo necesario

Escribe tu comentario
+ 2
Ordenar por:
5
22052Puntos

Uff, Platzi se está botando con los retos, sii!

3
28168Puntos

Reto terminado!
GitHub: https://github.com/matiaswasiak/PlatziWebChallenge_1
Pages: https://matiaswasiak.github.io/PlatziWebChallenge_1/

(Tengo que aclarar que tuve un problema a la hora de cargar las imágenes en GitHub Pages, donde lastimosamente solamente se ve el contenido sin imágenes, de igual manera pueden descargar mi repositorio y ejecutarlo con Live Server, esa es la forma en la que me permite visualizar las imágenes. Si alguien me puede ayudar con este problema les agradecería muchísimo!).

También les dejo capturas de como quedó!

DESKTOP - 1440px
1440px.png


MOBILE - 375px
375px.png


Espero que les guste! 😃😃😃

3
2458Puntos

Excelente reto! Me tomó un poco más del tiempo que pensaba, parecía tan sencillo pero cuadrar las imágenes pixel perfect es complicado D:
Siento que hay un poco de trampa, ya que en la guía de estilos dice que el tamaño de mobile es 335px, pero la imagen guía es de 700px, pero igual me las arreglé para que se vea decente, me encantaría recibir feedback!! dejo screenshots, repo y live preview aquí. Muchas gracias!

Repo: https://github.com/StilDavila/semana1Platzi
Live preview: https://stildavila.github.io/semana1Platzi/

stildavila.github.io_semana1Platzi_.png
stildavila.github.io_semana1Platzi_ (1).png
1
2458Puntos
un año

#PlatziWebChallange y @degranda10

3
22958Puntos
<h1>Reto Terminado</h1>

Pueden ir a checar el repositorio AQUÍ

3
11409Puntos

Reto culminado!

El resultado y contenido mostrado en este repositorio es producto del primer reto de la escuela de desarrollo de platzi.
#PlatziWebChallange @degranda10

GitHub Page
Repositorio

====== DESKTOP======
2020-08-20-14-12-taberoajorge.github.io (1).png

====== MOBILE======
2020-08-20-14-12-taberoajorge.github.io.png

3
427Puntos

Llevo muy poquito con el tema y tengo bastantes dudas en cosas que he hecho, no se si explicarán como hacer el reto o hay alguna vía para preguntarlas, pero aquí dejo el resultado:

Live server: https://pablojavierluengo.github.io/PlatziWebChallengeSemana1/
Repo: https://github.com/PabloJavierLuengo/PlatziWebChallengeSemana1

El repo es algo caótico, mi idea era simular un equipo en el que uno trabajaba el header, otro el main y otro el footer, pero tuve que ir tocando cosas de todas las secciones sobre la marcha y decidí hacerlo todo en master.

1
9555Puntos
un año

Te falto la vista para móvil

3
14560Puntos

Reto completado 😎

Link:
Repo:

3
18088Puntos

Estoy empezando en el desarrollo web y justo estaba buscando cómo practicar y aparecieron estos retos. Gracias.

vertical.png
horizontal.png
3
19222Puntos

Reto finalizado, estuvo genial!!
Enlace al repositorio.
Enlace al sitio.
Mobile
phone.PNG

desktop
desktop.PNG

Usé la metodología Mobile First. 😄

2
5540Puntos

Muy bien que empecemos a hacer retos, ojala la dificultad de estos vaya subiendo

2
9555Puntos

Cual es el siguiente reto?

1
3329Puntos

Challenge accepted!. Here we go.

1
5625Puntos

Más vale tarde que nunca!

Repositorio

Pagina

1
4463Puntos

Acepto el reto, en marchaa…

1
6069Puntos

Tengo menos de un mes en Platzi pero a ver que sale, challenge accepted

1
10822Puntos

Challenge Accepted !!! 💪🏻

1
5625Puntos

1
8078Puntos

#Challengeaccepted

1
13369Puntos

Nunca es tarde ♥ Reto terminado.

Si tiene sugerencias , son bienvenidas.
lo hice con la metodología de mobile first y BEM o eso intente hacer.

1
8541Puntos

Hola Platzinautas! Apenas me pongo al día con este reto, mejor tarde que nunca 😁

Repo: https://github.com/margehouse/PlatziWebChallenge-Reto1
Live: https://margehouse.github.io/PlatziWebChallenge-Reto1/

p.s. su feedback es muy agradecido 🙏 Tuve un problema con el fondo para las resoluciones de 800px en adelante porque no cubría la totalidad de la página, así que me toco intentar algo diferente (que estoy segura no es la mejor práctica, pero no pude descubrir el conflicto) 😥

0
28554Puntos

Llego 5 meses tarde… pero mejor tarde que nunca jaja
También lo intente y este fue el resultado 😄
PD: Todo gracias a los conocimientos que he adquirido en este tiempo de estudio dentro de Platzi 💚
PD2: Lo hice practicando lo aprendido de Mobile first.
Les dejo el repo y el link para que puedan verlo y apoyarse en caso tengan dudad o bien hacerme un pull request con alguna mejora 😃
Repositorio de GitHub
Ver Online

Vista Desktop
pc.jpg

Vista Mobile
mobile.jpg

0
1262Puntos

Okey… Me vengo enterando de esto. Aprovechare a realizarlos para estar al dia. Y nada mas que en el mejor momento que queria practicar CSS y HTML 😂😂😂😂