- In recent years, CSS has evolved … to give us new layout modules that allow us … to create these new dynamic responsive layouts … that look quite different from what we could do in the past. … Those new modules include Flex, or Flexbox, and Grid, … and when you look at it, it almost looks … like Flex was a stopgap measure between what we had before, … which was just table and float, … and what we have now, which is Grid. … People often ask me, now that we have Grid, … if they should bother learning Flex. … The answer, of course, is yes, you should … because float, Flex, and Grid are all part … of the layout system we have in the browser … and they can all be used to benefit the layout. … So, let's take a look at what they are … and what they can do, starting with float. … So, float is taking an element … that is inside an existing context, … like for instance, an inline image … or an image that's placed inside some other content, … in this case, a paragraph, and then saying float that image …
- 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.