This course has been updated! We now recommend you take the CSS Grid & Flexbox for Responsive Layouts, v2 course.
Transcript from the "Flexbox Games and Exercise" Lesson
[00:00:00]
>> Jen Kramer: Now that you have seen Flexbox in action, you get to do one of my favorite things of all time. There are two games that are available out there, believe it or not, some of you may be familiar with these. One is called Flexbox Froggie, the other one is called Flexbox Defense.
[00:00:14] I'll pull these up in a browser tab right now. And what I'd like for you to do is pick a game and to go on ahead and try playing it, and if you have time go on ahead and do both of these. And if you don't have time then do as much as you can on one of these games.
[00:00:33] So let me show you what these games look like, and then I'll put the slide back up so you have the URLs. So Flexbox Froggy looks like this. You have a little froggy. You have a little lily pad here. You're at level one here, and you're gonna write some code to put the froggy here onto the lily pad.
[00:00:59] So they've suggested here that you're going to use, for example in this first one, use the justify content property. Here's some possible values, for example, using justify content flex end will move the frog to the right. So if we said, justify-content, flex-end,
>> Jen Kramer: Our froggie jumps onto the lily pad.
[00:01:21] Isn't that adorable? And if we said something different like, justify-content: center, then our froggie might move but he doesn't make the lily pad, okay. So that's one possible game. The other one is Flexbox Defense.
>> Jen Kramer: [COUGH] And so as this one will tell you, this is working with Flexbox.
[00:01:47] And what's gonna happen is you have little guns and you have the little armies or whatever running down a particular path, and you're gonna try to take them out. Little bit more violent than the little froggies. So same kind of thing here. So here's your guns. You want to position them somewhere on this path such that it's gonna take out the little things that come down the path.
[00:02:13] It's saying, use the justify content property to move these two towers into position. So if I said, for example, justify-content: center, perhaps, and then start the wave.
>> Jen Kramer: So the little things are gonna come down here. The little guns are gonna shoot at them, and hopefully we take them all out before they go by.
[00:02:42] There we go.
>> Jen Kramer: Yay, we win. And then we go on to the next one. All right, so I'd like you to go on ahead and try out one of these two games so that will give you some practice with these properties and values that we just went through.