Challenge Specify How Fonts Should Degrade has an issue.
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36
.
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;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<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>
The h2 element:
h2 {
font-family: Lobster, Monospace;
}
Loads by default with the font degrade challenge resolved.
@hugoroger thanks for the issue. The point of the challenge is to see how the font degrades once your code doesn't have access to the font set. You're asked to comment out some code, not add in the degradation of the font.
This is a standard message notifying you that this issue seems to be a request for help. Instead of asking for help here, please click the "help" button on the challenge on Free Code Camp, which will take you to the help chatroom for that specific challenge. You can also view our full list of official chatrooms.
If you think I'm wrong in closing this issue, please reopen it and add further clarification. Thank you, and happy coding!
@hugoroger mmm reading the challenge a little bit more, I think I understand what your issue was. You're saying half of the challenge was "solved" because we've already given you an h2
element that will degrade its font.
cc/ @freeCodeCamp/moderators challenge too "easy"? Should we remove the Monospace
from the h2
CSS rule to allow campers to add it themselves?
@erictleung I am up for updating the challenge a bit. This would need re-wording the challenge as well.
For absolute new comers this could be a tiny bit daunting. However I am fine, if its reworded aptly.
Also, the partially solved problem is because we are running the challenge test on load on the main website, which is not the case on the beta site.
As @erictleung suggested, how about if the h2
tag becomes this:
h2 {
font-family: Lobster;
}
And then re-word the challenge as:
Now comment out your call to Google Fonts, so that the Lobster font isn't available. You'll also have to make sure the heading font gets degraded to Monospace. Some CSS changes will be necessary for this.
Regarding @raisedadead worry about it being too daunting, I noticed there's a complete example (with a p
element) right above the challenge text on making an element "font degrading safe", so if they just follow that example, it shouldn't be difficult to solve it.
Once you decide on how this can be re-worded/altered, do you mind if I pick it up to open a PR? I'd be very interested in getting more experience with altering FCC challenges.
@rarmatei Sounds good to me! A PR would be great!
@erictleung , that's exactly what I meant. :)
Thanks guys!
Coming very late to the party, I must manage my notifs better. Anyways, @Manish-Giri has a opened up #13534
To which I noticed that we have updated the challenge wording, but honestly I think that
Some CSS changes will be necessary for this.
is not addressing it, or clarifying.
I sincerely apologize for the delay in getting back when the PR was opened. May be we shoud just improve the part a bit more.
Manish, if you are at it already, can you check and guide with suggestions? Feel free to continue on the PR thread.
@raisedadead Understood! I'll come up with a few suggestions shortly..
@Manish-Giri Thanks so much for correcting the wording. I recently made a change to the challenge and it got merged really quickly, so I didn't get a chance to hear more people's opinion on it. So appreciate you re-opening the discussion on this.
@raisedadead The reason I went with "Some CSS changes will be necessary for this." is because I thought it was slightly hinting at the solution, but not actually giving it away (which when I first read through the original discussion, I thought at the time that the intention was to make the challenge "more challenging"). But based on the latest PR it seems like a more step-by-step explanation is preferred. Which makes sense.
Most helpful comment
As @erictleung suggested, how about if the
h2
tag becomes this:And then re-word the challenge as:
Regarding @raisedadead worry about it being too daunting, I noticed there's a complete example (with a
p
element) right above the challenge text on making an element "font degrading safe", so if they just follow that example, it shouldn't be difficult to solve it.Once you decide on how this can be re-worded/altered, do you mind if I pick it up to open a PR? I'd be very interested in getting more experience with altering FCC challenges.