-
-
Notifications
You must be signed in to change notification settings - Fork 36.1k
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
Improvement in Create Reusable CSS with Mixins module #50155
Comments
I would be fine with it being more explicit. Not sure if it is really needed but it wouldn't hurt. As an aside, using vendor prefixing to teach Mixins isn't a bad idea but the challenge just hasn't aged well. New features are now hidden behind feature flags and the standards have moved away from vendor prefixing. The box-shadow example seems very outdated. https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix |
Hey @lasjorg, thanks for sharing the article. After reading the article which you have shared, I can think of the following options:
Let me know what you think about it. |
I wouldn't mind if this was rewritten but everything except parts of the challenge text would need to be changed (the challenge text, the example, the seed code, the requirements, the tests). Motivation for rewriting the challenge:
Suggestion: Give a simple example in the challenge text. The mixin will take a font size and a bottom margin, it will reset all other margins.
Seed code, in plain CSS to help make the challenge less copy-pasty.
Solution/requirements
|
Thanks for the suggestion @lasjorg, I'm happy to work on this issue. I will make a PR for this issue shortly, cheers 💫 ! |
You may want to wait with the PR until we get more consensus. You can start working on it but I can't guarantee that it will be approved if others disagree with the change. |
Thanks for letting me know @lasjorg, if that's the case, then I will wait and see what others think about the suggested change. |
Let's go ahead and open this up, following lasjorg's suggestion above to rewrite the challenge. The entire front-end libraries certification is pretty outdated, and next on our roadmap for a complete overhaul. But this is a pretty low-hanging fruit to hit now. |
Hi there, first of all I just want to thank you for the opportunity. This is my first time contributing and I decided to have a go at this issue and this is my attempt: Link to a branch of my forked repo As per @lasjorg's suggestions, I removed any references to vendor prefixing as they are unnecessary and outdated. In this rewrite, I kept the general structure of the challenge text but modified to suit the new example code. However, I didn't use the As for the task itself, I used @lasjorg's suggestion with some add-ons. Tagging @naomi-lgbt for visibility. Thank you! :) |
Please open a pull request if you'd like your changes reviewed. |
Oh right, I have opened a pull request however, I haven't tested the new code at all. Could someone point me to a guide on how to do that? |
… Mixins module" This reverts commit d1134aa.
Hi, I've opened a new PR because I messed up my commit history and the previous PR got closed. Very sorry for the inconveniences, please let me know if there's anything I need to fix. Thank you! |
Describe the Issue
Currently, the instructions within the Create Reusable CSS with Mixins module happen to be as follows:
Newer CSS features take time before they are fully adopted and ready to use in all browsers. As features are added to browsers, CSS rules using them may need vendor prefixes. Consider
box-shadow
:For the sake of clarity, the above instructions should also explicitly point out which bits within the given code snippet are vendor prefixes, instead of just simply mentioning the word vendor prefixes within the instructions and expecting the users to figure out themselves as in which parts within the given code snippet are vendor prefixes.
Affected Page
https://github.com/freeCodeCamp/freeCodeCamp/blob/main/curriculum/challenges/english/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md
Expected behavior
The instructions within the Create Reusable CSS with Mixins module should be as follows:
Newer CSS features take time before they are fully adopted and ready to use in all browsers. As features are added to browsers, CSS rules using them may need vendor prefixes (
-webkit
,-moz
,-ms
etc ). Consider thebox-shadow
property below:Screenshots
System
Additional context
Would love to get some feedback from other members before I proceed ahead with making a PR for this issue. Thanks !
The text was updated successfully, but these errors were encountered: