@Carson-Haskell
Posted
Amazing job, Josiane! That looks amazing. I have a few comments (since I am encouraged to give feedback :) )
- To better match the design, your profile picture should be a bit larger. I think it's supposed to be 58px x 58px or something like that. When doing the side-by-side, you can tell it's definitely smaller!
- On the hover state of your links, the text color is supposed to change to black. It's really hard to read the white text against the green background!
- I think your solution of using an unordered list totally works, but it would be easier and more semantic if you used a <nav> tag and then nested <a> tags for your links. For example:
<nav>
<a href="/linktoyoursite.com" alt="link to ____ site">Website</a>
<a href="/anotherlinktoanothersite.com" alt="same thing">Another Website</a>
</nav>
It is common convention to use <a> (link) tags for anything that takes you somewhere else (i.e., to another website). It also makes styling easier, you just have to set text-decoration: none
to get rid of the underline!
- Finally, regarding accessibility, when you tab through the social links, you should use the focus pseudo-selector to style it and make it clearer which link you are currently on. For example:
.social-link:focus {
background-color: // whatever color
}
Marked as helpful
@josifermaodev
Posted
@Carson-Haskell Thank you very much, your explanation was very good!
@Carson-Haskell
Posted
Happy to hear that! Keep up the amazing work :) @josifermaodev