Refactor step 12 of HTML cat photo app project

[jdwilkin4]

Describe the Issue

We are still getting a ton of questions about how to do step 12 of the cat photo app project.
https://forum.freecodecamp.org/search?q=step%2012%20cat%20photo%20app%20%23html-css

So I am not entirely sure how to best update this.
Maybe there needs to be a different code example?
Maybe the hints need to be updated?

Maybe something else?

There are too many people lost on this step so I should be updated to make it clearer on what needs to be done.
So I am opening this up for discussion

Affected Page

https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-12

Your code

see explanation above

Expected behavior

see explanation above

Screenshots

No response

System

• Device: [e.g. iPhone 6, Laptop]
• OS: [e.g. iOS 14, Windows 10, Ubuntu 20.04]
• Browser: [e.g. Chrome, Safari]
• Version: [e.g. 22]

Additional context

No response

[jeremylt]

I'm really not sure at this point, but I've been wondering too. On one hand, the first step anywhere that asks for composition of knowledge instead of copy-paste with minor modification will be hard for users. On the other hand, the example at this point is pretty darn close to copy-paste with minor modification. I really am out of ideas of what to do here.

[hbar1st]

if I may chime in on this one (I have chimed in before on this step).
I'd like to see:
a step betw. steps 11 and 12 to ask for a 2nd link directly below the one created in step 11.
This will help them practice anchor tags by typing in what the line of code for the prior link did but with new words and targets

then, a step to create a paragraph element with some words (They should recall how to do this)

and then one more step to make them move the paragraph opening tag so it surrounds the links and the text

and then step 12.

I guess I'm suggesting that we need more breakdown and revision for "nesting" and "links" and then combining them through edits and through a brand new composition as per step 12.

[jeremylt]

I'm not sure if that helps or not? Note: I have noticed that users get a little annoyed when we ask them to create something and immediately delete it, so if we are going to make them create more paragraphs and links, maybe make it text that sticks around?

I think no matter what we do, we're doing to hit a lot of questions the very first time we ask users to combine two pieces of information since a lot of the early steps are pretty close to copy-paste of the examples. I don't know how much giving them more small examples does a lot to get them over that hurdle.

[hbar1st]

hi Jeremy, I think I didn't suggest that we ask them to remove anything. Rather to add more code and 'move' code.
I've expressed this suggestion before in the past. I hope there is more openness to try new suggestions at this point.

[jeremylt]

Sure, and I'm participating in the discussion with my view of potential issues we may encounter when making a new round of changes to this Step

[jdwilkin4]

So I looked at the legacy lesson of this here
https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph

and it looks like it uses a similar example but then it breaks it down further on how it works.

so we could try that?

I tried looking through the forum and it looks like the legacy challenge got a lot of responses too.
So maybe this is just one of those things that will be confusing to beginners at first.

But maybe a walkthrough of the example like the legacy content did might help 🤔

[jeremylt]

Hmm, larger explanations sorta fights the design of the smaller steps, right?

Maybe we rearrange things so they build the link into a paragraph in parts starting with the link instead of the paragraph.

Step 4) Change text to be "Everyone loves cute cats online!"

Step 11) Change anchor text to "cat photos"

Step 12) new Add the words "See more " before the anchor element and " in our gallery" after the anchor element

Step 13) new Add p tags to turn that into a paragraph

Step 14) new Turn the text "cute cats" into another link to a different picture like the current Step 12

Step 15) Continue with the current Step 14 (Don't need Step 13 anymore where we delete an old anchor)

Final code before proceeding to Step 14:

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->
      <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cute-cat.jpg">cute cats</a> online!</p>
      <p>See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
    </main>
  </body>
</html>

If we want to keep a step about deleting stuff, we can delete that comment after we have added the links

[jdwilkin4]

I think that refactoring should work.

[jdwilkin4]

I have opened this up for help wanted.

[tarun9142]

I think a small screenshot of how the final text should look like will work, there is no need of refactoring.

[jeremylt]

I don't think we should provide a screenshot of the answer. We already have an example there for users to look at and it's not quite enough.

[tarun9142]

the problem is that the users have problem with what they have to do, with a screenshot they would know how the final result should look like and with the help of code example they would know how to do that, So i think a screenshot will be helpful

[jeremylt]

No, we can't update the instructions to include a screenshot of the answer to copy.

[tarun9142]

i am not asking to provide an answer to copy. We can provide a screenshot like this

or we can provide a screenshot of whole page.

[jeremylt]

Hmm, I'd be concerned about putting that in a screenshot. That's not super accessible.

[ilenia-magoni]

We can add a quote block or something with a link example, but I am against a screenshot

[pyukey]

I have a thought, although it involves a slight restructuring as to how the course is presented. The main reason I think people struggle on this step is that everything up to this point has been presented as you make the HTML tag and then place contents in that tag, but here is the first time you ask them to make the content first and then place it inside a tag.
Presenting this content-first mindset at the start of the course might help.
Very simply, we could have it as
Step 1: HTML content is what we wish to display on the website. Cat photos
Step 2: We place that content inside of tags to give it specific attributes. <u> Cat photos </u>
Step 3: We can repeat this process by nesting tags <h1> <u> Cat photos </u> </h1>
Step 4: Tags can be given attributes to specify more details idk how to build on step 3

Now, if they have the text cat photos, and they know the tag <a>, they should be able to see that you place the content inside the tag.