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

Created on 4 Apr 2016  ·  3Comments  ·  Source: freeCodeCamp/freeCodeCamp

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"

image

Tagging: @FreeCodeCamp/issue-moderators

help wanted learn

Most helpful comment

Challenge Assessment

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.

All 3 comments

Challenge Assessment

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.

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.

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.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

danielonodje picture danielonodje  ·  3Comments

DaphnisM picture DaphnisM  ·  3Comments

imhuyqn picture imhuyqn  ·  3Comments

vaibsharma picture vaibsharma  ·  3Comments

itsmikewest picture itsmikewest  ·  3Comments