Design comparison
SolutionDesign
Community feedback
- @joaskrPosted almost 2 years ago
Hi,
great job with the challenge :) It looks great. If you want to further improve your solution here are some tips:
Accessibility
- Wrap your content in a <main> element instead of a <div class="container">. It is best practice to use HTML landmark elements such as <main> <header> <footer> and <nav> because they improve accessibility.
- It is also best practice to have an <h1> on a page. In your case <h3> can be changed to <h1>. Generally, we should use headers in order - so we should start with <h1> then <h2> and then <h3>.
Design
- I noticed a small bug in your solution when you open the website on a mobile device in landscape mode. The content is too big for the screen and looks weird. You can fix it for example by changing:
.container{ width: 100%; height: 90vh; }
to
.container{ width: 100%; min-height: 90vh; }
Overall, great job.
Keep coding and good luck with the next challenges!
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