Add Images to your Website 2018

HTML-CSS
1

Tell us what’s happening:
I keep getting an error that says I need an alt attribute. I check the forums and tried other ways but the image will not load up.

Any idea why alt attribute is not registering for me to move forward?

Your code so far

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
  }
</style>

<img src="https://bit.ly/fcc-relaxing-cat" alt="fcc-relaxing-cat">

<h2 class="red-text">CatPhotoApp</h2>

<p class="red-text">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 class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>

Your browser information:

Your Browser User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:59.0) Gecko/20100101 Firefox/59.0.

Link to the challenge:
https://www.freecodecamp.org/challenges/add-images-to-your-website

2

I think it doesn’t like -s in the alt string. You can create a GitHub Issue to improve the test.

1 Like
3

From the official documentation for HTML:

The alt attribute will accept any text string, but there are certain best practices that will help.

No special characters. This includes UTF-8 characters such as unencoded curly quotes, as well as HTML Character Entities.
No HTML.
No more than 125 characters.
Just identify the picture. No need to refer to it (“This is a picture of…”).

In this case, following the guidelines, your alt text might be “A cat relaxing”.

Remember, the point is that if the image fails to load there’s still descriptive text there. Also there’s a nice description for visually impaired people who can’t see the image but their screen reader will read the img tag out loud for them when their mouse hovers over the image.