Lea Verou
MIT
Check out a free preview of the full Dynamic CSS with Custom Properties (aka CSS Variables) course
The "Colors Exercise" Lesson is part of the full, Dynamic CSS with Custom Properties (aka CSS Variables) course featured in this preview video. Here's what you'd learn in this lesson:
Students are instructed to modify the CSS so that the stronger migraines are more red and lighter ones are more yellow. Migraines without an intensity should be set to blue.
Preview
CloseTranscript from the "Colors Exercise" Lesson
[00:00:00]
>> So there's an exercise here, we have this repeated structure of items. This is a supposed migraine log. Migraine sufferers use applications to track their migraines. And there's an intensity meter on each of those items that allows people to set the intensity of their migraines if they want.
[00:00:22]
So the third item doesn't have an intensity at all, the others do. And this was output by some kind of templating system, which also sets a custom property for the intensity so that we can use it in our CSS. So what we want to do is we want to change the main color of each migraine to be more red for more intense migraines and more yellow for less intense migraines and to be grey or actually blue, let's say blue, something completely unrelated.
[00:00:55]
For migraines I don't have an intensity at all so that it's not confusing.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops