Product Preview Card Made with CSS Flexbox

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted over 1 year ago

  Hello there 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  • Avoid using width in percentage for this component, as it may lead to excessive width on very large screens. Instead, use max-width: 600px to limit its width and maintain a better design across different devices.

  • For elements like this, consider using Flexbox or Grid layout for centering instead of position: absolute Using Flexbox or Grid layout is a more modern approach and often requires less code compared to position: absolute .

  • Minimize the use of <br> tags by using margins in your CSS. Some screen readers may read these elements, and it could lead to confusion for users relying on assistive technology.

  • Instead of using the <b> tag, use CSS to style your text. You can use font-weight: bold; to achieve the same effect.

  • Ensure a logical heading hierarchy. Don't skip heading levels, as it can impact accessibility and SEO. Stick to the appropriate hierarchy (h1, h2, h3, etc.) for better structure.

  I hope you find it useful! 😄

  Happy coding!

  3
• 

  SutonToch•340

  @SutonTochPosted over 1 year ago

  Good Job!

  I really like your organized .css and clean naming convention.

  The feedback above is great, and I'd like to second that.

  The only major thing I'd like to add is, that I'd recommend a mobile-first approach in terms of styling. First do the HTML for the desktop-design, but then style for the mobile-design first. This way, you usually have to write less CSS and media queries. Because in mobile designs, many Elements take up the entire space of a line, as does a block Element, which is the default behavior of many elements such as divs. Just try it out and see if you like it :).

  Some nitpicking:

  • Add the padding shorthand on left-container, you already did it on everything else, it deserves the attention xD
  • Add a 'cursor: pointer' to the button, because it currently doesn't look like it can be clicked.
  • Use your hsl(228, 12%, 48%) for the #perfume-description as well, since you already used it for the #perfume-header

  Be proud of yourself that you did the challenge and submitted it! Have a wonderful day :)

  1