Not Proceeding Despite Writing Correctly

[DesperateNoob]

Tell us what’s happening:
As you can see, I’ve inserted the relevant code inside both the style element and the img element, but despite that it keeps telling me that I need to include a class inside the img element. Please note that I’ve tried including the class after the alt attribute as well as before the src (as shown here), and also between the src and alt attributes, to no avail. Please help! I also tried this out on my own by creating my own html file and it works there. Is this a glitch then?

  **Your code so far**

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>

.smaller-image {
  width: 100px;
}

.red-text {
  color: red;
}

h2 {
  font-family: Lobster, monospace;
}

p {
  font-size: 16px;
  font-family: monospace;
}

</style>

<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>

<a href="#"><img class:"smaller-image" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>

<div>
  <p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
</div>

<form action="https://freecatphotoapp.com/submit-cat-photo">
  <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
  <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
  <label><input type="checkbox" name="personality" checked> Loving</label>
  <label><input type="checkbox" name="personality"> Lazy</label>
  <label><input type="checkbox" name="personality"> Energetic</label><br>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>
</main>

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:94.0) Gecko/20100101 Firefox/94.0

Challenge: Size Your Images

Link to the challenge:

freeCodeCamp.org

[JeremyLT]

@DesperateNoob

class:"smaller-image"

This isn’t valid syntax for adding an attribute to an HTML element.

[DesperateNoob]

Could you please elaborate? I’ve written a separate code following this same structure and syntax and it appears to be quite valid there! (Meaning it’s working).

[JeremyLT]

@DesperateNoob

<img alt="A cute orange cat lying on its back.">

This is a valid attribute.

---

@DesperateNoob

<img class:"smaller-image">

This is invalid.

---

There is a very small, on character difference. You can also see the difference in the syntax highlighting coloring, indicating a problem.

When you fix this issue, then you will see the cat image substantially reduce in size.

[DesperateNoob]

How is it invalid if it’s working when I test it out separately but not on this website? What am I doing wrong?

[JeremyLT]

@DesperateNoob

alt=

= good

@DesperateNoob

class:

: bad

The small details matter.

[DesperateNoob]

OHHHHHHHHHHHHH @#$%^&*!
VS Code automatically puts the = so I took it for granted.
Thank you so much, hahahaha.

[JeremyLT]

I’m firmly convinced we all go cross-eyed looking at code eventually.