Challenge 8: Nudging Classes

[00:00:00]
>> Mike North: Here's what I want to do with iteration. So has anyone seen CSS classes like what we have on the right side here? Little mini, like nudging classes. So we don't have to like, every time we need to move a button down in a nav bar, we don't have to go in and explicitly specify the style there.

[00:00:18]
We can just declaratively say bump this down ten pixels. This is really repetitive CSS to write. So I want us to see if we can build this using lists and loops and potentially maps. The solution I came up with Is less than 15 lines to create what we need to create here.

[00:00:43]
Here is what I want. Both margin and padding in five pixel increments starting at five ending at 25. That means like MT5, MT10, MT15, MT20, MT25. Both for top, left, bottom, right, and then do the same thing for padding.
>> Mike North: Now this would be really, really tedious, except that we can do it in sort of a general way where we use multiplication, and iteration, and lists, and wraps to just build all of these things as loops.

[00:01:19]
Probably loops within loops. So I would advise, if you're not an everyday programmer, start with one loop and just try to get like a set of comments to iterate out just so you can tell that you're going from five to ten to 15 to 20. And then kind of expand on that concept from there.

[00:01:39]
And we will get to the solution in about 25 minutes.