CSS Grids and Flexbox for Responsive Web Design Optional Practice Exercise: Putting it all Together

Transcript from the "Optional Practice Exercise: Putting it all Together" Lesson

[00:00:00]
>> Jen: So the very end of this is we're up to the very last chapter here for the course. And this is chapter eighteen called practice. So I'm just gonna tell you what the practice here was. So, what we've got here is, take a look at the last two days of work that you've done.

[00:00:21] You've done a ton of work on this pie in the sky website. So, what I would ask you to do is to finish building the remaining pages. So you're gonna take your nav bar, you're gonna link all your pages together. Think about the appropriate use of flex box and grid to complete those page layouts.

[00:00:35] What should be grid and where? What should be flex box and where? And then, you could also try cutting a contact form or a pie ordering form. I haven't talked about forms at all in this class but you could think about forms and layout with that. And I have not given you anything in the begin folder for this.

[00:00:57] Because your first job is to think about all of the stuff you have done over the last two days. So if you go back and revisit the end folders from the last two days you can pull out various elements and start to put things together. Now, the people here in the classroom look really tired.

[00:01:11] It's pretty common, come 3 o'clock in the afternoon for people to kinda go, I'm done for the day. We've covered an enormous amount of content in a very short period of time. And so, what I'm gonna do now is show you my answers to this particular problem. So I'll go ahead and display this in a browser and show you what that looks like.

[00:01:35]
>> Jen: So is the same looking kind of homepage. I've recoded it with grid. So you saw this before with flex box and as I start to narrow it down, watch that background image. And you see that I do have it coded to go to a smaller background image in smaller dimensions, okay?

[00:01:55] So that works pretty much the same way. The gallery page you already saw, the history page you already saw. So the new pages that I added, I added a menu page here. So here we have pies by the slice, we have ala mode, we have mini pies, whole pies, specialty pies okay?

[00:02:15] So there's some of that. We have a catering page, so there's the catering page that's just some extra content there. And then the contact I did do a pie ordering form here. So this is some basic contact information here, I am making use HTML 5 form fields. If you are not familiar with those, that's a really great topic for you to look into, because these HTML5 form fields include things like the email field, the phone number field.

[00:02:51] There's a date field that's really badly cross browser compatible, but the phone number and the email are pretty good. And so these are really helpful, particularly on phones. If you're not familiar with those, they will actually, on your phone, they will change the keyboard layout. So for example, if you're doing the phone number field on a form, you'll actually have numbers on your key pad on the phone, so you can like type in a number.

[00:03:16] Instead of calling them all text, in which case you have to flip over to the numbers and then figure out where the numbers are. The email, it may depend on you whether have IOS or whether you have android, the email would give you an @ sign on the full screen.

[00:03:32] A little things like that, that just make entering this kind of information a little bit easier. So, you might wanna look into those might be good opportunity to do that. I'm gonna use of the number field here for your pies. Of course we have some radio button kind of things and special request.

[00:03:48] The form doesn't submit anywhere. It's just your basic form here and obviously that's well beyond the scope of the course. You can hook it up to whatever sort of processing scripts you wanted to do. All right, so let's take a quick peek at what the HTML on all those looks like.

[00:04:06] Notably, let's look at the contact form, so here on the contact form you'll see that I have added here, there's the navigation. So all of my pages link together, then here in my pie ordering form, so we've got my div class of content, we've got my article. And then I've got various field sets that group these bits of content together.

[00:04:31] The field sets are really helpful for accessibility purposes. So we have here field set with a class of contact. In other words this is all the contact information. So you'll see here we have text, the phone field, the email field the date field. As I said, the date feels pretty dodgy in terms of it's cross browser compatibility, not really that hot.

[00:04:51] You really don't know what you're getting with the date field, but it seems to still, even if somebody can just type in information, it seems to be okay, at least for that. Then we have our next field set which is the information about the pie. So that's what that field set was all about and then so if you made use of the number field.

[00:05:11] Here we have some information here with some radio buttons, right? Your basic radio buttons. Notice we're making use of the label tags here. The label tags are responsible for associating the words. Like, classic full crust with the previous radio button. What this does, in terms of accessibility, it's really important because the actual words that are the translations for the radio button are now associated together.

[00:05:37] But this is also a helpful way of coding this on a phone, where you got nice fat fingers and you try to click a tiny radio button and maybe you actually get the words instead. The words become clickable when you code them up with labels in this way.

[00:05:50] So this is a really good technique to use if you are not familiar with the label tag. A super helpful thing. I made use of a data list here. Data lists are also a relatively new thing in HTML 5 and what the data list will do is you can start to type in something, and if it's in the list, it will come up as an option.

[00:06:13] So you can start to type in like Apple, if Apple's on the list, it will come up as an option. So it works kind of like a Google search box. If it's not supported in the web browser, then this works as a standard select drop down. So you can just choose something from the list.

[00:06:31] So data list is kind of cool.
>> Jen: And then we wrap up with kinda standard stuff, the text area and so forth. And then we've got our testimonials, and then we have our footer at the bottom. So that's all of that HTML. If we take a look at our CSS.

[00:06:49]
>> Jen: So our CSS kinda looks like this. A few things that I've added along the way, because I don't have rows anymore and I have padding or margin on my rows, I've added some more here on my headings. I've had to rearrange where some of the padding and margins are along the way to make things to continue to look good.

[00:07:17]
>> Jen: So I'm continuing in my habit here of adding other classes that wrap around that main content area. So I called it content for the most part, but I have a special one for gallery. The home page has a different layout altogether. But all of those keep the same types of properties in terms of background colors and border radiuses and paddings.

[00:07:39] So that's all there. Image gallery, we have our floats, we have our sidebars.
>> Jen: Okay so then I have some form styling that's going on here. You can turn off the border in the field set. I know the field set by default is a fairly ugly thing to look at.

[00:07:58] So, if you turn off the border here, give it a little bit of, zero out your padding in your margin, make it display black. Then you do have the accessibility, features are all present but you don't have any of the ugliness that comes with it out of the box.

[00:08:14] You can see here, I'm mostly doing some basic styling. In terms of colors and so forth.
>> Jen: But the way that I set this up, for the most part, these are just the form fields. And the words are on top of the form fields, they're stacked on top of each other.

[00:08:32] I didn't take the time to put these side-by-side, so you have the words next to the form field, and then maybe they stack on top of each other on mobile. That is of course something you could totally do with grid and so that might be something that you would wanna check into.

[00:08:46] My personal feeling on this these days is that, and this is my own preference, that putting things next to each other like that can get to be awkward. I prefer them stacked, I think the look of the form is cleaner and I think it's potentially more usable as well.

[00:09:04] So that tends to be what I do with forms these days.
>> Jen: Notice that I'm making use of attribute selectors here to select my radio buttons and my check boxes. So that's a cool thing, if the attribute selector was new to you in this course, this is a nice use for that because of course these are all inputs in form fields.

[00:09:24] Now you can differentiate your radio buttons and your check boxes via an attribute selector, so that's kinda cool. And let's see we have some button styling.
>> Jen: Let's see, so I had a nested grid in some cases. So the content page and the homepage wind up with a nested grid.

[00:09:45] So that's why those classes were there. The boxes on the homepage are displayed pretty simply, like this. Okay and than finally on the desk top down, once again. So you've seen all these tricks during the day here, where I'm changing around the numbers of columns. Changing around the grid gap potentially and breaking things down here between the media queries.

[00:10:11] So I don't think there is anything new in terms of grid that I've done here. But I'm applying it to all of these different pages. Sometimes I may be using separate classes for doing that because in the case of the gallery class we're dealing with Flexbox later. In the case of the content class we have one kind of layout, in the case of a home class we'll have a different kind of layout later, makes sense?

[00:10:34] Okay, so if you have some time and you want some extra practice. I would strongly encourage you to go on ahead try this last chapter here, the practice chapter. You can go ahead and build out the rest of the website. As I've said before, you do have a branding folder available to you inside of the whole repository that you downloaded.

[00:10:55] And there are tons of images inside of that, background images and so forth. There are font specifications, there's logos, and there's a Word document with all kinds of copy on it for different pages that you could add. So this would give you a lot of extra practice in terms of working with grid.