Put Yourself On the Cutting Edge of Web Design

Learn in-demand front-end development skills straight from the Foundation team.

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 The Course Covers

Foundation proof point1

The XY Grid

Learn how to build flexible and complex responsive layouts with the brand new AMAZING XY Grid.

Foundation proof point2

Rapid Prototyping

Quickly build interactive prototypes so you can get from idea to website in less time than ever.

Foundation proof point3

JavaScript components

Add vast amounts of interactivity to make your websites come to life without writing custom code.

What You Get

  • A comprehensive overview of the XY Grid, Navigation and Menus, Buttons, Callouts, Forms, and Foundation’s JavaScript.
  • Live interaction with the Foundation team. Ask questions and get immediate answers.
  • A video recording of the session and materials to reference later.

Learn from the ZURB Foundation Team

Here are your instructors that are teaching this class.

Tim home
Tim Hartwick

Tim is a ZURB designer and a key contributor to Foundation. He has many Foundation projects under his belt, and will be bringing you up to speed on getting started with Foundation 6.

Rafi home
Rafi Benkual
Foundation Advocate

A troubleshooting master and Foundation expert, Rafi manages the Foundation Forum. Rafi Benkual managed people, stores and small organizations before joining ZURB as our Customer Advocate.

Laurel Beyers

Laurel is a designer at ZURB and one of the authors of ZURB's popular "Zero to Website" guide. She'll cover navigation and menus to ramp up your prototyping skills.

Kevin Ball
Kevin Ball
Foundation Lead

Kevin is an engineering lead here at ZURB, and spearheads Foundation development. He’s known for being a JavaScript ninja, and will be covering why, when, and how to use JavaScript.

Master the Powerful Framework Used By...

  • Ford
  • Disney
  • Adobe
  • HP
  • Pixar

People are Raving About Foundation Training

Here's a few words from folks who took the course.

The presentation was very clear and concise. It was obvious that you guys enjoy working on Foundation. I walked away excited about the possibilities. Nice work!

Damon Green

Damon Green

North Virginia Community College

All speakers explained the components of the framework in a fun and engaging manner.

Claire Umeda

Claire Umeda


Very knowledgeable instructors. Great content that was covered in timely manner. Effective delivery mechanism. Great moderation.

Dash Desai

Dash Desai


What you’ll learn in this class

  • Using Foundation 6

    Learn how to go from Prototype to Production with Foundation 6

    9: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 components

    10: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 components

    11: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 functionality

    12: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.

Why our class format rocks

Mic icon
Live training

This class is presented live by members of the ZURB team! You'll get a chance to interact with us directly.

Web icon
Held online

We conduct the class online via GoToTraining, so you can attend from anywhere in the world.

Question icon
Live Q&A

Get all your questions answered during the live Q&A sessions. Each class topic is paired with dedicated Q&A time.

Video icon
Keep the recording

After you complete the class, we'll send you the class slides, examples and the recording so you'll always have it to reference.