Join Jen Kramer for an in-depth discussion in this video Solution: Create a grid, part of Learning Foundation 6.
- [Instructor] So how'd you do with the challenge?…As you can see here this is the way I styled…my particular page,…and as I mentioned before in the challenge,…there's definitely a lot more work to do…in terms of making this pretty,…and I'm going to cover a lot of that in the next chapter.…But for right now let's just worry about…the broad layout of this particular page.…So here's the way I went about doing it.…If you take a look at the index.html file,…that you'll find inside of the exercise files…for this particular video,…you'll see here this is the way I put this together.…
So I started up here at line 12,…I put this in a grid container.…So there is a max width associated…with this particular webpage,…and then I set this up in a series of rows.…My first row starts here on line 13,…and I've given this an X orientation,…and it contains two cells.…One of which is going to be seven columns wide,…the other one is five columns wide…down here on line 34.…And the first cell here at line 14,…is going to contain the link here to the image,…
Author
Released
10/2/2017- 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
- Adding JavaScript effects such as a carousel or tooltips
Skill Level Beginner
Duration
Views
Related Courses
-
Building a Responsive Single-Page Design with Sass
with Ray Villalobos4h 55m Intermediate -
Responsive CSS Workflow with Sass, Bourbon, and Susy
with Carrie Dils2h 59m Intermediate
-
Introduction
-
Welcome1m 48s
-
What you should know1m 12s
-
Using the exercise files1m 6s
-
-
1. Overview of Foundation 6
-
What is Foundation?2m 40s
-
Download Foundation 62m 54s
-
Examine Foundation's files5m 13s
-
Foundation documentation3m 37s
-
-
2. The XY Grid System
-
Basic setup of the XY Grid7m 14s
-
Margin or padding collapse2m 48s
-
Auto-sized grid cells4m 7s
-
Source ordering5m 44s
-
Block grids3m 36s
-
Vertical grids4m 5s
-
Challenge: Create a grid1m 28s
-
Solution: Create a grid2m 33s
-
3. CSS Overview
-
Style buttons5m 12s
-
Include cards3m 1s
-
Include callouts3m 24s
-
Challenge: Style a page1m 30s
-
Solution: Style a page2m 41s
-
4. Navigation Systems
-
Responsive top bar3m 32s
-
Dropdown menus3m 21s
-
Drilldown menus4m 12s
-
5. JavaScript Effects
-
Conclusion
-
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.
CancelTake 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.
Share this video
Embed this video
Video: Solution: Create a grid