Design comparison
Solution retrospective
For personal reasons my Web Development journey has been on hold for a while. I was great to come back into a simple project like this.
What challenges did you encounter, and how did you overcome them?I'd recently started to really dive into grid just before my learning hiatus and was starting to do well. I wish I'd started here with Grid rather than trying to keep it "simple" with margins all over the place. Lesson learned.
What specific areas of your project would you like help with?None but feedback is welcome.
Community feedback
- @alberto-rjPosted 8 months ago
Hi, @mikehwebdev! Congratulations on investing your time and leveling up with the challenge, Social links profile.
I have some code suggestions about your HTML code in the file
index.html
that can help you improve your solution to this challenge.HTML
Specify the description of the page
Meta descriptions may be included in search results to concisely summarize page content. Learn more
Avoid use images not appropriately-sized
Line 15: Images that are appropriately-sized to save cellular data can improve the load time of the page. Learn more here.
Convert the profile picture to next-gen formats, such as WebP or AVIF because those formats often provide better compression than PNG or JPEG. Learn more here. You can solve this problem here.
Dont' use buttons where you should use links
Line 19 to 23: It's better to use links instead of buttons here. While a link generally serves to redirect the user to a new page, a button performs an action that occurs on the page. Learn more here.
👎 Don't
<button class="btn git">GitHub</button> <button class="btn fem">Frontend Mentor</button> <button class="btn link">LinkedIn</button> <button class="btn twi">Twitter</button> <button class="btn inst">Instagram</button>
👍 Do
<ul> <li> <a class="class="btn git"" href="#">GitHub</a> </li> <li> <a class="btn fem" href="#">Frontend Mentor</a> </li> <li> <a class="btn link" href="#">LinkedIn</a> </li> <li> <a class="btn twi" href="#">Twitter</a> </li> <li> <a class="btn inst" href="#">Instagram</a> </li> </ul>
Keep learning, coding and sharing! 🌟
Happy coding! 🚀
Marked as helpful0@mikehwebdevPosted 8 months agoThanks @alberto-rj. I'll adjust my project a bit here and take your advice on board for future projects too 👍
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