Design comparison
Solution retrospective
Any comment is welcomed.
Community feedback
- @danielmrz-devPosted 10 months ago
Hello @JGabriel19!
Your solution looks great!
I have a couple of suggestions for improvement:
-
For semantic reasons, and since that is the main title of the screen, you can replace the
<h2>
with<h1>
. The<h1>
to<h6>
tags are used to define HTML headings.<h1>
defines the most important heading.<h6>
defines the least important heading. Only use one<h1>
per page - this should represent the main heading/subject for the whole page. Also, do not skip heading levels - start with<h1>
, then use<h2>
, and so on. -
Still about semantic HTML, you can replace your
div.container
withmain.container
. All these changes may have little or no visual impact but they make your HTML code more semantic and improve SEO optimization as well as the accessibility of your project. -
Lastly, instead of using
margin: auto
on the container to center it, you can addjustify-content: center;
on the body, since you addeddisplay: flex
to it.
I hope it helps!
Other than those details, you did a great job!
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