Introduction to Foundation

ZURB has been practicing product design since 1998 and in our online courses and training programs, you’ll learn the same valuable skills our designers use on a daily basis. Learn the fundamentals of prototyping with the 50% lighter-fewer style overrides-single click project spin up Foundation 6. In this 4-hour live webinar class, we'll walk you through the world's most advanced front-end framework. If you have a basic knowledge of HTML/CSS and want to learn how to use Foundation in your projects, this class is for you.


Foundation proof point1

The Grid

Learn how to build flexible and complex responsive layouts with the grid.

Foundation proof point2

Fast prototyping

Learn how to quickly prototype with navigation, form, button elements and much more.

Foundation proof point3

JavaScript components

Understand how the JavaScript components give you the ability to add a vast amount interactivity.


$299 per person
Attend this class on Tuesday, June 13
Reserve Your Spot

Questions? Email us at training@zurb.com

Learn from ZURB’s product designers

Here are your instructors that are teaching this class.

Tim home
Tim Hartwick
Designer

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
Customer 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.

Brandon home
Brandon Arnold
Design Lead

Brandon is a mastermind when it comes to Foundation. He contributed several key components and of the latest version of our framework.

Kevin Ball
Kevin Ball
Engineer

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

A Word From Our Students

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

Aerospike

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

Dash Desai

Dash Desai

Aerospike

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

$299 per person

Attend this class on Tuesday, June 13

Reserve Your Spot

Want custom team training? We’ve got you covered. Learn about team training »