This course has been updated! We now recommend you take the CSS Grid & Flexbox for Responsive Layouts, v2 course.
Transcript from the "Introduction" Lesson
[00:00:00]
>> Jen Kramer: Hello everybody online, hello everyone in class, I'm really glad to be here. My name is Jen Kramer. I've been working in this field for 17 years, which predates CSS in the browser. When I started we were doing all table based layout, Macromedia DreamWeaver 3, and we've moved on from that, thank goodness.
[00:00:18] So we're finally getting to some of the first true layout tools that we've ever had. [LAUGH] Only took 17 years for us to get away from these hacks. My background, I have been a freelancer for many years. I had my own web design firm for a while, I sold that, I now work pretty strictly in education.
[00:00:40] I am a lecturer at Harvard University Extension School, where I teach in the digital media design program. You can get a Master's degree, for the most part, wholly online from anywhere in the world. I also make videos for Lynda.com and I've just had one released yesterday on Foundation Six.
[00:00:57] And I've done some work with O'Reilly as well, and you can follow me on Twitter @jen4web, J E N, number 4, W E B. So what we're gonna be talking about today is going to be just Flexbox, and we're gonna talk about basically the big overview as this follows.
[00:01:18] We're gonna start off talking a little bit about floats, we wanna review what the current standard is for working with layout on the web. It'll be brief, no more than an hour focused on floats. Then we're gonna move into Flexbox. We're gonna look at Flexbox as a tool.
[00:01:36] We're gonna look at all of its various properties and some of the values that go with it, and understand how Flexbox works. Then we're gonna go into Flexbox used as a grid system, which unfortunately is a hack. Sorry everybody, Flexbox is not really designed to be used to layout whole webpages, it's actually designed to layout things like image galleries and so forth.
[00:01:58] But we are gonna take a look at it as a grid system, because Flexbox has become integrated into a whole bunch of responsive design frameworks. It is the way Bootstrap 4 is working for its layout, Foundation Six. You like hit three, and we can go on and on from there.
[00:02:16] Towards the end of the day we're gonna look at Flexbox, and we're gonna do a lot of practice work with it, getting really comfortable with it. Tomorrow we're gonna go into CSS Grid. At that point in time we will be laying out lots of pages with Grid. We'll talk about browser compatibility issues with Grid.
[00:02:35] And then towards the end of that day we'll start to talk about how we integrate Grid with Flexbox in the correct way for laying out webpages going forward.