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

Responsive Products Card using Grid in HTML and Vanilla CSS

P

@hamzafrontend

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?

Constructive criticism is welcome.

Community feedback

P
AKdeBerg 160

@AKdeBerg

Posted

Overall the design is good actually. About the HTML part, I'm curious to knw why u choose to use section tag rather than article tag?

1

P

@hamzafrontend

Posted

@AKdeBerg I think the article tag is use for blog, it was card, that's why I did not use article, correct me if I am wrong.

0
P
AKdeBerg 160

@AKdeBerg

Posted

@hamzafrontend hmm.. I think MDN document explained it well- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article But I think using section isn't a deal breaker. You can see the section tag also in MDN- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section

1
P

@hamzafrontend

Posted

@AKdeBerg Thank you for sharing the useful links, as far as I understand article should be used when the content inside is reusable and independent from other content and could be understandable alone, but on the other hand, we should use a section when we want to group the content that is related and the section is not reuseable, and alone it does not have meaning.

For this condition, the article tag would be suitable instead of a section.

Correct me if I am wrong, thank alot.

1
P
AKdeBerg 160

@AKdeBerg

Posted

right now @hamzafrontend

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