Join Jen Kramer for an in-depth discussion in this video Challenge: Style a page, part of Learning Foundation 5.
…Now that we have had a little bit of experience with foundations…classes, including utility classes, visibility classes,…as well as all kinds of…different ways of styling your page,…including writing custom styles and overriding…foundation styles, it's time for another challenge to test out what you've learned.…So shockingly, I'd like you to style a webpage.…There is a webpage located inside of your exercise styles folder, and if…you copy that on over to your foundation folder, that is your starting webpage.…And you should be adding some foundation classes to…this, as well as writing your own classes for it.…
You can write those classes and styling right on an…app.css, which you've already have and is already available to you.…So what kind of work should you be doing?…See if you can make use of some of the stuff…that I covered, like the button styling, aligning some of the images…on the page, align the text around the images and just generally…improve the look of the page overall and make it look lovely.…
- Downloading and installing Foundation 5
- Introducing grids
- Centering columns
- Nesting grids
- Styling text, lists, buttons, panels, and more
- Adding navigation bars and dropdown menus
- Creating a responsive lightbox
- Adding an image carousel
- Integrating responsive images
- Adding tooltips
Skill Level Beginner
1. Overview of Foundation 5
2. The Grid System in Foundation
3. CSS Overview
4. Navigation Systems
Next steps1m 24s
- 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.