Comments (16)
ilenia-magoni
commented on June 15, 2024
2
We can add a quote block or something with a link example, but I am against a screenshot
from freecodecamp.
jeremylt
commented on June 15, 2024
1
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
from freecodecamp.
jeremylt
commented on June 15, 2024
1
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
from freecodecamp.
jdwilkin4
commented on June 15, 2024
1
I think that refactoring should work.
from freecodecamp.
jeremylt
commented on June 15, 2024
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.
from freecodecamp.
hbar1st
commented on June 15, 2024
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.
from freecodecamp.
jeremylt
commented on June 15, 2024
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.
from freecodecamp.
hbar1st
commented on June 15, 2024
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.
from freecodecamp.
jdwilkin4
commented on June 15, 2024
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 🤔
from freecodecamp.
jdwilkin4
commented on June 15, 2024
I have opened this up for help wanted.
from freecodecamp.
tarun9142
commented on June 15, 2024
I think a small screenshot of how the final text should look like will work, there is no need of refactoring.
from freecodecamp.
jeremylt
commented on June 15, 2024
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.
from freecodecamp.
tarun9142
commented on June 15, 2024
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
from freecodecamp.
jeremylt
commented on June 15, 2024
No, we can't update the instructions to include a screenshot of the answer to copy.
from freecodecamp.
tarun9142
commented on June 15, 2024
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.
from freecodecamp.
jeremylt
commented on June 15, 2024
Hmm, I'd be concerned about putting that in a screenshot. That's not super accessible.
from freecodecamp.
Related Issues (20)
- Rename currentWeapon variable to currentWeaponIndex HOT 2
- Replace `hidden-xs` class with an `isMobile` check HOT 2
- Learn Functional Programming by Building a Spreadsheet - Step 74 Accepts Regex That Don't Meet Criteria HOT 3
- JavaScript Algorithms and Data Structures (Beta) - Step 13 HOT 12
- [Certification Projects] Update the instruction to mention that the users need to manually save their code HOT 4
- Update remaining S3 links to new CDN links
- Add a new step 1 to better explain what the pyramid generator is about HOT 9
- Icon in the Help button should be hidden from screen readers
- Teach unreachable code and scope in separate lessons for pyramid project HOT 7
- remove __pyodide now that all the tests use runPython.
- Remove __locals now that all tests access variables directly
- Step 1 of RPS project allows for incorrect answers
- JS Beta Project: build a pyramid generator steps 82 and 83 do not have proper indenting for the if statement
- Add step to teach else if statements in pyramid project HOT 1
- typo in step 4 of js beta review project for building a gradebook app HOT 7
- Typo in Step 43 of Building a Cipher HOT 4
- js beta rpg step 23 - code check doesn't accept shorthand margin specification HOT 1
- Wrap keywords inside backticks in Step 51 of Building a Cipher HOT 1
- 1111
- Contributing guidelines landing page redirects to incorrect link HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from freecodecamp.