Design comparison
Solution retrospective
Difficult part is align position to center as well as adjusting attribute class position. I am sure it is good solution but i am not sure whether it is the best approach and it can be better i think.
Community feedback
- @danielmrz-devPosted 10 months ago
Hello @taranjeetsingh9!
Your solution looks great!
I have a couple of suggestions (about semantic HTML) for improvement:
📌 First: Use
<main>
to wrap the main content instead of<div>
.Tags like
<div>
and<span>
are typical examples of non-semantic HTML elements. They serve only as content holders but give no indication as to what type of content they contain or what role that content plays on the page.📌 Second: Use
<h1>
for the main title instead of<p>
.Unlike what most people think, it's not just about the size and weight of the text.
-
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/title for the whole page. And don't skip heading levels - start with<h1>
, then use<h2>
, and so on.
All these tag changes may have little or any 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!
Marked as helpful0 -
- @ZukizukPosted 10 months ago
Hello there, Congratulations on completing this project
Your solution looks nice
I have few suggestions that I think might be of interest to you.
- HTML: Consider using semantic HTML tags like
<main></main>
,<section></section>
and others that you can find in this link. And in this case, replace the<div class="main">
with<main class="main">
. the main tag should hold the main content of the page so consider correcting that.The semantic HTML tags help the search engines and other user devices to determine the importance and context of web pages. The pages made with semantic elements are much easier to read. It has greater accessibility. It offers a better user experience. Using div when there's a better alternative is not a good practice as div hold no semantic value.
The heading elements are H1, H2, H3, H4, H5, and H6 with H1 being the highest (or most important) level and H6 the least. 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. In your code, I didn't see any heading element. and as I said. every page need at least h1 tag so consider fixing.I hope this feedback is helpful
Other than that great job
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