Learning Foundation 6
Offered By: LinkedIn Learning
Course Description
Overview
Create mobile-ready, cross-browser interfaces with Foundation 6.
Syllabus
Introduction
- Welcome
- What you should know
- Using the exercise files
- What is Foundation?
- Download Foundation 6
- Examine Foundation's files
- Foundation documentation
- 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
- 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
- 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
- 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
- Streamline Foundation for launch
- Next steps
Taught by
Jen Kramer
Related Courses
Responsive Web Design FundamentalsGoogle 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