Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

use flexbox to complete my task

@iamkevin-sz

Desktop design screenshot for the Social links profile coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

Next time instead of using the button label I will use the a label, since I had problems when making the buttons

What challenges did you encounter, and how did you overcome them?

The challenge I found was the buttons, I had to change the label of the buttons to "a" labels so that it works better

What specific areas of your project would you like help with?

I would like to know what the difference would be between making buttons with button or the "a" tag

Community feedback

Alex 3,130

@Alex-Archer-I

Posted

Hi!

When you are choosing the right tag, you should always choose based on the semantic, but not the appearance. Those elements here are social links so they should be an a tags, even if they looks like buttons =) Buttons are for interactive elements and form submissions.

I can give you another couple semantic suggestions:

  • As they are list of links it is better to put them inside ul and li elements.
  • Every a tag should have href attribute otherwise browser wouldn't render it as link. For practice project like this you can set href="#".
  • main and footer tags performs different roles on the page, so they should be siblings.

Hope that could help. Keep doing =)

Marked as helpful

1

@iamkevin-sz

Posted

@Alex-Archer-I thank you so much, so in this case it is better to use the ul and li tags instead of the "a" tag

1
Alex 3,130

@Alex-Archer-I

Posted

@iamkevin-sz

Not exactly. You should use a inside the li into ul.

<ul>
    <li><a href="#">It's a link!</a></li>
    <li><a href="#">It's a link!</a></li>
    <li><a href="#">It's a link!</a></li>
    <li><a href="#">It's a link!</a></li>
    <li><a href="#">It's a link!</a></li>
</ul>

You see, every time when you encounter some kind of list of data - it could be the list of notifications, the list of features of some product etc. - you should use ul or ol with li. But inside you still need semantically correct tags.

By the way, the next challenge on this learning path (the recipe page one) is where both types of lists are used =)

0
munizz-g 70

@munizz-g

Posted

O layout em si ficou correto, porem os tamanhos ficaram diferentes.

0

@iamkevin-sz

Posted

@munizz-g Você está certo, eu fiz isso por cálculo.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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