Responsive product preview card using HTML and CSS (media and flexbox)

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted over 1 year ago

  Hello there 👋. Good job on completing the challenge !

  Overall, the solution is well done. I can only give you a few small tips to consider in this challenge.

  • Keep font size in relative units like em or rem, not vh (viewport height). Using vh for font size may cause inconsistent scaling on different screen sizes

  • Avoid using many nested selectors (e.g.: main .section2 .perfume-description) in your CSS to maintain code simplicity, readability, and prevent specificity issues. Simply use: .perfume-description

  • You can shorten the border-radius declaration using shorthand notation:

  Your actual code:
  ‎ ‎ ‎ border-radius: 30px;
  ‎ ‎ ‎ border-bottom-right-radius: 0;
  ‎  ‎ ‎b‎order-bottom-left-radius: 0;
  
  You can shorten it as follows:
  ‎ ‎ ‎ border-radius: 30px 30px 0 0;
  

  ‎ Format: border-radius: [top-left] [top-right] [bottom-right] [bottom-left];

  • Consider using a <button> element instead of a <div> with class "buttom". If an element has a pointer cursor and a hover effect, it indicates interactivity, commonly used for buttons, links, form fields, etc..

  • Utilize header elements (e.g., <h1>, <h2>, etc.) to provide a hierarchical structure to your content, making it more accessible and helping search engines understand your page's organization.

  • There's no need to enclose each element in a <div> unless it serves a specific purpose for styling or layout.

  For more in-depth knowledge about semantic elements and HTML planning, you can read the article "How to plan your HTML: Product Preview Card" at https://fedmentor.dev/posts/html-plan-product-preview/.

  Overall, the solution is very well executed. Good luck with your future coding endeavors

  Happy coding!

  Marked as helpful

  1

  ---

  

  Paulo Xavier•100

  @paulo-xavierPosted over 1 year ago

  @MelvinAguilar Thanks very much for the useful tips!! I will apply this concepts in my future projects! Have a good week! 😁 Happy coding!

  0