Social links profile using flexbox with the use of semantic elements
Design comparison
Solution retrospective
-
My have become faster in writing, and solve incoming problems with more ease.
-
I have continued to use plain notepad for writing. Not using helps of IDEs and more advanced text editors have made me to recall syntaxes more easily.
-
I took my time and planned my project and its layout before starting to write the code, it helped me to navigate through different phases of the projects more easily.
-
I used several new features in this projects including semantic elements, css custom properties, flexbox, applying borderbox to all elements, combination of attribute selector and asterisk wildcard.
-
I used rem length unit in almost every length parameter. It made setting length and sizes easier.
I 'll use SCSS in my next project.
What challenges did you encounter, and how did you overcome them?Web responsiveness is still a challenge.
I used the following code for the main container, and solved the issue
width: 23.75rem;
max-width: 87.2vw;
What specific areas of your project would you like help with?I'd like to know how others solve the web responsiveness issues
Community feedback
- @danielmrz-devPosted 5 months ago
Hey there!
Congrats on finishing the challenge! ā
Your solution looks awesome!
š It's a good idea to use semantic HTML elements like
<ul>and<li>for lists. This makes your code more accessible, maintainable, and meaningful.Here's an example of 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>Using
<ul>and<li>makes your content structure clearer, which is better for screen readers and search engines. Plus, it follows best practices for HTML.Hope this helps!
Keep up the great work!
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