Introduction

[00:00:00]
>> Jen Kramer: I'm so glad you're here today, my name is Jen Kramer. I am a lecturer at Harvard University's Extension School, where I teach at least five classes a year on HTML, CSS, and user experience. And I am here today at Frontend Masters to lead you in this part two, essentially, of my first course.

[00:00:18]
My first course had to do with grids and flex box, working on those layouts from the very ground. And now we're going to build on top of that in this class, which is called advanced CSS layouts. So what we're going to be covering today includes a whole bunch of stuff.

[00:00:33]
So first of all, we're gonna start off with a quick review exercise I'll tell you about in just a second. Second, we're gonna go into making a hamburger button with CSS only, pretty cool trick. Then in our third chapter, we're going to go into a brief introduction to CSS custom properties and calc.

[00:00:56]
I'm gonna talk to you about that via some PowerPoint slides, just show you what's going on. Then we're going to build a simple grid system working with custom properties in calc. Then we're gonna apply that to some real pages, a home page and an inside page. Then we're going to go into a bit about typography.

[00:01:13]
First of all, we're gonna talk about a type scale, what is a type scale, how can it help you with your designs? And we're gonna talk about how we can put that type scale on steroids using custome properties in calc, applying that to the designs that we're working on, and then we're going to talk about responses tables.

[00:01:28]
We're gonna talk about responses tables not only in the traditional Bootstrap sense of the word, with the little scrolly bar thing, but also how we can disassemble tables and make them truly usable on a mobile device. And of course, accessibility is a part of that, we'll be including that along the way.

[00:01:43]
And then finally, if there's any juice left for anyone, we'll talk about responsive forms. How can we take all of the principles that we've learned during the day and apply them to some kind of form layout? So that is the broad overview of the stuff we're gonna cover today.

[00:01:57]
It's a lot, in my Harvard class, I would cover this stuff over a period of about three to four weeks, [LAUGH] we're gonna do it in one day. First of all, there is a GitHub repository available that you should go on ahead and download the files for this, or hook it up however you normally do with GitHub.

[00:02:15]
So if you go to github.com/jen4web, that's the number four, Jen4Web, this is my GitHub repo. Right here on the front, I've pinned the one for today, which is the one that says advanced CSS layout. If you are not a GitHub person, you can simply go on into that list of files, and the button that says clone or download, just go on ahead and download the zip file.

[00:02:40]
Put that on your desktop and you can work with the files from there. If you're GitHub literate, go on ahead and do your GitHub thing and and fork and all the rest of that stuff. Okay, you'll notice that all of these files are set up with numbers. I think of these as chapters of a book, those are all the topics that I just rattled off where you there.

[00:02:59]
So as we go through, I'll tell you what chapter we're on and each of the topics. Inside each of those folders, you'll typically find a beginning folder, so that's the starting state of whatever we're working on. If you happen to get behind or confused or you break something, you're not sure what's going on, there's always those starting files that we'll be working with in that particular chapter.

[00:03:20]
And there's also a finished state where we're gonna leave it, so you'll know exactly what it should look like. Again, if you break something along the way, you at least have some code you can refer to. In all of the folders for sure, there is an instructions document that will describe exactly what we're going to be doing in that chapter.