CatPhotoApp Step 6 is still not clear

Describe the Issue

For such a seemingly easy step this one is still a very popular topic in the forums. I think the fact that so many people are still struggling with it is telling us that the instructions are not clear enough. I also think the addition of the example code is confusing too many people into thinking they need to use it in the solution. I know that we now have a test that checks for this and the hint tells them not to use the list elements, but I think it’s better to try to prevent this in the first place instead of trying to correct them after the fact.

If we want to continue using the list as an example then I think we should spell it out very clearly that it is just an example and should not be used in the solution for the step. The previous steps have all had HTML/text in the instructions that the user was expected to use in their solution, so I can definitely see why they would think the same for the example list.

My suggested changes for the sentence before the list example:

“Indenting nested elements two more spaces than their parent element improves readability. Below is an example of what this indenting looks like using HTML list elements.”

And then I think the final sentence should be much more detailed about what the user needs to do.

“Without making any other changes to the current HTML, use the space bar on your keyboard to add two more spaces in front of the h2, comment, and p elements so that these elements are indented and more readable.”

Please feel free to make any adjustments to the above, I’m just getting the ball rolling here. But I think this step has the potential to make people feel silly, or even dumb once they finally get it right and we should avoid that by making it as clear as possible up front.

P.S. I just noticed that the instructions actually have the first element in the last sentence as h1 instead of h2. I’ll open a PR.

Affected Page

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

Your code

N/A

Expected behavior

Suggested changes described above.

Screenshots

No response

System

N/A

Additional context

No response

[bbsmooth]

@jeremylt , I’m basically on board with you. I do think that the word “indentation” is causing trouble for ESL campers and we should define it a little better as @lasjorg recommended above. Perhaps this for the first paragraph:

In the previous step, you nested the h2 element, the comment, and the p element within the main element. Nested elements should be placed two spaces more to the right of their outer element to improve the readability of the HTML. Such a spacing is called an indentation.

Would anyone object if I opened a PR on this with @jeremylt’s latest suggestion and my change here?

[bbsmooth]

I like @ojeytonwilliams and @jdwilkin4 idea of having them indent only one element and having the comment and p already indented correctly and just having them indent the h2 to match. If we did this we could do away with the HTML list example because we would already have an example in the starter code to refer to. This solves the problem of people inserting the list elements in the HTML and allows us to shorten up the instructions even more, which should make everyone happy!