@huyphan2210
Posted
Hi @bonzoycv, Congrats on completing the first challenge!
I took a look at your solution and wanted to share some feedback:
- The card (your
main
tag) isn’t centered in the viewport (the visible area of a web page on a screen). You’ve already used Flexbox on thebody
, but you're missingjustify-content: center
to center it. Typically, usingdisplay: flex; flex-direction: column; align-items: center; justify-content: center;
on the parent element (in this case, thebody
) ensures proper centering of child elements. There are exceptions, but this combo works well here. It’s a good idea to understand why these values center content as they do. - I noticed you’re using two
h1
tags and threep
tags for the card content. I think it's better to stick with oneh1
and onep
in this case. I assume the multiple tags were to match the line breaks in the design, but remember that the number of lines shouldn’t be a hard requirement. If the content changes or grows, those extra tags may cause issues. Matching the design is important, but so is keeping your HTML structure clean and future-proof for easier maintenance. - As for media queries, there’s no one right way to use them, but I recommend looking into a mobile-first approach. It’s a good practice to design for smaller screens first and then use media queries to adjust layouts for larger screens.
Hope this helps!
Marked as helpful
Hello @huyphan2210, Thanks a lot for your feedback. As you notice I am having a hard time to understand flexbox and media queries and your feedback was so much useful to understand a little bit more how this works. I will make the necessary corrections, thank you very much again.