@danielmrz-dev
Posted
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!
Marked as helpful
@Ryan-OHanlon
Posted
@danielmrz-dev Thank you for the feedback. I didn't consider that you could use lists as a solution to make the buttons.
Is using lists considered the best practice? Because the peer review I was given to give feedback to used the button tag which I didn't know existed until today.
Also, what would you have to do to make each list item have their own space to look like a button in CSS? I'm not familiar with the attributes you would use.
@danielmrz-dev
Posted
@Ryan-OHanlon
Using lists is indeed considered best practice. But eveything depends on your projects needs. In this case, the tag <a> should be the best choice, considering that the social media "buttons" are in fact links to other pages (anchors, that's why we use <a>). The <button> tag is more appropriate when you need to do an action inside the current page, like opening a menu or submitting a form.
About the button appearance, I don't really understand what you mean, but you can use CSS to make any element look like you need. For this example, you can make the <a> tags look like buttons adding background-color, hover effects and others.
Using the correct tags will not prevent your elements from looking like buttons or any other element, because you can totally change their styles with CSS.
Marked as helpful
