Build Advanced Responsive Websites with Foundation 6 & SASS
4.4 (266 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,367 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Build Advanced Responsive Websites with Foundation 6 & SASS to your Wishlist.

Add to Wishlist

Build Advanced Responsive Websites with Foundation 6 & SASS

Learn the most ADVANCED RESPONSIVE FrontEnd framework in the world, building 5 real world project from start to finish
4.4 (266 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,367 students enrolled
Last updated 8/2017
Curiosity Sale
Current price: $10 Original price: $200 Discount: 95% off
30-Day Money-Back Guarantee
  • 28.5 hours on-demand video
  • 40 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Create 5 different and Great Projects with Foundation for Sites
  • New XY Grid videos just added, a powerful grid built on Flexbox
  • More Than 20 Photoshop Designs Included (which we will Convert into Web pages)
  • This Course covers the creation of 2 WordPress themes with Foundation 6
  • Learn the Mixins included in the framework that will speed up your web design process!
  • Create AMAZING full featured Responsive Websites with the most POWERFUL Front End Framework
  • Learn the Most Advanced Responsive Web Design Framework in the world, ZURB Foundation 5 and 6
  • Learn about Foundation 5 & 6 Components for adding complex functionality and eye catching User Interfaces to your websites
  • Learn how to customize the looking of your website with SASS, Mixins and Variables
  • Learn by building 4 Real World Projects from start to finish
View Curriculum
  • Are you ready to learn the most advanced Front End Responsive Framework?
  • We will install some tools needed for this Course such as NodeJS, NPM, Git & Gulp
  • You will need a Text Editor, i'm gonna be Using Sublime Text and Atom (both are free)
  • Foundation Is really Powerful, also really easy to learn, this course provides several examples and different projects


Course updated to version 6.4 of the framework and 68 new videos, also new XY Grid Videos just added, plus a complete Project (A Coffee Shop Website) completely done with the XY Grid and Flexbox!

Everything done with the ZURB Template, you will love this update and we're building a really beautiful responsive website.


I have added 48 new videos, where i'm gonna show you how to take the static HTML website into a WordPress Theme


I have Added 52 new Videos where you will learn how to develop a WordPress Theme using Foundation 6, Underscores,  Gulp & SASS.


I have added 36 new videos where you will Learn the new Flex Grid, ZURB Template, Panini, Handlebars, and much more!

If you wanna build AMAZING websites that look great in smartphones, tablets, laptops, desktop computers and TV`s, you have to make your website RESPONSIVE.

In this course you will be able to build 4 Websites from Start to Finish, adding more complexity,  functionality and different versions of Foundation.

We'll Build 4 AMAZING PROJECTS, Two Websites for a Hotel, a Single Page Website for an Online Store and an AMAZING WORDPRESS THEME.

Foundation is the most advanced Responsive Web Design framework in the WORLD! and in this Course you will LEARN EVERYTHING you need to know to start DEVELOPING amazing RESPONSIVE WEBSITES.

You will Learn the newest version FOUNDATION 6 with SASS, Foundation 6 is powerful and the syntax is really easy. Also you will learn version 5.

You WILL LEARN ZURB Foundation 6 in this course, and we´re gonna learn it with his best friend SASS!

SASS is a really powerful CSS preprocessor and we´re gonna be using Mixins, extending classes, so you can really take advantage of the most powerful features of Foundation 6 and SASS.

Responsive Web Design is HOT, SASS and Foundation 6 are the best tools that you can choose to start building websites right away.

Who is the target audience?
  • If you´re the kind of person who learn best by building real world projects, this course is for you
  • If you´re learning Responsive Web Design, you can´t go wrong with Foundation for Sites!
  • If you´re trying to learn a CSS preprocessor, SASS is the way to go, you will learn Mixins too!
  • If you want to speed up your workflow: SASS & Foundation are the perfect combination
  • Are you looking for the BEST Foundation & SASS COURSE on the internet? this is for you!
  • Learn the most advanced Grid system in the world by building 5 different projects!
Students Who Viewed This Course Also Viewed
Curriculum For This Course
340 Lectures
Course Introduction
9 Lectures 35:13

This is the first project that we're building in this course

Preview 03:47

This is the final project that we´re building in this Course.

Preview 04:04

The PSD files are designed using Photoshop CS6, if you have an older version of Photoshop i can save them in earlier versions but some of the elements may lose

Preview 02:27

This is the second project of the course, once you start feeling comfortable with Foundation, we´re gonna develop a Single Page with Flexbox, SASS, Gulp Workflow, Handlebars, Panini and More

Preview 05:36

Let's review the 3rd Project for this Course, here we're building a complete WordPress Theme from Scratch using Foundation 6 and SASS with Underscores

Preview 05:41

Let´s check the how the final website is gonna look

Preview 04:41

Foundation Projects are small projects that can be done with Foundation, if you have an idea send a message :) 

Foundation Projects 1st : A Dashboard Using ZURB Template & Foundation Icons

The Assets for this Course

Let's review what's Foundation for Sites

Preview 04:23
Setting up the Development Environment (MAC)
2 Lectures 13:01

If this is your first time working with Foundation, this video will get you up and running really quickly, we will install a bunch of software, git, node, npm, foundation-cli, bower, gulp :)

Preview 07:28

If you´re already using Foundation 4 or 5 and you wanna upgrade to the latest version, follow this instructions :D

How to Upgrade to Foundation 6 if you already have Foundation 5 installed
Setting up the Development Environment (Windows)
3 Lectures 24:52

to get you up and running with Foundation, you will need Git and Node JS, let´s see how to install them in this video.

Windows 7 - Installing Foundation 6 for the very first time

If you have Foundation already installed and need to upgrade to the latest version, check this video.

Windows 7 - Upgrading to Foundation 6 if you already have Foundation 4 or 5

Windows 10 - Installing Foundation 6 for the very first time
XY Grid Basics
10 Lectures 01:07:35

Foundation 6.4 introduced the XY Grid, let's see the basics

The XY Grid

Let's create the project, and let's learn about foundation templates

Creating the Project and Foundation Templates

Let's review the Horizontal Grids

The X in the XY Grid (Horizontal Grids)

Let's review vertical grids in the xy grid

The Y in the XY Grid (Vertical Grids)

The grid frame is really special, let's see a quick example :) 

The Grid Frame

Using mixins, you can import the Styling and make a more semantic HTML!

Using SASS Mixins to make our HTML more semantic

You can align elements really easily in the XY Grid

Child Alignment From Parent with Classes

You can also align elements independently, let's see some examples

Self Child Alignment with Classes

Let's see how to align child elements with mixins

Child Alignment From Parent with Mixins

In this video, we're playing with the mixins to align self elements

Self Child Alignment with Mixins
PROJECT 1: Foundation for Sites 6 Mixins
4 Lectures 22:51

Let's learn the basics of Mixins in foundation

What's a Mixin

Let's see some of the mixins that you will find in the framework

Foundation Mixins Part 1

Second video with some mixins :)

Foundation Mixins Part 2

RemCalc is by far the most common mixin that you will be using, so let's see what is exactly

What's the REM Calc Function?
PROJECT 1: Building a Coffee Shop Website with the XY Grid
20 Lectures 01:34:18

Let's review the project that we're developing

What we're building

So let's review the Images and Photoshop Files included in this Project

The Images and PSD Files for this Project

Here's the Source Code for the Final Project, this way if you run into any problem, i hope this can help you to find a typo or something

Of course remember that you can send a question in the udemy panel :)

The Source Code for this project

So let's create the project from the CLI

Creating the Project and adding the images

Let's print the logo into the header

Adding the logo in the header

Let's add the social menu and the main menu into the project

Adding the Social and Main Menu

Let's a tagline or slogan in the header

Adding a Tagline in the header

Let's create a custom scss file that will contain all our CSS

Adding a Custom SCSS file

Let's add a image into the header

Adding the Header image with CSS

Let's add the XY Grid into our header, we're using mixins and in all the course we will use them

Applying the XY Grid Mixins in the Header

Let's style the header :)

Styling the Header

Let's add some google fonts into our project

Importing fonts from Google Fonts

Let's add some styling into the main navigation

Styling the Main Navigation

Let's add some styling and elements to make our navigation responsive

Making our Main Navigation Responsive

Let's add font awesome to print our social media icons

Adding Font Awesome

Let's print the social media icons in our social media

Printing the Social Networks Icons in the Social Menu

Let's finish the header of our website

Finishing the Header

Let's add motion ui into our nav menu!

Adding Motion UI Animations to the Main Menu

Let's start working with the footer of our site

Working with the Footer

Let's add some styling to our footer

Styling the Footer with SASS
PROJECT 1: Working with the About Us Page
5 Lectures 28:28

Time to start creating the content of the internal pages

Creating the HTML file

Let's add the HTML for this page

Adding the HTML content

Let's style the headings

Styling the Heading elements

Now we have everything in place, let's add some Styling

Styling the About Us page

Let's style the main container (the one that we're going to use in all the pages)

Styling the Main Container
PROJECT 1: Developing the Process Page
3 Lectures 15:05

So let's create the Basic Structure for the Process page

Creating the Basic Structure

So let's add the content to this new page 

Adding the HTML Content

Let's style this page with SASS, plus you will learn some nice tricks!

Styling the Page with SASS
PROJECT 1: Developing the Menu Page
8 Lectures 32:59

So let's create a new page for this website, the menu page!

Creating the Basic Structure and adding content

Let's style the top section of our menu page

Styling the Top Section of the menu page

Let's add the container for the menu

Adding the Menu and Prices container

We're almost done with the menu container, so let's add some styling

Styling the Menu container

Let's see some of the coolest features in the ZURB Template, reading JSON data

Printing JSON data with Handlebars

Let's add some styling to our menu

Styling the Menu Prices (Part 1)

Let's finish the menu!

Styling the Menu Prices (Part 2 )

Time to finish the Menu Page!

Finishing the Menu Page
PROJECT 1: Developing the Gallery Page
7 Lectures 36:20

So let's create the Gallery page

Creating the Page

Adding the Images

Styling the Top Content of the Gallery

Styling the Bottom Content of the Gallery

Adding a Modal Window

Displaying all Images in a Modal window

Let's create a class to apply some animations in our modal window with Motion UI

Adding a Motion UI animation In a Modal Window
22 More Sections
About the Instructor
Juan Pablo De la torre Valdez
4.6 Average rating
3,263 Reviews
11,615 Students
18 Courses
Freelance Web Developer and Owner of Easy-WebDev

My name is Juan Pablo De la torre Valdez, i´m from Guadalajara. Mexico.
For the last 10 years i been working with the web, i have a lot of experience in modern Web Technologies such as Foundation, Bootstrap, RWD, WordPress, Drupal, PHP, JavaScript & jQuery, HTML5, CSS3, SASS and Photoshop.

I started a company called CreativaWeb where i design and develop WordPress based websites.

I really like to design and develop websites, in the recent years i made hundreds of websites for Government, Universities, Startups and Medium-Size Companies from my city, the whole country and  from another countries.


Soy diseñador y programador web desde hace más de 10 años, tengo amplia experiencia y trabajo diariamente con tecnologías como Foundation,  Bootstrap, WordPress, Drupal, PHP,JavaScript y jQuery, HTML5, CSS3, SASS y Photoshop.

Comencé una compañia llamada CreativaWeb, donde principalmente diseño y desarrollo sitios web en WordPress.

Me gusta combinar mi trabajo en diseño y programación; en los años anteriores he hecho cientos de páginas para dependencias del Gobierno, Universidades, Pequeños y Medianos de negocios de mi ciudad, a nivel nacional y de otros países.