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

Solucion desarrollada con HTML CSS Flexbox

@rimar-basaa

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

P

@DrakeHermit

Posted

HTML Wise

  • You need to have at least one h1 in your HTML
  • With the PERFUME part there's a CSS property you can use to make the letters stand further away from each other called letter-spacing
  • Also I would use the <main></main> tag with a class to wrap my content together instead of just using a div.
  • I would also remove the attribution div and the tag within HTML but that's just me, you don't have to do it if you don't feel like it.

CSS Wise

  • You need to work on making this component responsive which it isn't right now.
  • Don't add fixed width and height on the body selector which adds an overflow bar on the bottom and it doesn't center the whole component whatsoever, if you want to center the whole component use this CSS code
body {
  display: flex;
  min-height: 100dvh;
  align-items: center;
  justify-content: center;
}
  • You're adding font family to everything basically which isn't really up to DRY standards(Don't repeat yourself), either make a class that adds the font family to a block or use inheritance by setting the font family to the body {} selector. But since this challenge requires you to use two different font families I would go the class route. Also while setting up font-family you want to add a backup if for some reason the font doesn't work. font-family: 'Fraunces', sans-serif for example.
  • Also I would strongly encourage you to make use of CSS variables which makes it so much easier to add a color or anything that needs to repeat in your code. CSS Variables

Keep on working on your HTML and CSS, Happy coding

0

@rimar-basaa

Posted

@DrakeHermit muchas gracias, por tus recomendaciones tratare de implementarlos en las proximas soluciones.

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