Design comparison
Solution retrospective
It looks like it is responsive but when i deployed it and ckeck with my phone, i saw that it is not very responsive. what are your practices to see if your project is responsive on all screen? Please check my project and tell me if there's something wrong.
Community feedback
- @danielmrz-devPosted 9 months ago
Hello @SFN98!
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<h2>
.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@SFN98Posted 9 months ago@danielmrz-dev alright, thank you, i'll use them in my next project.
1 - The
- @hassanmoaaPosted 9 months ago
Hello @SFN98 !
Great Job solving the challenge mate *congrats * š
Just some suggestions for improvement.
- 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. This tag change does not impact your project visually and makes your HTML code more semantic, improving SEO optimization as well as the accessibility of your project.
āāāāāā
Heading is defined with <h1> to <h6> tags. It is important to use headings to show the HTML document structure.
<h1> headings should be used for main headings, followed by <h2> headings, then <h3>, and so on up to <h6>Other than that all good!
Marked as helpful0@SFN98Posted 9 months ago@hassanmoaa thanks for your reply, i will follow your recommandation for the next project.
0 - @NikNTPosted 9 months ago
Developers tools are essential. Make the best use of them.
What I also like to do is spin up a local server, that way you can open you website on different devices. This gives the flexibility to check the live view on different screens.
Try it out once, maybe you'll be able to build better responsiveness!
0@NikNTPosted 9 months ago@SFN98
Great! You can reach out to me if you want any help or suggestion with your project! I'll always be happy to help out!
0 - @Orekihotarou-kPosted 9 months ago
hey there @SFN98. I just clicked the link to see the live site, and I noticed that the link is broken. Could you look into that? thanks.
0 - @kirstiAnjaPosted 9 months ago
Your solution looks great! I am using developer tools - Chrome. Also using an extension called Windows resizer and one called Web Developer. But still I am finding it hard to know for sure that this is indeed responsive.
0 - @NorwyxPosted 9 months ago
When developing, use developer tools and keep a constant check of how the project is responding at certain breakpoints. Also, try to always develop mobile-first.
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