Freecodecamp: "Size Your Images" challenge missing critical instruction

[zeyergit]

Hi.
I could not find instructions on how to add the "smaller-image" class to an image link.
I understood the challenge but there is no actual example of how to add that to In the end I asked someone in the chatroom and got the following: https://bit.ly/fcc-relaxing-cat" but I never would have known to put "class" next to "img" and move "src" on its own.

Challenge Size your Images has an issue.
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_1) AppleWebKit/602.2.14 (KHTML, like Gecko) Version/10.0.1 Safari/602.2.14.
Please describe how to reproduce this issue, and include links to screenshots if possible.

My code:

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

  h2 {
    font-family: Lobster, Monospace;
  }

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

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

**<img class="smaller-image" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">**

<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>

[OFFLlNE]

@zeyergit Thank you for reporting this issue.

I see MANY people come everyday with the same problem, that they do not know that they need to apply that created class to their image element.
If people would analyze what test is failing they should see that you need to use that class on image
Your img element should have the class smaller-image.

But I would agree, that extra line in the instructions to say: you need to apply created class to your existing image element would help out a little bit.

[zeyergit]

Hi Lauri,
I don’t think the issue is just telling people that the “img element” should have “class smaller-image”
The issue is that people don’t know HOW to break up the traditional “img src…” tag and modify it to accommodate the class.
They need to see an example. There’s no other way of knowing how to do this.

From: Lauri Välja <[email protected][e-mail]>
Reply-To: freeCodeCamp/freeCodeCamp <[email protected][e-mail]>
Date: Thursday, January 26, 2017 at 1:51 PM
To: freeCodeCamp/freeCodeCamp <[email protected][e-mail]>
Cc: Ira Josephs <[email protected][e-mail]>, Mention <[email protected][e-mail]>
Subject: Re: [freeCodeCamp/freeCodeCamp] "Size Your Images" challenge missing critical instruction (#12874)

@zeyergithttps://github.com/zeyergit Thank you for reporting this issue.

I see MANY people come everyday with the same problem, that they do not know that they need to apply that created class to their image element.
If people would analyze what test is failing they should see that you need to use that class on image
Your img element should have the class smaller-image.

But I would agree, that extra line in the instructions to say: you need to apply created class to your existing image element would help out a little bit.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHubhttps://github.com/freeCodeCamp/freeCodeCamp/issues/12874#issuecomment-275370687, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AYCdlGjG_z7Os44ivAFH7XysQl_soR9hks5rWIjAgaJpZM4LuhZL.

[ajain17]

I don't think we should add "you need to apply created class to your existing image element". That coupled with existing instructions is like handing over the solution directly. We may changeYour img element should have the class smaller-image. to The img element should have.. because your makes it seem like you should be creating one. Another change I'd suggest is to change Create a class called smaller-image to Add a class called smaller-image to the image tag.

What do others suggest? I can work on this if needed.

[zeyergit]

Hi. I’m new to FCC and don’t want to overthink this but I just want to make sure I’m being clear.
What I’m saying is that I did not know how to break up an img ref and add this other element.

In my opinion, the simplest way to make sure students know how to do this would be to show an example in the left margin just like you do for so many other things.

Really enjoying this program.
Thank you.

From: Ayushi Jain <[email protected][e-mail]>
Reply-To: freeCodeCamp/freeCodeCamp <[email protected][e-mail]>
Date: Thursday, January 26, 2017 at 6:18 PM
To: freeCodeCamp/freeCodeCamp <[email protected][e-mail]>
Cc: Ira Josephs <[email protected][e-mail]>, Mention <[email protected][e-mail]>
Subject: Re: [freeCodeCamp/freeCodeCamp] "Size Your Images" challenge missing critical instruction (#12874)

I don't think we should add "you need to apply created class to your existing image element". That coupled with existing instructions is like handing over the solution directly. We may changeYour img element should have the class smaller-image. to The img element should have.. because your makes it seem like you should be creating one. Another change I'd suggest is to change Create a class called smaller-image to Add a class called smaller-image to the image tag.

What do others suggest? I can work on this if needed.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHubhttps://github.com/freeCodeCamp/freeCodeCamp/issues/12874#issuecomment-275431535, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AYCdlAW0aK3HHm4c1C0DxGVcHuqLDbaBks5rWMdNgaJpZM4LuhZL.

[linuxchick]

I've just completed this challenge. Although I had no issue I agree with @ajain17 for those that do.
You wouldn't want to just give the answer away but maybe make it more clear on what you are supposed to be doing.

[NealSavage]

Yeah, I agree with the person. I could tell that I needed to get the class in, but was confused because I already had the SRC in there. I managed to get it, but only after spending 15 minutes trying various ways and then finally finding this thread and implementing what they did. It should really tell us how to break it apart so that I can have both an SRC and a class because I had no clue.