Design comparison
Solution retrospective
Hello fellow developers I have completed another mini project and I am happy about it, I also want to your help on the mobile version of this project, If there's anything I should add to make it responsive for the mobile version. Thank you in advance.
Community feedback
- @danielmrz-devPosted 10 months ago
Hello @yassawambessaw24!
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: Don't skip heading levels - start with
<h1>
, then use<h2>
, and so on.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.
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 -
- @solvmanPosted 10 months ago
Hi @yassawambessaw24 š
Very well done! ššš
I like how you properly use
h2
. Remember, heading levels represent levels of heading subsections, not typographical decoration. It would be best if you did not skip sections;h1
should be followed byh2
and so on. I suggest you replace<h5>
with a paragraph<p>
element and address the appearance using a class. In this project, you could temporarily add a visually invisibleh1
element to avoid breaking hierarchy rules. You may read more about heading hierarchy in HTML - Live Standard - HeadingsVisually hidden class for the
h1
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
I love your use of the semantic HTML
button
element. I suggest you wrap the main content of your HTML with the<main>
, and use<article>
element to wrap your card. Remember,div
elements are non-semantic elements. Strive to use semantic elements where it is possible. It will benefit SEO and the accessibility of your project big time.<body> <main> <h1 class="visually-hidden">Profile card project</h1> <article class="card"> <img src="./assets/images/avatar-jessica.jpeg" alt="avatar" class="card__img" aria-hidden="true" /> <h2 class="card__name">Jessica Randall</h2> <p class="card__location">London, United Kingdom</p> <p class="card__description"> "Front-end developer and avid reader." </p> <div class="socials"> <button class="button">GitHub</button> <button class="button">Frontend Mentor</button> <button class="button">LinkedIn</button> <button class="button">Twitter</button> <button class="button">Instagram</button> </div> </div> </main> </body>
Another minor tweak that adds visual attractiveness to your project is to have a bit slower transition of color on
:hover
; consider addingtransition
to yourbutton
class:button { transition: all 0.5s; }
Otherwise, very well done! š Impressive! š Keep it up! š
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