The CSS Grid Layout module is a core CSS display module. If you know CSS, you'll be able to use CSS Grid.
- [Instructor] To make it easy for you to follow along, this course comes equipped with a full set of exercise files you can download directly from the course page and place anywhere on your computer. The exercise files provide the starting point for each movie with a code example and they are marked with the chapter number and movie number so Movie Seven in Chapter Three is folder 03_07. To follow along with the exercise files, simply open the folder of the current movie you're watching in your quote editor and spin up the index.html file in your browser.
That is all, there's nothing fancy going on here, just core markup and languages. In some cases, I've added a folder with the suffix _END. That means the next movie starts with a new code example and I want to provide you with a final code for reference. In these cases, I usually also annotate my code, so you can know exactly what's going on. So take a look at these folders even if you've finished a code in the movie they relate to. Finally, there's a folder in the exercise files called Assets that holds a PDF document with a CSS Grid terminology reference and an accessibility mantra printout for you to stick on your wall.
You can check them out now or take a look later when they are referenced. These files will help you both in the course and as you get started working with CSS Grid on your own.
- 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
- 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.