Submitted over 1 year ago

HTML/CSS Product Page

Kibur Yoseph• 310

@Kiburstgr

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Product preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

This Challenge was really fun. It really helped me think like a web-developer and see things from different perspectives. I think I also got a little better at googling things. The thing that was a little challenging was importing the fonts but nothing google couldn't solve. Also added a little hover effect for fun.

Community feedback

Abdul Khaliq 🚀• 72,660

@0xabdulkhaliq

Posted over 1 year ago

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have other recommendations regarding your code that I believe will be of great interest to you.

HTML 🏷️:

Your solution generates accessibility error reports due to non-semantic markup

So fix it by replacing the <div class="card"> with semantic element <main> and <div class="attribution"> with element <footer> to improve accessibility and organization of your page.

Use HTML5 semantic elements such as <header>, <nav>, <main>, <aside>, and <footer> to define these sections

I hope you find it useful! 😄 Above all, the solution you submitted is great!

Happy coding!

Marked as helpful

Please log in to post a comment

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