Design comparison
Solution retrospective
I use the colors correct. I use the style guide and not figma file. I liked the result of the button and too use GitHub correct.
What challenges did you encounter, and how did you overcome them?I found challenges in using button effects. It was using stackoverflow and w3schools that I resolved the issues. This time I was also more assertive in using GitHub and Vercel.
What specific areas of your project would you like help with?I would like to use GitHub better when it comes to the following. When committing I want to return to the previous version. I didn't find specific help on this.
Community feedback
- @StroudyPosted about 2 months ago
Amazing job with this! You’re making fantastic progress. Here are some small tweaks that might take your solution to the next level…
- 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.
<article> <h2>London, United Kingdom</h2> <p>"Fron-end developer and avid reader."</p> <button value="Github">Github</button> <button value="FrontEndMentor">Frontend Mentor</button> <button value="Github">Linkedin</button> <button value="Github">Twitter</button> <button value="Github">Instagram</button> </article>
-
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. -
While
px
is useful for precise, fixed sizing, such asborder-width
,border-radius
,inline-padding
, and<img>
sizes, it has limitations. Pixels don't scale well with user settings or adapt to different devices, which can negatively impact accessibility and responsiveness. For example, usingpx
for font sizes can make text harder to read on some screens, Check this article why font-size must NEVER be in pixels. In contrast, relative units likerem
andem
adjust based on the user’s preferences and device settings, making your design more flexible and accessible. Usepx
where exact sizing is needed, but prefer relative units for scalable layouts. If you want a deeper explanation watch this video by Kevin Powell CSS em and rem explained. Another great resource I found useful is this px to rem converter based on the default font-size of 16 pixel. -
Using
max-width: 100%
ormin-width: 100%
is more responsive than justwidth: 100%
because they allow elements to adjust better to different screen sizes. To learn more, check out this article: responsive-meaning.
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! 🌟
0 - I would put these into a
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