Freecodecamp: CSS HEX/RGB Challenges - Compress and reduce redundancy

[SaintPeter]

A common complaint we get is about the end of the HTML/CSS section. There are 15 different challenges on these two topics - using RGB and HEX values to change the color of fonts.

There is a lot of redundancy here and, honestly, we don't really need to change each color one at a time to get the picture.

I propose that we reduce these be at least a half, maybe a 3rd. Possibly combine the color settings int0 a single challenge? ("Set element 1 to white, element 2 to Red, element 3 to green", etc?)

I'm not sure how much of the RGB stuff should directly repeat the prior Hex stuff. Can we introduce BOTH in the same lesson?

Let's use this thread for disucssion of a possible end-state before we flag it as "Help Wanted"

Tagging: @FreeCodeCamp/issue-moderators

[erictleung]

Challenge Assessment

• Use Hex Code for Specific Colors - I think we should keep this because it introduces hex codes and gives a brief discussion on why hex codes exist and how to use them. To add to this challenge (even though it is quite text heavy already) is to add a table or list of other possible colors with their hex codes. We could also encourage experimentation with other hex codes as the simulated phone changes in real time.
• Use Hex Code to Color Elements White - this can probably be removed.
• Use Hex Code to Color Elements Red - this challenge can also be removed. It is redundant in two ways: it explains hex codes again and changes colors to red, which can be shown in the Use Hex Code for Specific Colors challenge.
• Use Hex Code to Color Elements Green - this challenge can be removed and just added in conjunction with the first challenge on hex codes.
• Use Hex Code to Color Elements Blue - this challenge can be removed and just added in conjunction with the first challenge on hex codes.
• Use Hex Code to Mix Colors - this challenge can be removed and just added in conjunction with the first challenge on hex codes.
• Use Hex Code to Color Elements Gray - remove as well.
• Use Hex Code for Specific Shades of Gray - remove as well.
• Use Abbreviated Hex Code - I think this one should be kept as it introduces a new concept of abbreviated hex codes and would be too much if it were thrown into the introduction challenge.
• Use RGB values to Color Elements - keep challenge because it introduces RGB
• Use RGB to Color Elements White - remove.
• Use RGB to Color Elements Red - remove.
• Use RGB to Color Elements Green - remove.
• Use RGB to Color Elements Blue - remove.
• Use RGB to Mix Colors - possibly keep.

Suggestion

I think you can consolidate 15 challenges into these 5 challenges:

• Use Hex Code for Specific Colors -- The introduction to hex codes.
• Use Hex Code for Mix of Colors -- I mentioned having a table of sample colors for the intro challenge but to keep that challenge as lean as possible, this challenge could be devoted to experimentation of different colors and just have a test of whether they have successfully used a color to color the background.
• Use Abbreviated Hex Code -- The introduction to abbreviated hex codes.
• Use RGB values to Color Elements -- The introduction to RGB values.
• Use RGB values for Mix of Colors -- Use a table similar to the challenge above but with RGB. Maybe even add in another column to compare hex codes and RGB, reinforcing the use of hex codes and RGB.

[SaintPeter]

That sounds just about perfect. I'm sold.

For mixing colors:
It might make sense to have 3 different elements that need to be assigned Red/Green/Blue using Hex/RGB. One test per color, just to check that they're set.

[vv01f]

maybe add one for different kinds of encodings, there might not be hex only on the web and even hex can be 1 to 6 chars long. and that also should be considered for the validation. E.g. #f00 is as red as #ff0000 . So there is a bug in validation now.