Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

product-preview-card-component

DONUZZ 130

@mrdonuzz

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

lucielub 90

@LucieLuB

Posted

Tu código se ve bastante bien y parece que has hecho un buen trabajo en crear un diseño responsive. Aquí tienes algunos comentarios y sugerencias para mejorarlo aún más:

HTML Uso de imágenes: Considera usar <picture> para manejar diferentes fuentes de imagen más eficientemente, especialmente si necesitas imágenes de diferentes tamaños para diferentes dispositivos.

Accesibilidad: Asegúrate de que todas las imágenes tengan atributos alt descriptivos. Por ejemplo, la imagen principal podría tener un texto alternativo más informativo.

Enlace "Add to Cart": Considera agregar un atributo href real para que el enlace sea funcional, o usa # como placeholder.

CSS Flexbox: Estás utilizando flexbox correctamente, pero podrías considerar el uso de grid para una mayor flexibilidad en el diseño, especialmente en la sección de contenido.

Medidas responsivas: En lugar de usar vw y vh, podrías considerar el uso de % o rem para hacer el diseño más fluido. Esto puede ayudar a la adaptabilidad en diferentes tamaños de pantalla.

Media Queries: Buen uso de media queries, pero asegúrate de que cubren una variedad de dispositivos. Podrías agregar breakpoints adicionales si es necesario.

General Comentarios en el código: Considera agregar comentarios para aclarar la intención de ciertas partes del código, lo que puede ayudar a otros (o a ti mismo en el futuro) a entender mejor tu trabajo.

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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