@Stroudy
Posted
Hello again, Fantastic effort on this! You’re really nailing it. Just a few things I noticed that could make it even better…
- I would put these into a
<ul> <li>
, and 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.
<section class="details">
<h1 class="name">Sam Blewitt</h1>
<h2 class="location">London, United Kingdom</h2>
</section>
<p class="desc">"Front-end developer and avid reader."</p>
<section class="links">
<a href="http://github.com/wotanut" class="link">GitHub</a
><a href="http://linkedin.com/in/sam-blewitt" class="link">LinkedIn</a
><a href="http://frontendmentor.io/profile/wotanut" class="link"
>Frontend Mentor</a
><a href="http://sambot.dev" class="link">Website</a
><a
href="http://dotfyle.com/wotanut/dotfiles-config.nvim"
class="link"
>Dotfyle</a
>
</section>
-
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. -
I think you can benefit from using a naming convention like BEM (Block, Element, Modifier) is beneficial because it makes your CSS more organized, readable, and easier to maintain. BEM helps you clearly understand the purpose of each class, avoid naming conflicts, and create reusable components, leading to a more scalable codebase. For more details BEM,
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! 🌟