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 Project

zee 60

@zeenox-stack

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
Steven Stroud 4,100

@Stroudy

Posted

Amazing job with this! You’re making fantastic progress. Here are some small tweaks that might take your solution to the next level…

  • Using a <main> tag inside the <body> of your HTML is a best practice because it clearly identifies the main content of your page. This helps with accessibility and improves how search engines understand your content.

  • Using lowercase in HTML (e.g., <p class="type">perfume</p>) with text-transform: uppercase; in CSS is better for accessibility and SEO. It separates content from presentation, ensuring screen readers interpret the text correctly and keeping the HTML clean and semantic.

  • Using rem or em units in @media queries is better than px because they are relative units that adapt to user settings, like their preferred font size. This makes your design more responsive and accessible, ensuring it looks good on different devices and respects user preferences.

Great job taking the time to learn! Your efforts are paying off, and I hope these insights guide you to even more success. Keep pushing forward, and remember, you’ve got this! Enjoy your coding adventures! 💪

Marked as helpful

1
DONUZZ 130

@mrdonuzz

Posted

Nice

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