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 card page using flexbox

Mazen Adel 270

@MazenAdel1

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


Maybe..make the spaces between the elements perfectly at first

Community feedback

Account Deleted

Hi... congrats on completing this challenge. 🥳🎉

Here some tips to improve your code. 🚀

HTML: 🧱

Header elements implement six levels h1-h6, with <h1></h1> being the most important and <h6></h6> being the least important. Avoid omitting header levels, you should start with the header <h1> and successively with <h2> ... <h6>.

But when using sections, you must use an h1 for each section.

More info HERE.

Your img tags must carry an alternative text, (the alt tag), except in some cases. More info here

You can use the <picture> tag for this challenge. The picture tag helps us provide versions of the same image but in different resolutions, saving bandwidth and speeding up load times. More info here

CSS: 🎨

Your reset is good, but you can improve it by using some popular resets like the following 🚀:

Your solution is very good! 💯🚀

Happy coding! ✌️🙃

Marked as helpful

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