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

Nicolas 50

@NA1DES17

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


I started the project in a very easy way and once the version for mobile devices was finished I had some problems to make the desktop site. Once the problems were solved, for some reason I destroyed the mobile version. But everything was solved and the project was finished.

Community feedback

Adriano 34,090

@AdrianoEscarabote

Posted

Hi Nicolas, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:

I noticed that you made your entire code using divs! this is not a good practice since div has no meaning, to improve the structure of your code we can use semantic elements that have meanings, not only for us who are developers, but also for screen readers, that is, a person who uses tools to browse the web, can better understand the content if our code is well written with semantic tags and some other features to improve accessibility!

The rest is great!

I hope it helps... 👍

Marked as helpful

0

Nicolas 50

@NA1DES17

Posted

@AdrianoEscarabote Thanks for the comment, they had already done it to me in another previous project... I'll try to improve them for the next one.

1

@Muhammad-adam778

Posted

Good job, Nicolas it almost match the design

  • About accessibility:
  • In the first and third warning: Semantic HTML Elements would solve the problem, you need to use elements like <main>, article, figure, and button.
  • If you want to know about Semantic Elements check this link Semantic HTML Elements.
  • In the second one : You need to add <h1> Element to your page.
  • I hope you find this helpful.

Marked as helpful

0

Nicolas 50

@NA1DES17

Posted

@Muhammad-adam778 Thank you very much, I will keep it in mind for the next project

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