Introduction

[00:00:00]
>> Hello everyone my name is Jen Kramer I am a instructor I've been teaching HTML and CSS for over 20 years most recently at Harvard University but I've taught in all kinds of environments, academic and commercial environments workshops and online courses, all kinds of other things. And I am so excited to present to you the second version of my course on CSS grids and Flexbox layouts.

[00:00:28]
Let's take a look at all of the cool things that you're gonna learn inside of this course. First, we're gonna start with Flexbox. And we're gonna take a look at all types of different Flexbox properties. And how you can set up Grid based layout systems using Flexbox across, of course, all of the various media queries.

[00:00:48]
We'll move on to a cool trick that we can use with figures and figure captions among other types of HTML markup. This is going to allow us to layer our figure captions on top of figures here. For a really lovely looking web page and then we're gonna put together those two pieces of learning that Grid system and this concept of wearing our captions with the figures Into a webpage project here, the first part of it.

[00:01:19]
Where we will lay out a series of images here with lovely overlays describing all of these various types of images. We'll take a quick peek at CSS shapes, and look at the lovely way we can make our texts go on a slant like this. And of course we'll work on our footer layout and that will work across our various breakpoints.

[00:01:41]
So of course, we're going to go to different layouts as we hit our different breakpoints here in that particular web page. Then we'll move on to adding a header and a footer for our webpage. We'll look at Flexbox and how we can make very interesting looking navbars. Here is an example where we have our logo in the middle of the navbar, and then as we squash the screen down here, we wind up with the navbar underneath the logo on the top and then finally we'll turn our navigation into a series of buttons all using CSS.

[00:02:16]
Then we'll move on to adding responsive images to the website we'll talk about the various approaches to as responsive images, including the picture elements. We'll look at source set and sizes as ways of loading responsive images. And we'll include this hero element on the page as well as a featured print.

[00:02:36]
And then using those responsive images depending on what break point we have to be looking at We'll look at different versions of that picture on the webpage. Finally, to wrap up the Flexbox portion of this course, we will move on to adding the popular prints section of this homepage for a fully completed homepage by the end of the Flexbox unit of the course.

[00:03:02]
Then we'll move on to CSS Grid. As always, we'll start with looking at the various individual properties. And we'll do that by looking at a painting by Piet Mondrian and will code it up with CSS Grid. Then we're going to look at the same kind of figure in figure caption tricks that we did with Flexbox using.

[00:03:26]
Absolute and relative positioning now we're going to make that happen instead using CSS Grid and Grid's fantastic ability to overlap cells and so we don't need to use absolute relative positioning, we can just use Grid to overlap those cells. That also means we can do other kinds of cool things with Grid like this by overlapping to figures and using CSS animation to fade in and out different pictures on the webpage.

[00:03:57]
We'll move on to adding a different section of the homepage. In this case it will be a mosaic based layout. We will have all different types of pictures of different heights, and widths, and spanning over rows, and columns, inside of our lay out and of course we'll wind up making that responsive as well.

[00:04:16]
We'll then take a look at some magazine styled layouts, so here we've got a series of cats on our page, and they have different placements and different sizes and different images and so forth. We'll look at how easily we can make that kind of magic happen without any math, and just simply assigning a few classes and changing a few properties, you can achieve these types of layouts.

[00:04:40]
And finally, we'll do a very cool trick here with cards. So we'll create cards that have one particular layout here on desktop, they'll move on to a very different kind of layout. Notice how we had the image in the middle of the text here. Now we've got the image on the left the text on the right, with Grid and then finally back to a different type of layout here on mobile devices and we'll walk through how we can do that making use of Flexbox and Grid and more Grid inside of grids.

[00:05:13]
And then finally, we'll build our final website where you have lots of choices for how that might look. This happens to be the way that I came up with it. Another mosaic style layout of a bunch of beautiful donut pictures, and a cool overlay of the text here on top of one of the images inside of the Grid cell.

[00:05:32]
When we get to smaller dimensions that tech shows up first, with the images stacked nicely underneath. As always with this course, it comes with a website which will give you all of the background information, all of the links to the various code pens, some additional pointers and guidance along the way as we work through the information.

[00:05:55]
And it's broken up into a chunk of material pertaining to Flexbox and a chunk of material pertaining to Grid. So you can refer to this as you work through the materials on the course. And finally, all of the files are available on GitHub, so you can download all of the files and follow along with everything that I'm doing here in the course.

[00:06:17]
I am really excited to be recording an update to the Flexbox and Grid course. I've reworked almost all of the material from the original version of this course. And I'm including all kinds of new techniques and new inspirations for you that I hope will inspire you to make more interesting layouts using Flexbox and Grid.

[00:06:39]
So let's get started.