Custom Properties Exercise

[00:00:00]
>> To practice the concepts we've discussed so far, there is another simple exercise of a customizable bar chart component where we're gonna make a component that looks like this. And most of the style is already there, this is a little bit more code that we've seen in other demos because I expect you to fiddle with it by yourself.

[00:00:21]
You could also open CodePen and you can look at the notes to see what to do. The way we use this bar chart component is through this HTML, like I said, I'm using component in the sort of liberal way. This is not an actual web component, but it is a usable blob of HTML and CSS.

[00:00:39]
And we wanna be able to vary how the component behaves, for example, what the values are by specifying custom properties in the HTML. And then the CSS just displays the bar chart component as it should. And we should also be able to style it without having to know its structure.

[00:01:01]
The best part of this exercise is to fill in the CSS, so it's actually visualizing these percentages. The Flexbox part is already done here. You don't need to use Flexbox. And the second part is to introduce properties to further customize the chart. For example, you could use a bar color property to customize the color of the bars, a bar width property, a bar spacing property to customize the spacing between the bars.

[00:01:31]
Or a band count property to specify how many of these horizontal bands do we have. [BLANK AUDIO].