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 card SASS BEM

P
Luka 160

@zmora2622

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What specific areas of your project would you like help with?

I mainly need help with BEM and accessibility and HTML semantics

Community feedback

@Dacardonac

Posted

Hi Luka! I hope you're doing well. I was reviewing your project, and everything looks amazing. I want to congratulate you on the excellent solution. I didn’t find any major errors, just a few minor points that you could address to improve the SEO and Accessibility of your page. I ran an audit using Google’s Lighthouse tool, and it provided some recommendations for enhancing these aspects. Below, I’ve outlined how you can improve these values in your project:

  • The image or icon of the shopping cart in the button is missing the alt attribute, which reduces the Accessibility of your page.

  • I noticed that your HTML is missing Metadata tags, which are very important for describing your project, improving your SEO, and positioning it better in browsers or search engines. Here’s a link where you can read more about this: Metadata and SEO.

  • Review your HTML structure; you could improve its semantics by using more specific tags such as <main>, <header>, <article>,<section>, etc. Below is a link to learn more about HTML semantics: HTML Semantic.

  • To improve the Performance of your page, you can change the format of your images to .webp.

  • As a final piece of advice, I recommend researching and using Conventional Commits, as they are very useful for understanding and maintaining clearer control over Commits. Here’s a link where you can read more about Conventional Commits: Conventional Commits.

As I mentioned, these are minor points; your project is well done overall. I hope this feedback is helpful and serves as a learning opportunity.

Keep developing, and I wish you the best of luck!

0

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