- If you go look at the source code … for a webpage that has a lot of images on it, … there's a good chance you'll notice that … the image elements look something like this, … where you have your regular … image element attribute's source … which points at the original source, … and then you have an alt attribute that … describes the image if you don't see an image … or if you're using a text-to-speech browser. … And then you have these new ones; … source set, which is a long list of … other image names, and then you have sizes … which is this weird mix of … media queries and some widths. … This looks far more complicated than … what we used to do, which was just those … two first lines here. … What's going on? … This is what's known as responsive images. … It's a spec that's been around on the web … for quite a while now. … It is a spec that is extremely important, … very powerful, and a little bit hard to understand … because of the naming conventions and so on. … Let me try to explain what's actually happening here …
- 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.