Please how do I size my image using smaller image with it'width 100px

Tell us what’s happening:
Describe your issue in detail here.

  **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;
}

.smaller-image {
  width: 100px;
}
</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 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 (Linux; Android 11; TECNO KF6i) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.101 Mobile Safari/537.36

Challenge: Size Your Images

Link to the challenge:

Hihi!

I see you’re using the legacy version of the course, I got really confused when I opened it haha

For this one, you to place the CSS it’s giving you: .smaller_image {width: 100px;} in those style tags, and then add the class to your img tag: <img class="smaller_image" src="....

Does that make sense?


You’re pretty early in, it might not be a bad idea to give the new version a shot, it has a lot of really good additions to it and the first lession is the same :0

yeah, i was about to say that as well but bellhuffs got here first!! :grinning:

but, you need to create a “class” definition within tag with a width property of 100px and use it in your “img” tag

1 Like

im going to be honest I entirely forgot it used to be inline CSS on the first lesson haha

well, not much of a difference except separation of concerns!!

true! I’m doing a website for personal use/portfolio stuff as i work through the course and I started with inline even though i knew how to not do that because it was just quicker than dealing with pushing multiple files to the server over and over lmao

you’ll see that you would need it (separation of concern) at some point of your fcc journey and professional life, until then “inline” it as you’d like or want :grinning: