Design comparison
Solution retrospective
Flexbox usage, although I'm still unsure if that is the best approach.
What challenges did you encounter, and how did you overcome them?Using flexbox in a project for the first time. I used freeCodeCamp and MDN to learn the basics of flexbox.
What specific areas of your project would you like help with?It is knowing if this is the best way to achieve this, and is the industry standard way for achieving this or is there a better way?
Community feedback
- @TedJenklerPosted 3 months ago
Hi @biwwabong,
Nice project! Here are a couple of observations and suggestions for improvement:
Simplify Layout: I noticed that you’re overusing containers and semantic HTML elements. Remember, any element can be a flex child, so you can simplify your layout by making the card a flex column and using margins to position elements. This approach will clean up your project and remove unnecessary code(divs and sections).
Use of Semantic HTML: While semantic HTML is important, it’s better to use <div> elements rather than incorrect semantic tags. Using inappropriate semantic tags can negatively impact both screen readers and SEO, as it might misrepresent the content. For example, using <article> for non-article content can lead to confusion for users and search engines.
Keep up the great work!
Best, Teodor
Marked as helpful1 - @Jan-Dev0Posted 3 months ago
Looks good but consider using flexbox on body:
display: flex; justify-content: center; align-items: center; }
Then your container is right in the center and you don't have to work with margins.
Marked as helpful0 - @SvitlanaSuslenkovaPosted 3 months ago<main> <article class="container"> delete article and in styles replace .container with main(without dot).1
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