Jessica's Social Media Links - Connect with her :-)
Design comparison
Solution retrospective
In the project, no hover color has been specified, so you will notice that I have set the hover background-color to white and the text color to black, while keeping the active color as green as per the requirements.
Getting the scale of the component right was a bit difficult. I hope it's not far off from the original design in terms of scale.
Community feedback
- @TorCanHackPosted 9 months ago
Hi, Khulekani Gcaba.
Congratulations on completing the Social Links Profile Challenge! ππ½ π
I have a suggestion for you, if you don't mind. I noticed in your HTML that you used two header tags:
h2
andh5
.It's important when using header tags to start with
h1
and then proceed in descending order of priority. In your current code, you didn't start withh1
but instead went straight toh2
, and then jumped toh5
. I understand that you may have chosen these tags based on their sizes β we've all made that mistake at some point.Moving forward, it's better to start with the
<h1>
tag for your most important text, and then progress downwards like a flight of stairs.This principle ensures that your webpage is well-structured and accessible to everyone, including those who use screen readers. These also ensures you website is propely optimised for search engines.
It is interesting if you can check out more information on why the proper usage of header tags are important for web development, I recommend reading the following article
Great work!
I hope you find this suggestion helpful.
Happy coding! π₯
Marked as helpful0@Khulekani1211Posted 9 months ago@TorCanHack, Thank you for the feedback. I didn't know that having header tags follow from h1 onwards helps with accessibility and SEO. I will keep this in mind moving forward.
0 - @danielmrz-devPosted 9 months ago
Hello @Khulekani1211!
Your solution looks great!
I have a couple of suggestions (about semantic HTML) for improvement:
π First: Use
<main>
to wrap the main content instead of<div>
.Tags like
<div>
and<span>
are typical examples of non-semantic HTML elements. They serve only as content holders but give no indication as to what type of content they contain or what role that content plays on the page.π Second: Don't skip heading levels - start with
<h1>
, then use<h2>
, and so on.Unlike what most people think, it's not just about the size and weight of the text.
- The
<h1>
to<h6>
tags are used to define HTML headings. <h1>
defines the most important heading.<h6>
defines the least important heading.- Only use one
<h1>
per page - this should represent the main heading/title for the whole page.
All these tag changes may have little or any visual impact but they make your HTML code more semantic and improve SEO optimization as well as the accessibility of your project.
I hope it helps!
Other than that, great job!
Marked as helpful0@Khulekani1211Posted 9 months ago@danielmrz-dev, Thank you for the feedback. I always thought the heading tags were used to size a heading, so I just use which ever heading tag that has the font size I want. Moving forward I will follow best practice and start with <h1> when using header tags.
0 - The
- @Ezekiel225Posted 9 months ago
Hello there π @Khulekani1211.
Good job on completing the challenge !
Your project looks really good!
I have a suggestion about your code that might interest you.
There is an very useful browser extension called Perfect Pixel that allow you compare with the design image and thus see the exact dimensions. I recommend it to you.
Use <main> to wrap the main content instead of <div>. π Tags like <div> and <span> are typical examples of non-semantic HTML elements. They serve only as content holders but give no indication as to what type of content they contain or what role that content plays on the page. This tag change does not impact your project visually and makes your HTML code more semantic, improving SEO optimization as well as the accessibility of your project.
I hope this suggestion is useful for future projects.
Other than that, great job!
Happy coding.
Marked as helpful0@Khulekani1211Posted 9 months agoHi @Ezekiel225, Thank you for the feedback. I'll be using the browser extension Perfect Pixel moving forward. I struggled with properly scaling the design in this challenge. Thanks for explaining the difference between the <main> and <div> tags. I always treated <div> as achieving the same thing as <main> or <section>.
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