Design comparison
Solution retrospective
That was really close from the last challenge so i'm not really proud about something particuraly.
What challenges did you encounter, and how did you overcome them?I dont think i encounter a challenge.
What specific areas of your project would you like help with?I just want to know what i did wrong and what i can improve and what is the best practice i didn't use ?
Community feedback
- @danielmrz-devPosted 6 months ago
Hello there!
Congrats on completing the challenge! ā
Your project is looking fantastic!
I'd like to suggest a way to make it even better:
- Using
margin
isn't always the most effective method for centering an element.
Here's a highly efficient approach to position an element at the center of the page both vertically and horizontally:
š Apply this CSS to the body (avoid using
position
ormargins
in order to work correctly):body { min-height: 100vh; display: flex; justify-content: center; align-items: center; }
Also, it's recommended to use semantic HTML elements like
<ul>
and<li>
for creating lists. This ensures that your code is more accessible, maintainable, and semantically meaningful.Here's and example on how you can refactor your code:
After Refactoring
<ul class="list-container"> <li><a href="#">Github</a></li> <li><a href="#">Frontend Mentor</a></li> <li><a href="#">LinkedIn</a></li> ... </ul>
By using
<ul>
and<li>
, you convey the structure of your content more clearly, making it easier for screen readers and search engines to understand. Additionally, it aligns with best practices for HTML semantics.I hope you find this helpful!
Keep up the excellent work!
0 - Using
- @tagutirayanePosted 6 months ago
First of all, you are using sooo many divs, this might not be necessary. For example, this example is cleaner and works just as fine, adjusting css:
<div class="flexbox"> <img src="assets/images/avatar.png" alt=""> <h1>Name</h1> <h2>Location</h2> <p>"Front-end developer and avid reader."</p> <div class="box-links"> <a href="https://github.com/">Github</a> <a href="https://www.frontendmentor.io/">Frontend Mentor</a> <a href="https://www.linkedin.com/">LinkedIn</a> <a href="#Twitter">Twitter</a> <a href="#Instagram">Instagram</a> </div> </div>This would minimize your html and css a lot, try it if you want =)
0
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