Compress and reduce redundant Hex/RGB challenges

[erictleung]

Pre-Submission Checklist

• Your pull request targets the staging branch of FreeCodeCamp.
• Branch starts with either fix/, feature/, or translate/ (e.g. fix/signin-issue)
• You have only one commit (if not, squash them into one commit).
• All new and existing tests pass the command npm run test-challenges. Use git commit --amend to amend any fixes.

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Add new translation (feature adding new translations)

Checklist:

• Tested changes locally.
• Closes currently open issue (Closes #XXXX): Closes CSS HEX/RGB Challenges - Compress and reduce redundancy #7889

Description

Currently, the HTML challenges involving learning Hex codes and RGB were really long and redundant. I reduced the currently 15 challenges down to 5 challenges that I hope will still teach the same material. Feedback is welcome.

/cc: @SaintPeter

[SaintPeter]

I went through this and it looks really great. It could totally be merged now and we'd be good, but I had a couple thoughts as I went through:

1. It might make sense to mix up the order of the colors in the table in the instructions, just so it's not so obviously 1:1 with the order that they go into the challenges.
2. It wouldn't hurt to mix up the colors a bit to go with some non-primaries. Dunno if that would be more confusing than useful, though.

[erictleung]

@SaintPeter thanks for the feedback.

1. Can do.
2. Yeah, I felt that I could have varied the colors a bit. I think keeping (most of) the primary RGB colors would be good to illustrate the breakdown of the each color system (Hex and RGB) but adding more colors than that might be too tedious. So maybe have a total of four colors, two for a random subset of the primary colors and two other more mixed colors which change. I'll try some different things and see what fits.

I'll make updates and push them when I get the time.

[camperbot]

@erictleung updated the pull request.

[camperbot]

@erictleung updated the pull request.

[erictleung]

@SaintPeter whenever you get a chance, can you take a look at this? I made the updates we talked about and used some different colors rather than all primary colors.

[SaintPeter]

Perfect! Looks great.