fix(challenges): changed description in basic css lesson

mul53 commented 5 years ago

Description

Changed the text from HTML to CSS in basic-css.json

Pre-Submission Checklist

[x] Your pull request targets the dev branch.
[x] Branch starts with either fix/, feature/, or translate/ (e.g. fix/challenge-tests)
[x] All new and existing tests pass the command npm test.
[x] Use npm run commit to generate a conventional commit message. Learn more here: https://conventionalcommits.org/#why-use-conventional-commits
[x] The changes were done locally on your machine and NOT GitHub web interface. If they were done on the web interface you have ensured that you are creating conventional commit messages.

Checklist:

[x] Tested changes locally.
[x] Addressed currently open issue

Closes #314

mul53 commented 5 years ago

When i made the commit to my branch, prettier formatted the file causing many changes. Was there an error?

mul53 commented 5 years ago

Sorry accidentally closed the pr

scissorsneedfoodtoo commented 5 years ago

@mul53, thank you for taking the time to improve this challenge. Did some reading about :root, and while I agree that the description could use some work, I'm not sure if the analogy works here. I'm not sure it's accurate to describe the :root as a container, and that it would be better to expand more on how :root works when defining global CSS variables.

Maybe we could replace that paragraph with something like the following:

<code>:root</code> is a <dfn>pseudo-class</dfn> selector that matches the root element of the document, usually the <code><html></code> element. By creating your variables in <code>:root</code>, they will be available globally and can be accessed from any other selector later in the style sheet.

This is just a suggestion, though. Let me know what you think and if you have any other ideas! Also, @randelldawson, what do you think? I saw your comment in #314 and thought you might be able to help improve this description.

RandellDawson commented 5 years ago

This is just a suggestion, though. Let me know what you think and if you have any other ideas! Also, @randelldawson, what do you think? I saw your comment in #314 and thought you might be able to help improve this description.

@scissorsneedfoodtoo I think your latest suggestion looks good. I am fine with it.

mul53 commented 5 years ago

That's a good description, it defines the :root selector well. I will add the description to the file. Is that fine @scissorsneedfoodtoo ?

scissorsneedfoodtoo commented 5 years ago

@mul53, so sorry for the late response. Yes, please go ahead and update the description in the file when you can!

After updating the file, you can add it just like before with git add challenges/01-responsive-web-design/basic-css.json. Then, use git commit --amend, edit the commit message to mention you added a description rather than fix a typo, and exit out of the editor. That way your PR will have just one commit message rather than two. Finally, force push to your branch with git push -f origin fix/lesson-basic-css and we'll see the changes reflected here.

Let us know if there's anything we can help with!

mul53 commented 5 years ago

@scissorsneedfoodtoo, i have made the changes and changed the description for the pr and the issue.

scissorsneedfoodtoo commented 5 years ago

Sorry @mul53, but I'm not seeing the changes in your latest commit.

Also, I realize that I might not have been clear in my last comments where the description of :root should go within the challenge description. Here's what I'm thinking:

"description": [
        "When you create a variable, it becomes available for you to use inside the element in which you create it. It also becomes available within any elements nested within it. This effect is known as <dfn>cascading</dfn>.",
        "Because of cascading, CSS variables are often defined in the <dfn>:root</dfn> element.",
        "<code>:root</code> is a <dfn>pseudo-class</dfn> selector that matches the root element of the document, usually the <code><html></code> element. By creating your variables in <code>:root</code>, they will be available globally and can be accessed from any other selector later in the style sheet.",
        "<hr>",
        "Define a variable named <code>--penguin-belly</code> in the <code>:root</code> selector and give it the value of <code>pink</code>. You can then see how the value will cascade down to change the value to pink, anywhere that variable is used."
      ],

Sorry for the trouble, but would you mind trying to update the challenge description again? You can copy and paste the description array above into your editor and follow the steps above. Please let us know if you have any problems!

mul53 commented 5 years ago

@scissorsneedfoodtoo it's alright, i wanna help. I have made the changes, its on line 5317.

scissorsneedfoodtoo commented 5 years ago

:sparkles: :sparkles: :sparkles: Awesome! Congratulations on your first contribution to freeCodeCamp! :sparkles: :sparkles: :sparkles:

Thank you for submitting a PR for this issue, @mul53, and for taking the time to go back and make changes. We're all really looking forward to your next contribution!

Also, thank you for helping us with the new challenge description, @randelldawson.

freeCodeCamp / curriculum