Wof3r1q5svutqjemjskx

Introduction to Foundation 6

Achieve maximum thrust by learning how to use Foundation 6 to power your projects.

Foundation 6 transformed the way we design and build the web, and the 6.4 release did it again with the brand new XY grid. In this 4-hour live webinar class, you'll gain a comprehensive understanding of the new grid, navigation, menu, and other interactive components that are a part of Foundation. Foundation is the world's most advanced front-end framework, and you can learn it from the team who builds it. If you have a basic knowledge of HTML/CSS and want to become an amazing front-end developer, this class is for you.


What you’ll learn in this class

  • Using Foundation 6

    Learn how to go from Prototype to Production with Foundation 69:00AM - 9:45AM PDT
    • Getting started with Foundation: Learn the quickest way to get Foundation configured and installed
    • Explanation of our mobile first approach: Use the mobile-first grid to get support for the largest number of old devices.
    • Deep dive into our flexible, powerful grid: Learn how to quickly build complex responsive layouts using the Foundation XY grid
  • Prototyping with Foundation part 1

    Faster prototyping with Foundation UI components10:00AM - 10:45AM PDT
    • Block grid: Create evenly spaced blocks and get elements to line up easily.
    • Source Ordering: Shift columns around between our breakpoints to dictate how responsive layouts are viewed.
    • Buttons: Create clear calls to action by just adding a style.
    • Typography: Get great looking type and vertical rhythm right out of the box.
    • Callouts: Highlight content or sections of your page.
    • Forms: Layout inputs, selects, and labels to create easy to use forms.
  • Prototyping with Foundation part 2

    Faster prototyping with Foundation navigation components11:00AM - 11:45AM PDT
    • Navigation: How to quickly implement 5 common navigation patterns.
    • Pagination, Breadcrumbs: Create useful sub-navigation patterns that create simple user flows.
    • Magellan: Build a solid navigation that scrolls users to the content they want to see.
    • Visibility classes: Show different navigation or content elements for different devices.
  • Using Foundation JavaScript

    Using Javascript components to layer in complex functionality12:00PM - 12:45PM PDT
    • Installing the JavaScript plug-ins: Get up and running with the Foundation JavaScript plugins by covering initializing and setting configurations.
    • Toggler: Creating your own plugins with toggler and using Motion UI to animate them.
    • Reveal: Create dead-simple responsive modals and add Motion UI animations.
    • Dropdown Pane: Organize multi-tier content — just add links and go.
    • JavaScript Utilities: Learn about the Foundation JS utilities library and how to use them to maximize the Foundation framework including changing behavior by media query.


Your Instructor


ZURB University
ZURB University

Class Curriculum


  Downloadable Resources | Introduction to Foundation
Available in days
days after you enroll

Frequently Asked Questions


When does the course start and finish?
The course starts now and never ends! It is a completely self-paced online course - you decide when you start and when you finish.
How long do I have access to the course?
How does lifetime access sound? After enrolling, you have unlimited access to this course for as long as you like - across any and all devices you own.
What if I am unhappy with the course?
We would never want you to be unhappy! If you are unsatisfied with your purchase, contact us in the first 30 days and we will give you a full refund.

Get started now!