Yqajqhozr9gvldoduw7b

Intro + Advanced Foundation Bundle

Achieve maximum thrust by learning how to use Foundation 6 to power your projects with the Intro and Advanced Foundation Courses

Sharpen your Responsive Design Skills with Foundation training. If you've gone as far as you can go in forums, on Youtube, and with your buddy's tips via SMS when he has time, ZURB's online training is here for you. Learn responsive design from the creators of Foundation. These online courses offer you a chance to better understand how Foundation works and how you can master it to create amazing projects.

What you’ll learn in the Intro 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.

    What you’ll learn in the Advanced class

    • The ZURB Stack & How To Use It

      Understand the many pieces of Foundation
      • Getting Started: An in-depth look at which version of Foundation is right for you and a peek at how ZURBians start their projects.
      • The Build System: A look at how the ZURB Stack build system is created and how to control all the parts.
      • Using Panini: How Panini works and how you can maximize the use of a flat file generator.
      • Customizing Foundation: Learn how to make foundation yours by removing unnecessary code or altering the code that's already there.
    • Sass Architecture & Best Practices

      Learn Sass and how to maximize its use in Foundation.
      • File structure: Learn the Foundation way of structuring your file folders and our efficient use of CSS imports.
      • The Sass Language: Take a crash course in Sass and learn about its most important features.
      • Sass Architecture: Get familiar with how Foundation uses Sass and how you can organize yours too.
      • Best Practices: Keep your Sass concise and easy to use with tips from the ZURB team on maintainable Sass.
    • The Grid and how to break it

      Learn about the Foundation XY Grid in all its shapes and forms.
      • Mobile First: Take a dive into the strategies of mobile first web creation and why Foundations grid is built that way.
      • The XY Grid: Get the scoop on Foundation 6.4's biggest change: The new XY Grid and learn how it will change what's possible on the web.
      • Advanced XY Grid: Build complex web app type layouts with the Grid Frame feature of the XY Grid.
      • The Grid and Sass: Now take the grid fully semantic by using the Sass mixins provided by Foundation.
    • JavaScript

      Leveling up your JavaScript game with a look at how it all works.
      • Initializing: Gain knowledge on the many ways to initialize Foundations JS and when to use which.
      • Manipulating Components: Take the default JS components and make them yours by modifying their core attributes.
      • JS Utilities: See how to create your own plugins and use Foundations built in utilities to make it even easier.
      • JS Optimization: Make your code more efficient by removing what you didn't use.


Your Instructor


ZURB University
ZURB University

Courses Included with Purchase



Interface Design Sketching
Learn ZURB’s system of sketching, the core component of how we work with teams to get projects off the ground and into a successful design leap.
ZURB University
$99
ZURB MASTER CLASS: Responsive Emails
Conquer responsive emails by learning how to rapidly design and develop emails with focused messaging that look beautiful on nearly every email client out there
Brandon Arnold
$299

Original Price: $398


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!