Design comparison
SolutionDesign
Community feedback
- @frank-itachiPosted over 1 year ago
Hello there 👋. You did a good job!
I have some suggestions about your code that might interest you.
HTML 📄:
- Wrap the
<div class="main-container"
content in the<main>
tag.
CSS 🎨:
- Avoid using absolute length units px, especially for font-size and width properties, because they are not relative to anything else so that means they will always be the same size. Instead, you can use relative lengths like em or rem. The benefit of that last one is element which has that unit will scale relatively to everything else within the page, e.g., the parent container. You can dig up about it here.
I hope you find it useful! 😄 Above all, the solution you submitted is great!
Happy
<coding />
😎!Marked as helpful0@ChamodJPosted over 1 year ago@frank-itachi Thank you so much. I'm still learning html and css. This is really helpful to me. I'll change my code. Thank you again
0 - Wrap the
- @0xabdulkhaliqPosted over 1 year ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
- I have other recommendations regarding your code that I believe will be of great interest to you.
HTML 🏷️:
- This solution generates accessibility error reports, "All page content should be contained by landmarks" is due to
non-semantic
markup, which lack landmark for a webpage
- So fix it by replacing the
<div class="main-container">
element with the semantic element<main>
in yourindex.html
file to improve accessibility and organization of your page.
- What is meant by landmark ?, They used to define major sections of your page instead of relying on generic elements like
<div>
or<span>
- They convey the structure of your page. For example, the
<main>
element should include all content directly related to the page's main idea, so there should only be one per page
CSS 🎨:
- let me explain, How you can easily center the component.
- We don't need to use
margin
andpadding
to center the component both horizontally & vertically. Because usingmargin
orpadding
will not dynamical centers our component at all states
- To properly center the component in the page, you should use
Flexbox
orGrid
layout. You can read more about centering in CSS here 📚.
- For this demonstration we use css
Grid
to center the component
body { min-height: 100vh; display: grid; place-items: center; margin: 0; }
- Now remove these styles, after removing you can able to see the changes
body { padding: 150px 0; }
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful0@ChamodJPosted over 1 year ago@0xAbdulKhalid Thank you. Your explanation is really helpful to me.
0
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