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 using FlexBox

@jlmunozfdev

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Lo más difícil fue tratar de utilizar Grid ya que no estoy muy familiarizado, por esa razón use flexbox. Aunque sé que con Grid me hubiese ahorrado varias líneas de código tengo que aprenderlo mejor para comenzar a usarlo con propiedad. En lo que no estoy seguro es la parte del centro de los componentes y también en la utilización de HTML semántico.

Agradecería que me den un feedback. Gracias de antemano.

Community feedback

David 8,000

@DavidMorgade

Posted

Muy buenas Jorge, enorabuena por finalizar el challenge!, muy buen trabajo

Me gustaría ayudarte un poco con mi feedback para que lo puedas aplicar en este o futuros proyectos!

Primero que todo en el tema de tags html más semanticos, en vez de usar directamente un section dentro del main para englobarlo todo, podrías usar main para englobarlo todo y después dividirlo en sections, además de usar la imagen directamente en el html con un <picture></picture> para poder usar ambas imagenes (desktop y mobile) en dos <source> tags, y renderizar entre la imagen mobile o la desktop dependiendo del tamaño de la pantalla!

Otra cosa es la forma de centrar el card en medio de la pantalla, en vez de usar margin en el main, prueba usando flex directamente en el body para centrar, algo más o menos así:

body {
background-color: var(--cream);
font-size: 14px;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}

Quitando el max-width ya que si no en pantallas de más de 1440px no te quedará centrado.

Finalmente, podrías usar un transition: background-color 0.5s ease; en tu botton para que quede una transitición chula cuando hagas hover en el botón!

Espero que mi feedback te sea de ayuda, cualquier duda que tengas no te lo pienses y pregunta! buen trabajo!

Marked as helpful

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