Design comparison
Solution retrospective
I think i'm proud of using Bootstrap makes a lot easier and less coding on CSS.
What challenges did you encounter, and how did you overcome them?No mayor challenges
What specific areas of your project would you like help with?I had to limit the max height of the card on medium and large devices to be align with the card img, so i think if I knew another way to do it I will change it
Community feedback
- @R3ygoskiPosted 7 months ago
¡Hola Julián, felicidades por completar este desafío! Quedó casi idéntico al diseño propuesto, mis más sinceras felicitaciones.
Quisiera comenzar hablando de un pequeño detalle: cuando está en la pantalla móvil responsiva, tu imagen tiene el
border-radius
incorrecto, permanece igual que en la versión de escritorio.Sobre el título que está un poco más grande, puedes usar
width: 80%;
, eso lo hará parecer más similar al diseño.Ahora, en cuanto a la parte semántica, está bien, pero hay algunas partes que pueden mejorarse. Por ejemplo, esta
<section class="card">
, no creo que fuera realmente necesaria, ¿pero la utilizaste por Bootstrap, verdad?Otra cosa que puedes cambiar son los encabezados. Usaste dos encabezados,
<h2>
y<h6>
, pero hay una jerarquía de encabezados que se debe seguir. Siempre debes comenzar con<h1>
y descender progresivamente, sin saltarte ningún otro encabezado.Tienes un fragmento que está mal, aquí está:
<h6 class="d-inline ms-4 pt-lg-1 previousPrice"><del> $169.99</h6> </del>
O
<del>
se inicia dentro do<h6>
e se fecha depois do<h6>
, o que está errado.Y también está la parte del
<embed>
, lo correcto a usar allí es un<img/>
mismo, porque el<embed>
se utiliza para contenidos externos, no internos, como por ejemplo multimedia.Y nuevamente, felicidades por tu proyecto, sigue practicando y mejorando. Si tienes alguna duda, ya sabes, solo comenta abajo.
0 - @danielmrz-devPosted 7 months ago
Hello @Juliancito1!
Your project looks great!
I have a suggestion about your code that might interest you:
📌 You can use the
<picture>
tag when you have different versions of the same image.Using the
<picture>
tag will help load the correct image to the user's device, saving bandwidth and improving performance.Example:
<picture> <source media="(min-width: 768px)" srcset="{desktop image path here}"> <img src="{mobile image path here}" alt="{alternative text here}"> </picture>
I hope this helps!
Other than that, excellent work!
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord