Off-Canvas Menu Setup

[00:00:00]
>> Jen Kramer: We are into chapter two, this is the hamburger layout. You could go ahead and take a look here in the instructions what we're going to be doing. We're gonna be building a CSS-only hamburger button.
>> Jen Kramer: And we're gonna go ahead and code this together. So what you're gonna see here is that I have given you some other resources here, if you want some other CSS-animated hamburgers.

[00:00:24]
We're gonna use a Font Awesome button to actually be our hamburger button here today. But you could go to this website and pick a different one. It actually has CSS-only animation. You can download the code, and drop it in your page and use that instead. And I am heavily basing what I'm talking about today on this fabulous article that comes from Medium on how to build a pure CSS hamburger menu.

[00:00:50]
And I'll just go ahead and put that up here,
>> Jen Kramer: To give him credit.
>> Jen Kramer: His name is Mark Caron, okay? And he wrote this terrific article that will walk you through the whole thing. So we're gonna go on ahead and use that. So if you go on ahead and open up your begin folder, I'm gonna go ahead and open my index.html.

[00:01:19]
And the other file I'm gonna open here is nav.css. I'm gonna opened that one to the side so that I can have these next to each other when I turn on my word wrap,
>> Jen Kramer: So we can see what's going on here, okay? And just to show you what this web page is looking like at this point in time, we go on ahead and open this up in a browser.

[00:01:48]
>> Jen Kramer: This is what our website looks like at this point in time. And the reason why it looks like this is because I've coded this for you so far with a mobile-only layout, okay? So in other words, all these boxes are gonna stack on top of each other.

[00:02:01]
I'm gonna go through all this code with you here in just a moment. So we've got our logo up here on the top, we've got some kinda navigation going on here. We have a whole bunch of resources. By the way, to the person who said I should mention my book, there it is, Before You Code, [LAUGH] okay?

[00:02:17]
It's all about how to plan websites. And as you scroll on down here, there's more information. Here's a little bit about the Frontend Masters Bootcamp coming up. Probably not for you guys, but maybe for your friends. A little bit about HTML, CSS, and JavaScript, Brian Holt and I taught that last year.

[00:02:34]
CSS-Tricks, here are some developers you should be following on Twitter. And then some design resources down here in the bottom, okay? So this is what that page is looking like at this point in time. If we take a quick peek, let's see, down here at the bottom, this is what these are gonna look like towards the end.

[00:02:52]
Just so you see what that looks like, okay? So we are gonna put some columns together here. We're gonna do funky things with those columns, watch the developer column, the third one. Ooh, we're putting the third one on the bottom, ooh, how cool is that? And then we have to make it go horizontal, my gosh, we have so much to do.

[00:03:11]
Here it is, medium, okay? And then, of course, small, everything's stacked on top of each other. So that's where we're headed today, all right? Okay, good, so if you take a look at your HTML here just for a moment, real quick, what have we got going on? I have segmented your style sheets here into individual style sheets.

[00:03:31]
And I wanna be really clear about this right now. I'm not suggesting that this is a best practice for you to do on your style sheets at home. No, sir, [LAUGH] this is all about teaching and learning. And so what I've done is I've segmented these into individual style sheets, kind of like you do individual partial files with Sass.

[00:03:48]
Although, we don't have partial files in CSS, so I am just using these as individual CSS files here. So this will help you find things in the CSS easily. We'll continue to add on style sheets as we work through this example across a couple of different chapters. So that's what's going on here, okay?

[00:04:08]
Here's our body, we have a header, okay? The header's got a logo. Any Font Awesome friends out there, Font Awesome people? Yay, we love Font Awesome, so we've got a Font Awesome icon in here, okay? Here's our nav bar as it starts, super simple, nav tags, bulleted list.

[00:04:25]
That's your basic nav bar, okay? Down here, we have the main portion of the website because this is the main focus of the page. That's when you use the main tag. I'm divided these into several sections, each section has a class. So we have a class of first, and then we have a series of articles, okay?

[00:04:43]
So we have an h1 starting off the section. Section should always be associated with some kind of heading with it, and so there we go. That's our, what is this whole section about? Jen's Awesome Resources, then we have a series of articles here, okay? Bunch of articles, blah, blah, blah, blah, blah.

[00:05:01]
These are just headings, paragraphs, lists, things like that, as you continue to scroll down. Then we get to our next section, all right? And we'll just go on through here. When you get to developers, this is probably syntax you haven't seen before. If you think about what those developer things are, there's a picture, and there's a name.

[00:05:20]
And I think there was a little icon to link you off somewhere. I'm using this as a bulleted list because it is a list of developers, so the correct semantic way of coding this would be a list. And then inside of that, each of these is a figure, right?

[00:05:35]
Cuz in a figure, we can have a link, we can have a picture, we can have a caption to go with it, okay? And the caption has my name, my affiliation, my Twitter link, okay? So if you're wondering about the HTML and why I did it, that's why I did it that way.

[00:05:52]
And then down here at the bottom is our last one. This is our list of resources, there it is, so there's our list of resources, it's just another bulleted list. Everybody clear on the HTML? That’s what we’re starting with. Okay, over here, if you wanted to look at styles.css, you're welcome to do so.

[00:06:12]
We actually won’t do anything with that file today, that is the default styling for this document. So you’ll find colors and whatever, centered images and a bunch of other things like that in that styles document. Apparently, there's some debate online about what is the best way to do this.

[00:06:29]
Whether it's Font Awesome, whether it's SVGs, or whatever for your hamburger button and for your close button. You can do whatever you want, Font Awesome is really super easy. Again, for teaching purposes, it's really straightforward. I've been told by some people in the class that the version of Font Awesome here may be a little bit out of date, okay?

[00:06:50]
So if you wanna go through the debug process and bring that up to the most recent version of Font Awesome, have at it. And remember, I told you also about this particular website that will give you some other options for hamburger buttons. The Squeeze, the Arrow, whoo, the Arrow Alt going the other way, or whatever, the Collapse.

[00:07:13]
So these are other things that you could swap in here instead of using the Font Awesome icons. So, again, a lot of times, things that I'm doing are because they're just really straightforward for teaching purposes. You are, of course, welcome to use whatever methodology is gonna work better in your particular situation.

[00:07:32]
The other thing that I had somebody tell me, too, is that I have put in a whole bunch of h1s for these sections. And that apparently this information is a little bit out of date. But it used to be we used to always put in h1s here for things like sections, and h1s for articles, and that type of thing.

[00:07:50]
Apparently, now we are doing one h1 for the entire web page, so these should probably be something like an h2. Again, I'm not gonna bother going ahead and changing the code on this. But that's obviously a really easy fix to make, as well.