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

Container-fluid, float

Metin AKINโ€ข 120

@Rheomacrodex

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

@MelvinAguilar

Posted

Hi @Rheomacrodex ๐Ÿ‘‹, good job completing this challenge! ๐ŸŽ‰

I have some suggestions you might consider to improve your code:

  • The <header> element is not necessary
  • Please avoid using inline styling. In addition to causing specificity issues, it makes it extremely difficult to modify a single style. It is better to have the styles in a separate file. This will increase the order of your code and make it more readable.
  • Instead of using <section> to wrap all the main content, use <main> tag to improve the accessibility of the website.
  • There is no need to duplicate all the code, On mobile devices, using a media query, change the direction of the container with flex-direction: column;

Above all, the project is done well๐Ÿ‘. I hope those tips will help you! ๐Ÿ‘

Good job, and happy coding! ๐Ÿ˜

Marked as helpful

3

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