-
-
Notifications
You must be signed in to change notification settings - Fork 35.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Refactor step 12 of HTML cat photo app project #54767
Comments
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. |
if I may chime in on this one (I have chimed in before on this step). 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. |
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. |
hi Jeremy, I think I didn't suggest that we ask them to remove anything. Rather to add more code and 'move' code. |
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 |
So I looked at the legacy lesson of this here 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. But maybe a walkthrough of the example like the legacy content did might help 🤔 |
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 |
I think that refactoring should work. |
I have opened this up for help wanted. |
I think a small screenshot of how the final text should look like will work, there is no need of refactoring. |
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. |
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 |
No, we can't update the instructions to include a screenshot of the answer to copy. |
Hmm, I'd be concerned about putting that in a screenshot. That's not super accessible. |
We can add a quote block or something with a link example, but I am against a screenshot |
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. Now, if they have the text |
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
Additional context
No response
The text was updated successfully, but these errors were encountered: