6 of 7
This lesson is closed. Finish the one before it. Do the practice. Pass the assessment. Then this one opens.
Back to the lesson. Three tries are used. Read this again, then try the code.
You finished. The lesson is open again.
Display at least four social media handles. Represent each handle with an image, as a link.
The clay outline is the part this lesson is about.
Each social handle is a link, and the thing inside the link is a picture. The picture is an img. The link is an a wrapped around the img. Four is the minimum. Facebook, Instagram, X, and LinkedIn are enough. A fifth is fine. Four done properly is the mark.
src is the file name of the picture. The file has to sit next to the page, or in the folder you name. alt is the words that stand in for the picture if it does not load. Write Facebook, not “image not found”. The href is where the link goes. The picture and the link are two different jobs. src is the image file. href is the place it opens.
A picture that is not inside an a is not a link, so it misses the mark even if the icon looks right. A broken src, or a file name with a space that does not match the real file, shows a missing image. Check the names twice.
<h2>Social media</h2>
<div class="social">
<a href="https://facebook.com">
<img src="icons/facebook.svg" alt="Facebook" width="64" height="64">
</a>
<a href="https://instagram.com">
<img src="icons/instagram.svg" alt="Instagram" width="64" height="64">
</a>
<a href="https://x.com">
<img src="icons/x.svg" alt="X" width="64" height="64">
</a>
<a href="https://linkedin.com">
<img src="icons/linkedin.svg" alt="LinkedIn" width="64" height="64">
</a>
</div>.social a {
display: inline-block;
margin: 8px;
padding: 8px;
background: #ffffff;
border: 1px solid #e4d9ce;
}
.social img {
display: block;
width: 64px;
height: 64px;
}<a href="https://facebook.com">The link. href is the place it opens. The picture goes inside, before </a>.<img src="icons/facebook.svg" alt="Facebook">src is the image file, including the folder. alt is the name of the handle, for when the picture cannot be seen.width="64" height="64"The size of the picture. The CSS sets the same size so the four icons match.Four anchorsFacebook, Instagram, X, LinkedIn. Each one is its own a, with its own img. Do not reuse one image file for two handles.This is not your file, and it is not the version to copy. It is here so you can see the difference after the right labels.
<h3>Facebook</h3>
<img src="image 1.png" alt="image not found">A friend put the picture on the page and never wrapped it in a link, so it cannot be opened. alt says “image not found”, which is what you write when you have already lost. The file name also has a space, and the same file was reused for another handle. Put the img inside the a. Set alt to the handle’s name.
The next lesson opens after you practice and pass the assessment.
The picture is on the page, and it is not a link. The alt text admits it failed. Fix Facebook.
The code is right. Start the assessment when you are ready. The lesson stays closed until both answers are right.
The lesson is closed. Pick one answer each, then mark it. A wrong answer tells you why, what to do, and what to remember.