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
Cannot read properties of null (reading 'code')
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive mobile first with flex box and media queries

y4rb0w 260

@Yavanha

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


Hello everybody,

The thing that got me while doing this project, is I have no idea how to handle the height to center the main container. So I did something whith the min-height on the main container element.

I would like to know if what I did is considered as good practices or there is a better solution ?

Except from this, I really enjoyed working on this project, so if you have any feedback please feel free to le me know.

Thank you

Community feedback

kxnzx 870

@kxnzx

Posted

Hi! You did a good job. What you did is considered as good practice. Well done!

I have a suggestion: It is good to use div’s for the purpose of styling and arranging components on the page. Div’s are like empty containers, but they do not have any semantic meaning. So instead of <div class="container"> use <main class="container">.

The main tag is considered an accessibility landmark and ensures that a screen reader and people with visual impairment have the ability to jump to sections of the page. Examples of landmarks are: header, nav, main, aside, section, footer.

Marked as helpful

1

y4rb0w 260

@Yavanha

Posted

@kxnzx Thank you very much

0
kxnzx 870

@kxnzx

Posted

@Yavanha Yrw! :)

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