Get an overview of the starting point for this project.
- [Instructor] In this first example,…we'll look at a text based card.…But technically the contents of this card could be anything,…text, images, video, whatever you choose…to add into the card.…The purpose of this example is to show you how…component level grids make aligning contents…inside cards easier.…Right now these cards have no "O Grids" inside them…and they're displayed the way they would be if you just…applied standard styling.…So this is our fall back.…Now, you may wonder why you would want to display…cards like this in a vertical stack on…the full width of the screen.…
The reality is you wouldn't do this.…You would add these cards into a larger layout that…have maybe sidebars or something else.…But here we're just focusing on the cards themselves,…and how to create layouts with just the cards.…So you can place those layouts anywhere else inside…anything else later.…The HTML structure of these cards is straight forward.…We have a Main, with a class="main-area".…This is where all the cards are sitting.…
- 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.