This course has been updated! We now recommend you take the CSS Grid & Flexbox for Responsive Layouts, v2 course.
Transcript from the "Flexbox and CSS Grid Exercise 1 Setup" Lesson
[00:00:00]
>> Jen Kramer: All right, so here, what you've got is your history page again for the Pie in the Sky Bakery, which we worked on yesterday. And I believe the one that I've given you here is the version with flexbox-based layouts, as I recall, I think. Such a long time ago I wrote this.
[00:00:21] Yes, this is all done with flexbox, so you can see the grid systems written with flexbox. What I'd like for you to do is I'd like you to take this history page and I'd like you to rework it so that it's now laid out using grid instead of being laid out using flexbox.
[00:00:38] And to aid you along that way, I'd like to show you a couple of tools that may be useful to you. And I'm gonna look at the end state file here, which looks exactly the same, more or less. My testimonials might be down a little bit more, but you will wanna do this in Firefox.
[00:01:01] So somebody put it out earlier today, Firefox has done a tremendous job putting in new grid tools inside of its developer tools. So if you were to like right-click anywhere on the background of this website and then go to Inspect Element, this pulls up the browser inspector. I know a lot of people like Chrome's.
[00:01:25] It's the same kinda thing that is available to you here in Firefox. Here's one of the differences. If you're looking at a page that is coded with Grid, and we're looking at an element that happens to be coded with Grid, so let's say I'm looking at this article here.
[00:01:44]
>> Jen Kramer: Go ahead and highlight that article.
>> Jen Kramer: And my rules.
>> Jen Kramer: Here we go. So I've highlighted the content HTML here. Over on the side here, on the Rules tab in the CSS, you'll notice that we have our selectors here followed by what looks like a little grey item.
[00:02:12] And this is a way of highlighting all of these various Grid cells and so forth. So this is available to you, okay, and elements that are like this.
>> Jen Kramer: So those are available to you. The other thing I wanted to show you was something that came across my desk this morning as I was leaving the hotel.
[00:02:37] And this is in the developer tools. What I just showed you is the standard distribution of Firefox. There's also the developer version of Firefox. If you download the developer version of Firefox, this article came across my desk today. And this has got some incredible tools, which I've had zero time to look at, because I just saw it this morning.
[00:03:00] So you are welcome to take a look at this. I will give Mark the URL for this webpage, which is a quick little introduction to Grid that Mozilla put out. And as you see here they're covering more or less the same items that I'm covering here in class.
[00:03:21] Talking about the fr unit, mixing units and so and so forth. And one of the things they cover is the Firefox Devtools. So if you wanted to take a look at this, this has got some information for you here and some nice animated GIFs that would give you a little more information about some of these tools that are available to you in Firefox, as well, all right?
[00:03:42] So I'm gonna give you, what do you say, like half an hour? Is that good for re-working this history page? Tear out all the flexbox code and you're gonna redo it with Grid. There's the instructions. If you wind up with extra time, you're more than welcome to work on some of the other pages.
[00:04:02] Like last night, you might've coded up the homepage or a gallery page. And there's other pages you can code as well. If you look inside of the branding folder, which is outside of the day two folder, it's up there with day one, day two and there's a folder called branding.
[00:04:21] That has got some images in it, some colors, some text, if you wanna code up some more webpages and get a little bit more practice with Grid. So feel free to use area, Grid areas, use the Grid rows and Grid columns that we've done a lot with at this point, use some offsets.
[00:04:37] Give all of that stuff a try