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 Product Card Using Flexbox

@SalarSadeghi

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


It would be better if there was any Figma Design. What a pitty...!

Community feedback

@devaramnye

Posted

Good work there,

I recommend to not aim for pixel perfect. The best approach currently is to follow the importance of semantic HTML markups & landmarks. As example in a HTML document there should be only one h1 element. The next heading continues with h2 h3 h4 and so forth.

  • a good approach is to get away of the div elements because HTML5 gifts us with useful landmarks like header, main, navbar, footer, aside etc. This helps us to structure our HTML for better readability.

Go and check the landmarks to practice those stuffs. There are alot of infos to grab on the Internet and you wont regret 🌞

Happy coding and good work! Keep going

Marked as helpful

0

@SalarSadeghi

Posted

You're right. I will use your helpful tips on my next projects.

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