Join Jen Kramer for an in-depth discussion in this video Challenge: Create a grid, part of Learning Foundation 6.
- [Instructor] This next video is a challenge.…It's time to review all the stuff we've been covering…in pertaining to the XY Grid,…and I have a webpage for you…that needs a little bit of layout help.…So in this challenge you're going to give some layout help…to that particular webpage.…I anticipate this will take you…about 15 to 30 minutes to complete.…So if you'll open up your Exercise Files folder…for this particular video,…you will find the starting challenge files.…
And this is the way the webpage looks.…You'll see a whole bunch of stuff stacked…on top of each other and no layout to speak of.…That's because there isn't any layout to speak of.…It's completely devoid of any sort of grid system.…What I'd like for you to do is…to make sense of this webpage.…Give it a little bit of layout…based on what you know about the XY Grid.…The way my page will look at the end is just like this.…So I'm going to wind up having two major columns,…and I'm going to have a series of images underneath…and so forth.…
And, yes, it's not perfect.…
- Working with the XY Grid system
- Adjusting margins and padding
- Block versus vertical grids
- Overriding CSS
- Including cards and callouts
- Customizing the navigation, including dropdown and drilldown menus
Skill Level Beginner
Responsive CSS Workflow with Sass, Bourbon, and Susywith Carrie Dils2h 59m Intermediate
Workflow Tools for Web Developerswith Christina Truong1h 13m Intermediate
1. Overview of Foundation 6
2. The XY Grid System
3. CSS Overview
4. Navigation Systems
Next steps1m 33s
- 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.