Desktop First Solution Using CSS Flexbox and Media Queries

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hello there 👋. Good job on completing the challenge !

  • The best approach is to start with mobile-first. This approach allows you to create a base style for all devices and then use media queries to adjust the design for larger screens. This ensures that the design looks good on all devices, regardless of their size. Additionally, it is easier to scale up from a mobile-first approach than it is to scale down from a desktop-first approach.

  • Having two or more h1 tags in a webpage is not recommended because it can be confusing for search engines. Search engines use the h1 tag to determine the main topic of a page. "<h1>$149.99</h1>" should not be a level one heading.

  • You could use the <del> tag to indicate the price that was before the discount. Additionally, you can use a sr-only class to describe the discount. This will help screen reader users to understand that the price was discounted.

    Example: <del><span class="sr-only">Old price: </span>$169.99</del>

  • The product image is not a decoration. You must not use the background-image property to add the product image. Instead, use the <img> tag to add the image. Use the background-image property only for decorative images that do not add any information to the page.

  I hope you find it useful! 😄

  Happy coding!

  Marked as helpful

  1