Design comparison
Solution retrospective
I'd welcome any constructive criticism
Community feedback
- @TedJenklerPosted about 2 months ago
Hi @samuel-faith,
Nice project! Here are a few suggestions:
Another fun way to center a <div> is by setting the parent to position: relative, the content to position: absolute, and then using top: 50%, left: 50%, with transform: translate(-50%, -50%). The third method, which is more complex, involves using Grid, but Flexbox is definitely the most recommended approach for this project.
You’ve done well using the <main> tag. One improvement for your card component would be to reduce unnecessary nesting of <div>s. For example, this project could be simplified with just one <main> for the card using Flexbox in a column layout, and one <div> for the card footer. This would make your code cleaner, more readable, and more accessible.
I noticed that the use of <h1>, <h2>, and <h3> could be refined. The <h1> tag is meant for the page title, <h2> for headers, <h3> for sub-headers, and <h4> for sub-sub-headers. Try to avoid using HTML elements for styling purposes. Instead, use them for their intended structure and meaning to enhance SEO and accessibility. For this project, you would likely only need one <h2>, and could use elements like <time> and <span> for additional content like badges.
Keep up the great work!
Best, Teodor
Marked as helpful0@samuel-faithPosted about 2 months ago@TedJenkler, thank you for the detailed explanation. I understand perfectly now, we become better every day.
1 - @SvitlanaSuslenkovaPosted about 2 months ago
Hi. please consider to remove div.container and add flex to the body.
body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; } Try this to align(top-bottom) and justify(left-right) your project to the center. It applies to the parent component(body), don't forget about !!min-height!!. You can use grid instead of flex too.
Hope you found this comment helpful :)
Marked as helpful0@samuel-faithPosted about 2 months ago@SvitlanaSuslenkova, thank you for the feedback.
How do I apply "align(top-bottom) and justify(left-right)"
0@SvitlanaSuslenkovaPosted about 2 months ago@samuel-faith but I've wrote it already:
body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; }
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin 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