YoVDO

Learning Foundation 6

Offered By: LinkedIn Learning

Tags

Foundation Courses Web Development Courses Web Design Courses Responsive Web Design Courses

Course Description

Overview

Create mobile-ready, cross-browser interfaces with Foundation 6.

Syllabus

Introduction
  • Welcome
  • What you should know
  • Using the exercise files
1. Overview of Foundation 6
  • What is Foundation?
  • Download Foundation 6
  • Examine Foundation's files
  • Foundation documentation
2. The XY Grid System
  • Identify Foundation's three grid systems
  • Basic setup of the XY Grid
  • Margins and padding with XY Grid
  • Margin or padding collapse
  • Auto-sized grid cells
  • Source ordering
  • Block grids
  • Vertical grids
  • Challenge: Create a grid
  • Solution: Create a grid
3. CSS Overview
  • Typography, blockquotes, lists, and text alignment
  • Style buttons
  • Include cards
  • Include callouts
  • Override Foundation's core CSS
  • Customize Foundation using the download screen
  • Challenge: Style a page
  • Solution: Style a page
4. Navigation Systems
  • Configure top bar, the basic navigation bar
  • Responsive top bar
  • Dropdown menus
  • Drilldown menus
  • Challenge: Combine off canvas and top bar
  • Solution: Combine off canvas and top bar
5. JavaScript Effects
  • Design a photo carousel with Orbit
  • Set up a modal window with Reveal
  • Integrate responsive images with Interchange
  • Challenge: Add tooltips to a site
  • Solution: Add tooltips to a site
Conclusion
  • Streamline Foundation for launch
  • Next steps

Taught by

Jen Kramer

Related Courses

Responsive Web Design Fundamentals
Google via Udacity
Introduction to Bootstrap - A Tutorial
Microsoft via edX
Responsive Images
Udacity
Responsive Website Basics: Code with HTML, CSS, and JavaScript
University of London International Programmes via Coursera
Responsive Web Design
University of London International Programmes via Coursera