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

Order Summary Component (Using Flexbox)

@jlmunozfdev

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


La parte del manejo de los tamaños, el padding, el margin, pero al final creo que pude conseguirlo. Igual de todas formas, si alguien quisiera hacerme un feedback sobre algo que podrías quizás mejorar bienvenido sea.

Community feedback

David 8,000

@DavidMorgade

Posted

Buenas Jorge, muy buen trabajo con CSS y el HTML de tu componente te quedo excelente!

Como consejo te diría que cuando tengas dos items de flex y quieras separarlos (me refiero al main y el footer), en vez de utilizar margin-top o margin utilices gap en el elemento padre donde pusiste el flex (en este caso sería en el body), así que añadiendo gap: 1rem conseguirias el mismo efecto que usando margin!, esto es un pequeño cambio que apenas influye en nada, pero te lo digo para que lo tengas en cuenta en futuros proyectos!

Además de eso lo unico que cambiaría es tu heading con la clase card__title, este sería el heading principal por lo tanto deberías de usar directamente un h1, ya que cualquier página html necesita siempre tener un tag h1

Espero que mi feedback te sea de ayuda, buen trabajo y yo creo que ya deberías empezar a hacer proyectos más complejos!

Marked as helpful

0

@jlmunozfdev

Posted

@DavidMorgade Otra vez gracias por el feedback. No me había fijado en ese detalle del h1, pensé que lo había puesto. Por otro lado, en cuanto al gap; revisaré un poco la documentación para empaparme más del tema. ¡Gracias nuevamente!

1

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