Design comparison
SolutionDesign
Solution retrospective
Any comments are welcome, thank you.
Community feedback
- @danielmrz-devPosted 10 months ago
Hello @JGabriel19
Your solution looks great!
I have a couple of suggestions for improvement:
- For semantic reasons, you can use
<h1>
for main titles. 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.
I hope it helps!
Other than that, great job!
1 - For semantic reasons, you can use
- @MelvinAguilarPosted 10 months ago
Hello there ๐. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
- You should use the
cursor: pointer
property to indicate that the element like a button or a link is clickable.
- Use an empty
alt
attribute (alt=""
) for icons to signal their decorative nature to assistive technologies.
- The
width: 100%
property in thebody
tag is not necessary. Thebody
tag is a block element and it will take the full width of the page by default.
- Even though the number '76' is the largest text in the component, it doesn't necessarily mean it should be an <h2>. Headings have a hierarchy and are meant to indicate the structure and importance of content .In your solution, one of the important header elements is a number that does not describe the component itself.
I hope you find it useful! ๐ Above all, the solution you submitted is great!
Happy coding!
1 - You should use the
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