2.8 KiB
2.8 KiB
id | title | challengeType | guideUrl | videoUrl |
---|---|---|---|---|
bad87fee1348bd9aedf08812 | Add Images to Your Website | 0 | https://www.freecodecamp.org/guide/certificates/add-images-to-your-website | https://scrimba.com/p/pVMPUv/c8EbJf2 |
Description
img
element, and point to a specific image's URL using the src
attribute.
An example of this would be:
<img src="https://www.your-image-source.com/your-image.jpg">
Note that img
elements are self-closing.
All img
elements must have an alt
attribute. The text inside an alt
attribute is used for screen readers to improve accessibility and is displayed if the image fails to load.
Note: If the image is purely decorative, using an empty alt
attribute is a best practice.
Ideally the alt
attribute should not contain special characters unless needed.
Let's add an alt
attribute to our img
example above:
<img src="https://www.your-image-source.com/your-image.jpg" alt="Author standing on a beach with two thumbs up.">
Instructions
img
tag, after the main
element.
Now set the src
attribute so that it points to this url:
https://bit.ly/fcc-relaxing-cat
Finally don't forget to give your image an alt
text.
Tests
tests:
- text: Your page should have an image element.
testString: assert($("img").length > 0, 'Your page should have an image element.');
- text: Your image should have a <code>src</code> attribute that points to the kitten image.
testString: assert(new RegExp("\/\/bit.ly\/fcc-relaxing-cat|\/\/s3.amazonaws.com\/freecodecamp\/relaxing-cat.jpg", "gi").test($("img").attr("src")), 'Your image should have a <code>src</code> attribute that points to the kitten image.');
- text: Your image element <strong>must</strong> have an <code>alt</code> attribute.
testString: assert(code.match(/alt\s*?=\s*?(\"|\').*(\"|\')/), 'Your image element <strong>must</strong> have an <code>alt</code> attribute.');
Challenge Seed
<h2>CatPhotoApp</h2>
<main>
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</main>
Solution
// solution required