Get an overview of the starting point for this project.
- [Instructor] In the exercise files for this movie, you'll find the baseline HTML document and styles for our three column layout. If you open this in the browser, you'll see that right now we are looking at the fallback layout for the site. So this is the mobile layout just scaled up to fit a wider screen. I've done that by restricting the max width of all the content, and when you scroll down you just see all the content as stacked one piece after the other in a vertical stack. All this content is fully accessible, easy to read and easy to maintain, but it is not being displayed in a three column layout.
That's what we want to do here. To start off let's take a quick look at the HTML documents here to understand the structure. We start out with this body that has the class site, and currently this is what is being used in the style sheet to restrict the width and also central line all the content. It's done right here in the style sheet. Next we have a skip to content link. This link is absolutely positioned off screen and only appears if you use the Tab key to tab through things in the page. This is for accessibility, and it's a requirement for this page to pass accessibility tests.
It's also irrelevant to our conversation because once you position an element either absolutely or fix it, it's taken out of the context of the grid. So it will not be placed on the grid. Next we have a series of first level children of the body element. First one is header, that displays a logo and site title. Then we have a figure with a class feature that displays an image. There's a main, with a series of sections inside it including splash, buckets and more. Then we have an aside with a class sidebar, that has two elements inside, both with the classes twin.
And finally we have the footer. In my layout what I want to do is move the header over to the left hand side in the first column. Then display all the main content here in the second center column, and display this sidebar content here over in the third column. And then have the footer span the full width of the screen. We can do all this by defining a grid on the main container, in this case that would be the body element with the class site.
- Defining a grid
- Grid lines and units
- Automatic and manual grid item placement
- Planning for grid layouts
- Starting your layouts with pen and paper
- Multicolumn layouts
- Full-bleed single column layouts
- Making the grid responsive
- Various card layouts
- Accessible off-screen navigation layouts
Skill Level Advanced
Building Responsive Forms with Flexboxwith James Williamson1h 19m Intermediate
1. CSS Grid: Core Principles
2. Planning for Grid Layouts
Accessibility first1m 54s
3. Multi-Column Layout
4. Full-Bleed Single Column Layout
5. Various Card Layouts
6. Accessible Off-Screen Navigation Layouts
7. Bonus Chapter: Ask the Instructor
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.