Design comparison
Solution retrospective
"I am not confident about my entire CSS code."
Community feedback
- @danielmrz-devPosted 10 months ago
Hello @anuj140!
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>
.The tag
<p>
is meant for paragraphs. For titles, we have the HTML headings (the tags<h1>
to<h6>
).Here's a quick guide on how to use them:
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 - The
- @faisalalwarePosted 10 months ago
Hey @anuj140 nice work!
Your css code looks good, but you should work on font sizing and box sizing as per the design provided in template. You should also add transition to the links on hover & add actual url to the links. You should reduce the padding of the container upto 480px screen size in media query, because at 320px screen size the container is overflowing horizontally.
I hope my suggestion will be helpful for you.
Other than that good job on design.
Keep Coding.
Marked as helpful0@anuj140Posted 10 months ago@faisalalware Thank you very much for taking the time to review the entire CSS code. I apologize for the lack of specificity in my question. I understand that the font sizing and box-sizing are not by the design, and I struggle a little bit to match the two. I appreciate your help and guidance. I will make sure to take care of these issues in the next project. Once again, thank you very much. The community rocks!
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