Social links profile page using HTML and CSS
Design comparison
Solution retrospective
In a recent project, I received valuable feedback recommending using rem units instead of px for better scalability, and advising me to import fonts via CSS rather than linking them directly in the HTML, as I had previously done. I am grateful for this guidance and remain open to further suggestions for improvement.
Community feedback
- @StroudyPosted about 2 months ago
Hello again, Fantastic effort on this! You’re really nailing it. Just a few things I noticed that could make it even better…
- 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. - 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.
<div class="links"> <a href="" class="btn">GitHub</a> <a href="" class="btn">Frontend Mentor</a> <a href="" class="btn">LinkedIn</a> <a href="" class="btn">Twitter</a> <a href="" class="btn">Instagram</a> </div>-
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
-
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,
-
For future project, You could download and host your own fonts using
@font-faceimproves 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! 🌟
1@gabrielkyaloPosted about 1 month agoHi @Stroudy, sorry for the late reply. Thank you so much for your feedback! I will put this into place with my next project! Thank you once again it is really motivating!
1 - Using a
- @SvitlanaSuslenkovaPosted about 2 months ago
I see you added flex, but your project didn't align to the center. The problem is you should add to your flex also min-height: 100vh; Currently, the height of the body is the same as the component in it.
1@gabrielkyaloPosted about 1 month agoHi @SvitlanaSuslenkova, sorry for the late reply. Thank you for the feedback! Yes, I had problems with the project not aligning to the centre, definitely adding this next time.
0@gabrielkyaloPosted about 1 month agoHi @SvitlanaSuslenkova, sorry for the late reply. Thank you for the feedback! Yes, I had problems with the project not aligning to the centre, definitely adding this next time.
0
Please log in to post a comment
Log in with GitHub
Join 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