CurriculumExpansion icon indicating copy to clipboard operation
CurriculumExpansion copied to clipboard

chore: add Absolute and Relative CSS Units Workshop

Open jdwilkin4 opened this issue 7 months ago • 4 comments

Right now, we teach absolute and relative units throughout the entire RWD cert but never clearly explain the differences between the to or when to use which unit is which situation. A lot of times we tell them, this is a px add it here. Or this is a rem, add it here. And we are seeing the results in their certification projects where they are just using whatever unit and not really understanding what is does or why they should use it in this case.

So in this new cert there will be a short module just for absolute and relate units. We need a short workshop project teaching this.

You don't need to include all of the absolute and relative units in this workshop. Just include a few so they can practice what they just learned in the preceding lecture block which goes into more detail about units.

For context, this project will go before the colored markers ones https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-css-colors-by-building-a-set-of-colored-markers/step-94

So they will know everything taught in the Cafe menu project, and cat photo app projects. In this workshop, only used named colors because they haven't leaned how to work with other color models like rgb, hsl, and hex yet.

One last note, this workshop doesn't need to be as intricate or large as the others ones. A smaller workshop is just fine here.

Acceptance criteria

  • [ ] create a new folder of the project in the frontend-cert/css-projects directory
  • [ ] add your completed project(index.html and styles.css files) in that new folder

jdwilkin4 avatar Jul 04 '24 14:07 jdwilkin4