@Stroudy
Posted
Awesome job tackling this challenge! You’re doing amazing, and I wanted to share a couple of suggestions that might help refine your approach…
-
Using a
<main>
tag inside the<body>
of your HTML is a best practice because it clearly identifies the main content of your page. This helps with accessibility and improves how search engines understand your content. -
These
<div>
should really have semantic tags like headings (<h1> to <h6>
) and paragraphs (<p>
) convey structure and meaning to content, improving accessibility, SEO, and readability by helping search engines and screen readers interpret the content.
<div class="image">
<img src="./assets/images/avatar-jessica.jpeg" alt="photo de profile">
</div>
<div class="name">
Jessica Randall
</div>
<div class="locality">
London, United Kingdom
</div>
<div class="job">
"Front-end developer and avid reader."
</div>
- In the
ul
The text should be wrapped with a<a>
so it is accessible with a keyboard using the tab key, Using an<a>
tag for navigation is semantically correct, improves accessibility for screen readers, and ensures consistent behavior across browsers, unlike a<button>
or a<div>
not intended for links.
<ul>
<li> GitHub</li>
<li> Frontend Mentor</li>
<li>LinkedIn</li>
<li>Twitter</li>
<li>Instagram</li>
</ul>
- Using
font-display: swap
in your@font-face
rule improves performance by showing fallback text until the custom font loads, preventing a blank screen (flash of invisible text). The downside is a brief flash when the font switches, but it’s usually better than waiting for text to appear.
You’re doing fantastic! I hope these tips help you as you continue your coding journey. Stay curious and keep experimenting—every challenge is an opportunity to learn. Have fun, and keep coding with confidence! 🌟
Marked as helpful
@Annabelle-Lrn
Posted
@Stroudy thank you for your suggestions.I applied the semantics and keep it in mind for the next challenge.
Bonne fin de journée