73

Dibujo en CSS | Retos de Desarrollo Web con Estefany Aguilar

17185Puntos

hace 3 años

¡Te damos la bienvenida a una nueva sección de retos para la Escuela de Desarrollo Web!

Cada mes, Estefany Aguilar, una de las profesoras más tesas en Platzi, te propondrá un nuevo reto en el Blog de Platzi para fortalecer tus habilidades como frontend developer.

Dibuja tu tablita de Sushi con CSS Grid

¡Así es! En la sección de comentarios debes publicar el código HTML y CSS que usarías para crear un delicioso plato de sushi. Pero no puedes usar imágenes, el platillo debe desarrollarse únicamente con etiquetas de HTML y estilos en CSS. Puedes mostrarnos el resultado final en Twitter con el hashtag #RetosPlatziCSS 😉

Reglas:

Title
1
1d
2.png
2d.png
3.png
3d.png
4.png
4d.png
5 (1).png
5d (1).png
Footer

Aquí encontrarás la solución al reto por parte de la profesora.

¡Pero no hagas trampa! Diseña tu propia solución, publícala en los comentarios y luego sí revisa el codepen de la profesora para comparar con tu código.

Puedes mostrarnos el resultado final en Twitter con el hashtag #RetosPlatziCSS

Además, cuéntanos qué otro tipo de retos te gustaría encontrar en esta nueva sección.

#NuncaParesDeAprender

Estefany
Estefany
teffcode

17185Puntos

hace 3 años

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
24
16263Puntos

Genial, reto completado.
Aquí pueden encontrar el código completo. Y aquí pueden verlo en vivo.
dibujocss.png

6
8985Puntos
3 años

Gran diseño bro, voy por mío.

9
17185Puntos
3 años

WOW !!! 🎉 Con Ramen incluidoooo… me muerooo 😍 Se ve espectacular… Revisando el código: Me encantó el uso de variables, transformaciones, calc(), positions… y más aún, el excelente uso de Flexbox y CSS Grid 👏🏼 Felicitaciones !!!

Un puntico mínimo que podríamos mejorar, es la consistencia en los nombramientos 😊 o todos en inglés o todos en español, vi cositas como plato-wrapper 😅 que te funcionó perfecto, pero que podríamos darle una mejor forma en el futuro 💚

Te quedó maravilloso !!! Gracias por #NuncaPararDeAprender ✨

1
16263Puntos
3 años

Por supuesto! Muchas gracias por el feedback. 😃
A veces paso por alto ese detalle 😂, pero lo tendré en cuenta para mis demás proyectos. #NuncaParesDeAprender

3
1811Puntos
3 años

Al verlo con el inspector de elementos me quedé boquiabierto. Me doy cuenta que me falta muchísimo por aprender. Aunque principalmente debo decir que tu ejecución fue excepcional. Quizá sea una simple perspectiva de alguien que recién va en el curso de programación básica, pero es que me he quedado perplejo al imaginar todo lo que se puede hacer con la guía y las herramientas correctas.
Excelente trabajo. Has inspirado a alguien, bro.
Éxitos.

1
16263Puntos
3 años

Muchas gracias bro. Igualmente éxitos. 😉

2
15319Puntos
3 años

Se ve increíble, que gran trabajo.

15
18557Puntos

Me divertí mucho haciendo este reto 💚😅

screencapture-127-0-0-1-5500-index-html-2021-03-12-21_39_54.png

Aquí está mi solución al reto: https://codepen.io/sxbino/pen/KKNJRpp

6
17185Puntos
3 años

Ay me encanta !!! ❤️ Súper espectacular… 👏🏼 Felicitaciones por cumplir el retooo !!! Excelente HTML (super clean) y un excelente trabajo con CSS Grid y Positions 🎉

8
21825Puntos

Un repaso para CSS Grid…
https://codepen.io/guemar08/pen/poNGVYP
Captura.PNG

7
17185Puntos
3 años

