Design comparison
Solution retrospective
I'd like get more confidence with css, i'm proud to have learned some new things and new waysof styling.
What challenges did you encounter, and how did you overcome them?Particulary in this project I didn't encounter challenges.
What specific areas of your project would you like help with?I'd like improve the css architecture, strucute the styles in a correct way .
Community feedback
- @StroudyPosted 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…
- Good to see you updated the readme!
- 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.
<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>
-
Setting
font-size: 62.5%
can affect accessibility by reducing the default browser font size, potentially making text harder to read for users with visual impairments. This does make it easier to work out the relative units but at what cost? -
Using a full modern CSS reset is beneficial because it removes default browser styling, creating a consistent starting point for your design across all browsers. It helps avoid unexpected layout issues and makes your styles more predictable, ensuring a uniform appearance on different devices and platforms, check out this site for a Full modern reset
-
For future project, You could download and host your own fonts using
@font-face
improves website performance by reducing external requests, provides more control over font usage, ensures consistency across browsers, enhances offline availability, and avoids potential issues if third-party font services become unavailable. Place to get .woff2 fonts
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 helpful1@EdgarAleGPosted 2 months ago@Stroudy Thanks for your advices, they're gonna improve my coding skills. I really appreciate them :) The font size is for better conversion between units.
1 - @ardaacikgozPosted 2 months ago
It is great you using buttons rather than just making background color gray. And it is also great you used different page for styling CSS. I have learned from your code.
1
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