Design comparison
Solution retrospective
This challenge took me a approximately an hour or two to complete in between working my day job.. The previous one took several days due to life and work. I was proud just being able to finish it rather quickly. I was definitely more organized in my approach to the project.
I definitely want to do this faster than last time if possible.
What challenges did you encounter, and how did you overcome them?I had a problem with the social media links box/button sizes. They were all in different sizes. I googled and youtube the problem and saw that if I set the width of the parent and then set the width of the child using percentage. They would all consistently be the same size.
What specific areas of your project would you like help with?Please let me know if I did width for the social media links correctly. If there is a better way, I would love to know and anything in general that I can approve on. I'm happy to hear it!
Community feedback
- @Alex-Archer-IPosted 4 months ago
Hi!
The main thing that you can improve in the semantic. Those elements are links, so there is special tag for them -
a
withhref
attribute.Than there is special tags for every kind of lists -
ul
andol
("unordered list" and "ordered list") which should containli
tags ("list item").So, semantically correct layout should be looks like this:
<ul> <li><a href="#">It's a link here!</a></li> ...and more links here </ul>
Also to make your element responsive you shouldn't hardcode width and height. Instead of width you can use
max-width
- it allow element adjust to small screens. As for height - it's better not to specify it at all. Just let the content define the height of the container =)Hope that helps! Good luck and keep doing =)
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