Wow !!! Me súper encantó esta tablita 😍 Muy buen HTML y un excelente uso de Flexbox y CSS Grid… 🎉 Lo único que podríamos revisar para la próxima, sería el tema de nombramientos 😊 están súper bien, pero veo que unos están en inglés (container, bowl…) y otros en español (pescado, verduras, contenido…), sé que a veces por hacerlo rapidito no nos fijamos mucho en esto, pero podríamos empezar a trabajar de forma más consistente en un fututo (sea o todos en inglés o todos en español).

Muchas felicitaciones ! Excelente trabajo ✨💚

1
21825Puntos
3 años

Uff eso si :c , aunque estoy leyendo sobre BEM, en los próximos desafíos estará mejor.

4
6790Puntos

Mientras buscaba referencias de ilustraciones, me encontré con un bello poster de sushi y ramen, y quise replicarlo usando solo HTML + CSS.

¡Gracias por el reto Estefany! pude aplicar múltiples conceptos, incluyendo la orientación del texto según la escritura japonesa, css grid y algunos trucos para sombras sólidas.
Aquí el código en Github, y aquí pueden verlo en Codepen.

4
20864Puntos

Lo unico que se hacer en css por el momento es pixel Art jajaja chrome_9jFPLN9eMO.png
voy a ponerme a hacer el sushi

4
34409Puntos

bueno, a tomar el curso de css grid…!!

3
17185Puntos
3 años

Esoooo ✨💚🚀

4
38110Puntos

Eso se ve fácil, voy a intentarlo 😄

2
17185Puntos
3 años

Yeiiii 🚀✨ Espero el resultado por aquí en los comentarios !!! 🎉

4
16880Puntos

Me arriesgué a hacer el reto sin tomar el curso. CSS siempre ha sido complicado para mi. Cabe mencionar que hace un par de meses, no hubiera logrado este resultado. Una vez que termine el curso, sé que podré mejorar.

![sushitable](sushitable.png

Código

4
61007Puntos

El reto esta genial, aun no he sacado el curso de CSS Grid asi que estare por aqui pronto, estaria bien que tambien Platzi tenga un apartado para practicar proyectos reales, tipo Frontend Mentor. 😄
O sera mucho pedir?😬

2
17185Puntos
3 años

Amooo 😍 Me encanta la idea… Vamos a tener esto muy en cuenta para que podamos poner en práctica nuestras habilidades y nuevos aprendizajes 💚✨🚀

1
18584Puntos

No es uno de los mejores pero voy avanzando en el proceso de Css Grid

![](SUSHI.png

1
5494Puntos

Hola comunidad, estuve viendo como abordar este reto y decidí hacer un menú con varios tipos de sushi, espero puedan dejarme su feedback.

Les dejo el live del sitio: https://menu-sushi.vercel.app/
y el código en Github: https://github.com/Feelshot/menu-sushi

Captura de Pantalla 2022-01-23 a la(s) 11.02.11 p.m..png

Aplique un poco de todo, css grid y flexbox, responsive design, position: absolute y relative, entre otras cosas.

1
7254Puntos

Aquí está el reto, aprendiendo de a poco, siempre con cosas para mejorar 💪.
Por acá dejo el link con el codigo
sushi-dibujo-css.jpg

0
13985Puntos

Buenas tardes se que cada quien tiene maneras diferentes y por lo tanto en todos va variar el tiempo de realización pero aun así quisiera tener alguna referencia del tiempo promedio que se debería tener para retos de este tipo para también darle seguimiento después a mi dibujo y poder tener una medición de mejora.

0
16880Puntos
3 años

Desde mi punto de vista, no hay un tiempo promedio. Creo que deberías poner más atención en la estructura de tu código, la forma en como nombras los elementos, entender el código que estás generando. Puedes llegar a la solución en un tiempo muy corto olvidándote de las buenas prácticas. Que tu medición de mejora sea la calidad de tu código.