Loading
Flexible Ribbon Banner with Tailwind CSS Tutorial (10 exercises)
exercise

Meaningful Value Extraction

We've worked out the exact width that our ribbon banner should have. We wrote an arbitrary value for that. Now, we know why we're using this value, but if someone else was to jump into this code base, that value, honestly, would feel magic.

For that reason, the next exercise that you will work on is to abstract away this magic value into a w-square-diagonal utility class, which will let its name convey the intent of the class.

Loading exercise

Transcript

0:00 We've worked out the exact width that our ribbon banner should have. We wrote an arbitrary value for that. Now, we know why we're using this value, but if someone else was to jump into this code base, that value, honestly, would feel magic.

0:13 For that reason, the next thing we're going to do is abstract away this magic value into a w-square-diagonal utility class, which will let its name convey the intent of the class.