Search 6,000+ CA Community College Courses

Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

LinkedIn Learning

Learning Foundation 5

via LinkedIn Learning

Go to class Write review

This course may be unavailable.

Overview

Learn to build responsive websites with Foundation—the clean, simple design framework that uses integrated CSS and JavaScript.

In this advanced course, learn to build responsive websites with Foundation—the clean, simple design framework that uses integrated CSS and JavaScript. Jen Kramer covers Foundation's twelve-column grid system, including the small, medium, and large grid options that make layouts easy to assemble. Then learn how to adjust Foundation's default CSS styling to make your buttons, thumbnails, and other page elements look just the way you want, and add top, side, and off-canvas navigation bars. Jen also shows you how to work with cool JavaScript-based effects like Orbit (an image carousel), Reveal (a modal window plugin), and Interchange (offering responsive image management).

Syllabus

Introduction
  • Welcome
  • Using the exercise files
  • Using the challenges
1. Overview of Foundation 5
  • What is Foundation?
  • Downloading Sublime Text 2
  • Downloading and unzipping Foundation 5
  • Customizing Foundation 5, and a word about Sass
  • Examining Foundation's files
2. The Grid System in Foundation
  • Introducing the small grid
  • Introducing the medium and large grids
  • Combining grids in a single page
  • Applying offsets in the grid
  • Centering columns
  • Nested grids
  • Block grids
  • Source ordering
  • Challenge: Create a grid
  • Solution: Create a grid
3. CSS Overview
  • Exploring typography, block quotes, and lists
  • Text alignment options
  • Styling buttons
  • Including panels
  • Styling thumbnails
  • Overriding Foundation's core CSS
  • Working with visibility classes
  • Challenge: Style a page
  • Solution: Style a page
4. Navigation Systems
  • Adding side navigation
  • Configuring Top Bar, the basic navigation bar
  • Adding dropdown menus
  • Working with Off Canvas
  • Challenge: Combine Top Bar with Off Canvas
  • Solution: Combine Top Bar with Off Canvas
5. JavaScript Effects
  • Creating a responsive lightbox with Clearing
  • Making equal-height columns with Equalizer
  • Designing a photo carousel with Orbit
  • Setting up a modal window with Reveal
  • Integrating responsive images with Interchange
  • Challenge: Adding tooltips to a site
  • Solution: Adding tooltips to a site
Conclusion
  • Streamlining Foundation for launch
  • Next steps

Taught by

Jen Kramer

Reviews

Start your review of Learning Foundation 5

Go to class

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.