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 - trying perfect pixel

@fabiot2

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
JackEG 90

@Yakub357

Posted

Hi Fabio Triana, Your solution is great, congratulations.

  • About semantic HTML, I assume you are using h3 and at your solution, the page doesn't start with h1, according to accessibility requirements, I think you would add a h1 element for your product__card-ctg class instead of span. This would give the semantic meaning for your card. The layout seem great both for mobile and desktop versions. The html code well structured, about Sass files, i would divide one index.scss file into several, like reset, variables, and btn-component files, for reusability purposes. Howeveer, because this project is small, it is not necessarily.
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