Learn to build responsive websites and web applications using ZURB Foundation through this comprehensive tutorial series covering over 13 hours of hands-on instruction. Master Foundation's core components including the flexible grid system, navigation menus, cards, tabs, accordions, and modals while exploring advanced features like Flexbox integration and the XY Grid framework. Discover how to customize Foundation using Sass settings and data attributes, create responsive email templates with proper CSS inlining and testing techniques, and build modular layouts using the Panini templating engine with variables, helpers, and partials. Explore modern web development concepts including CSS Grid basics, Flexbox properties and helper classes, responsive SVG implementation, and print styling optimization. Follow along with the "Zero to Website" series to build and deploy a complete site from concept to GitHub Pages, while learning CSS fundamentals, architecture best practices, and Foundation's component structure. Gain practical experience creating hover interactions, custom shortcuts, deep linking functionality, and complex web application layouts using Foundation's extensive toolkit for professional front-end development.

Syllabus

An Intro to Foundation's Card Component in Flexbox mode
Foundation's Off-canvas: 1 off-canvas, 10 possibilities for menus and navigation
An Intro to the new Cards Component in Foundation 6.3
Foundation Lesson 147 - Responsive Tabs and Accordions
Supe Up Your Style with Foundation’s Sass Settings
Foundation Lesson 145 - Control Your Behavior with Foundation’s Data Attributes
How to Use the Foundation Grid Utility Classes
Inline Your Email's CSS
Testing Your HTML Emails Before You Send
Intro to Coding a Responsive HTML Email
Foundation Lesson 143 - Create Modular Responsive Menus with Foundation 6
Foundation Lesson 142 | Vertically Aligning in Flexbox
Using Panini Variables and Helpers to Simplify Components
Mastering Panini Helpers and Data
Creating Reusable Layouts with Panini
What the ZURB Stack Does - Part 1
What the ZURB Stack Does Part 2
Lesson 141 | Creating Custom Shortcuts
Getting Started with Foundation 6 Sass
How to create hover interactions with menus and tabs
Master Foundation's Toggler
Getting Started with Responsive SVG Images
5 Common Mistakes Designers Make When Using Cards In Design
Create Customized Print Styles in Minutes Using Foundation
How to use Foundation's Flexbox Helper Classes
Foundation Lesson 152 - Deep Linking with Foundation Tabs and Magellan
Intro to Foundation’s Panini Handlebars Templating Engine
Layouts, Pages, and Partials - Panini's Tasty Time Savers in Foundation
Front Matter and Variables using Foundation's Panini
Everything you need to know about Foundation's Breakpoints
How to use Foundation's Panini Helpers and Data
Learn Advanced Panini Tips and Tricks
Learn the basics of CSS Grid with this fun experiment
Zero to Website | Part 1: Before You Build - The Basics of the Web
Zero to Website | Part 2: Digging Into Foundation's Starter Package
Zero to Website | Part 3: Intro to the Foundation Grid
Zero to Website | Part 4: Scaffolding Your Site
Zero to Website | Part 5: Styling Your Scaffolded Site
Zero to Website | Part 6: Bringing Your Site to the Web with GitHub Pages
Learn How To Optimize GIFs for Email and Create Captivating CTAs
Foundation CSS Tutorial Series | Ep. 1: The Basics of CSS
Foundation CSS Tutorial Series | Ep. 2: Specificity and the Cascade
Foundation CSS Tutorial Series | Ep. 3: CSS Architecture and Best Practices
Foundation CSS Tutorial Series | Ep. 4: Foundation's CSS Structure
Foundation CSS Tutorial Series | Ep. 5: Building on Top of Foundation's Components
What is Flexbox?! - ZURB Foundation Flexbox Tutorial (Part 1: Intro to Flexbox)
Parent-Child Relationships! - ZURB Foundation Flexbox Tutorial (Part 2: Flexbox Properties)
Learn the All-New XY Grid by ZURB Foundation!
More Flexbox Properties! - ZURB Foundation Flexbox Tutorial (Part 3: More Flexbox Properties)
Flexbox-based Foundation XY Grid - Foundation Flexbox Tutorial - Part 4
Complex Web App Style Layouts! - ZURB Foundation Flexbox Tutorial (Part 5: The XY Grid Frame)
Flex Layouts How You Want Them! - ZURB Foundation Flexbox Tutorial (Part 6: Flexbox Helper Classes)
Master Foundation's Flexbox Helpers (Flexbox Tutorial Series Part 6: Flexbox Helpers)
Code 3 UI Components with Rafi of the Foundation Team (Flexbox Series Ep. 7)