feat: add css variables lab

[Dario-DC]

Checklist:

• [x] I have read freeCodeCamp's contribution guidelines.
• [x] My pull request has a descriptive title (not a vague title like Update index.md)

Closes #403

[moT01]

Looking good @Dario-DC 👍

I think I would just remove all the id's in the table. I'm not sure I see why they're needed - I think the classes alone are enough.

Name suggestion: Availability Table ?

You could add one header at the top so people can give it something unique. Maybe "Meeting Time" or "Training Session"

I don't know if users know linear gradients at this point. If not, you could maybe do HTML elements for the legend instead.

It might be nice to work another variable or two in there somewhere. Maybe with the text color, or margins or something.

User story suggestion: You should have a table with at least 3 columns and 5 rows.

[Dario-DC]

Duplicate ids are an oversight. I had a single column at the beginning and then I forgot to fix it.

I'm going to:

• add a heading
• convert the divs and spans into a table
• change the name into Availability Table
• try to add other variables that are not colors

They should know gradients at this point, the city skyline workshop comes before this lab. But I used linear gradients in a previous lab #400 too. So, if they haven't been taught yet I should change the other lab.

[moT01]

Sorry for the confusion. I meant the name for the project on the main site as "Availability Table". You can keep "Meeting Scheduler" or whatever for the prototype.