Build Advanced Responsive Websites with Foundation 6 & SASS
4.3 (249 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,305 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 4 real world project from start to finish
4.3 (249 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,305 students enrolled
Last updated 2/2017
Current price: $10 Original price: $200 Discount: 95% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 22.5 hours on-demand video
  • 32 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • 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
  • This Course covers the creation of 2 WordPress themes with Foundation 6
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


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
  • We´re gonna be writing all the HTML by ourselves, so let's get cracking!
  • If you´re learning Responsive Web Design, you can´t go wrong with ZURB Foundation!
  • If you´re trying to learn a CSS preprocessor, SASS is the way to go!
  • 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!
Students Who Viewed This Course Also Viewed
Curriculum For This Course
271 Lectures
Course Introduction
7 Lectures 27:03

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

Preview 04:04

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

Foundation 6: 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
Foundation 6: 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
Foundation 6: Up and Running with Foundation 6
4 Lectures 17:17

The Grid is one of most powerful components in the Foundation Framework, you can achieve any design!! let´s see the basics :)

Check the resources, Install the dependencies running

npm install 

in a terminal or cmd

The Foundation 6 Grid (Video 1 of 2)

The Grid is one of most powerful components in the Foundation Framework, you can achieve any design!! let´s see the basics :)

The Foundation 6 Grid (Video 2 of 2)

Align center, right, left, justify, Foundation has everything, let´s check this classes in this example

Text Utilities for Fast Development

Let´s take a look at some classes that foundation provides to create full menus really quick

Menu Classes in Foundation 6
Foundation 6: First Steps in Foundation 6
2 Lectures 06:02

Foundation 6 adds a lot of files, let´s see the basic structure so you become familiar with all the files for your project

Reviewing the file structure

Bower will install all the dependencies in your project, but sometimes you want to update your project, let´s see how in this video.

NOTE: If you installed Foundation using Yeti Launch, it doesn´t install the latest version, refer to thin link:

How to update your projects in Foundation 6
Foundation 6: Working with the Index Page
3 Lectures 10:10

We´re gonna be using a really common design pattern this days, a HTML5 Video as Background

Adding HTML5 Video to use as a Background

Let´s add our logo to the header of the website, and also a menu that will toggle the navigation

Adding the Logo and the Menu Button

Foundation provides classes for almost everything, let´s add some of those in our project

Adding some Foundation Classes to our Header
Foundation 6: Working with SASS
17 Lectures 01:43:09

If anything doesn´t exists in the settings.scss file, you can create a custom file where you can add all your styles, let´s so how in this video

Adding a Custom File for our SASS and working with our first styles

Let's add our Menu Icon :)

Working with the Menu Icon

we will add the final styles so we can finish our header in this video,

Finishing the Header

Let´s continue working with our Design, the next section it´s the Rooms section, so let´s add the basic HTML for this section.

Adding the Rooms Section so we can practice more Grids on our Project

So we have finished the HTML for the Rooms section it´s time to add some SASS.

Styling the Rooms Section with SASS

Mixins are really powerful, you can use a mixin and re-use in a lot of different places and change small things without writing everything again.

Using Mixins with Foundation 6 and SASS

Let´s finish the rooms section by adding the final styles in this section

Finishing the Rooms Section

Our design uses big images as background, a really common pattern this days, let´s see how you can add it in our design.

Adding Background Images in our Design

Foundation 6 simplifies how to use media queries, they´re more simple and powerful than ever

Working with Media Queries in SASS and Foundation 6

Let´s add some HTML in the the About Us and Gallery

Working with About Us and Gallery section on the main page

This section is really tricky and more complex than the others, let´s add some CSS to achieve this design

Styling the About Us section and Gallery with SASS

Let´s add some Media Queries to fix this section, you will see how easy it is with Foundation and SASS

Adding Media Queries in the About Us & Gallery

Let´s continue working with the next section of our Photoshop Design, let´s add a Second Image

Adding the Second Background Image in the Index

Let´s continue practicing some Foundation classes, and let´s finish the Booking Section

Working with the Booking Section

Let´s start working with the footer in our Website.

Working with the Footer in our Website and adding the basic HTML

Foundation Icons are like Font Awesome but specially designed to work with Foundation Projects, let´s add this icons into our project

Adding Foundation Icons to our Project

Let´s style the footer for our website, SASS makes this super simple

Adding the Styles to our Footer
Foundation 6: Working with Components
9 Lectures 44:14

Fundation components are powerful and easy to use, let´s add the Off-Canvas component to our project.

Adding the Off Canvas Component

Let´s add a menu inside our off-canvas, this menu will be more advanced and we´re gonna create a drilldown menu

Adding an Advanced Menu inside the Off Canvas

Let´s finish our menu by adding some SASS.

Styling the Off Canvas Menu with SASS

Reveals are what´s called Modals in other frameworks, let´s see how we can integrate them in our projects

Adding Reveal (Modal) to our Project

Let´s write a small piece of code that will make our Gallery more dynamic.

Adding Modals to all our Gallery with jQuery

Motion UI comes packed with a lot of animations for your projects, let´s add an animation to our gallery.

Implementing Motion UI to our project

Foundation also provides Forms, let´s add a form inside a modal

Adding a Form inside Reveal (Modal)

HTML input types are more mobile friendly, let´s see some of the advantages of use them in your projects

Advantage of using the new HTML5 Input types

Foundations comes with HTML5 Validation, it´s called Abide Validation and it´s really really powerful

Adding Abide Validation to our Form
Foundation 6: Working with Internal Pages
14 Lectures 01:24:28

Let´s start working with the internal pages, in this video let´s create a small template that we can re use in all our pages, then we´re gonna create the About Us page.

Creating a Template and Adding the About Us Page

Let´s add our overlay above the featured images

Adding an Overlay to our About Us Page

Let´s finish the About Us page.

Finishing the About Us Page

Let´s add a small jQuery function that will detect and set a height to our overlay based on the content

Adding a function in jQuery to resize our Overlay when Windows Resize

Let´s create our services page, this video it´s a little long, but you will learn a little flexbox, and push and pull columns!

Working with the Services Page

Foundation provides a lot of classes to align text, let´s use some of those!

Adding Classes to align text in Services

The equalizer component is simple and powerful, here´s a example where you can use it.

Using the Equalizer Component in Services

Let´s develop the Section with all our rooms

Working with the Rooms Section

Now that we have finished the Rooms section, we have to create the page for the single rooms

Working with the Single Room Template

Magellan is powerful, normally you will find this kind of components in external resources, but Foundation is so powerful that has included this functionality by default

Adding Data Magellan Component to our Single Room Section

Let´s build our contact form, of course we will take a look at some of the most powerful components in this section

Working with the Contact Us section (1 of 2)

Let´s finish our contact form, and also add some styling

Working with the Contact Us Section (2 of 2)

Let´s see how and which files we need to deploy to a real server.

Deploy to FTP Server

The Foundation Docs are one of the best that i have found on the internet. Once you have finished your first project you will find that they´re easy to read, use, and understand.

The Foundation Docs
HotelSpa Website - From HTML5 to WordPress
52 Lectures 04:14:47

Let's install WordPress Locally, i will be using MAMP, but in the next videos i will show you some great alternatives

Installing WordPress Locally

If you don't have experience Working with WordPress, bitnami it's the easier way to get started, if you have already experience with MAMP, WAMP, XAMPP or Vagrant, you can skip this video.

Downloading and Installing WordPress with Bitnami in Windows

Let's give a quick look to bitnami, how to access your project, where's your database stored and where you can find the files.

Up And Running with Bitnami in Windows

If you don't have experience Working with WordPress, bitnami it's the easier way to get started, if you have already experience with MAMP, WAMP, XAMPP or Vagrant, you can skip this video.

Downloading and Installing WordPress with Bitnami in Mac

Let's give a quick look to bitnami, how to access your project, where's your database stored and where you can find the files.

Up And Running with Bitnami in MAC

When you're developing WordPress themes, you need two files, style.css and index.php

Creating a Theme from Scratch

Let's move our project into our theme folder

Moving our Static website into the Theme Folder

If you want to add a Stylesheet into WordPress, the process is a little different than standard html, let's see how

Adding Stylesheets the WordPress Way

Also Javascript files are handled Differently let's add our Js files

Adding JavaScript Files the WordPress Way

Let's create the homepage in our backend

Creating the Homepage

Let's create the Main pages for this website

Creating the Main Pages

Let's add the Room Pages

Adding Room Pages

Let's see how you can manage your static files that belong to your theme 

Managing Static files into our theme

Let's add our App.js and link our videos

Adding our HTML5 Videos and App.js

Let's add our HTML5 Videos into WordPress

Using WordPress to host our HTML5 Video

Let's fix some CSS, most of them related to z-index

Fixing some CSS errors

Let's see how we can make our site title and slogan dynamic

Make our Slogan and Site Title Dynamic

Let's write a Query that will print all 3 rooms in the homepage

Printing the Rooms in the HomePage

Let's install a really powerful plugin: Advanced Custom Fields

Introducing Advanced Custom Fields

Let's add more fields with Advanced Custom fields

Adding more fields with Advanced Custom Fields

You can print another pages into your homepage, is really easy, let's see how in this video

Printing a Second Page in the HomePage

Let's start working with our Gallery

Working with the Main Gallery (Part 1)

Let's finish our gallery with ZURB Foundation and WordPress

Working with the Main Gallery (Part 2 and Final)

Let's see how WordPress manages Images, and how to change the default size

WordPress and the Images

Let's install a plugin and add a Contact Form

Adding a Contact Form

Let's add the final touches to our Contact Form

Final Adjustments to our Contact Form

Let's create a Menu in the footer

Creating a Menu with WordPress

Let's create a Widget into the Footer

Creating a Widget

Let's add another Widget for the Contact Information

Creating another Widget for the contact information

Let's add one more Widget for our About Us Information

Creating a Widget for the About Us information

Let's split our design into different files, first, a header and a footer file

Creating the Footer and Header files

Let's add our Main Menu, the one that uses the drilldown effect

Adding the Main Menu

Let's print the main menu in our theme

Printing the Menu in our Template

Let's make use of the Walker Nav Menu Class, this way we can add our drilldown attributes

Working with the Walker Nav menu Class

In WordPress you can create different Templates really easily, let's see the WordPress Template Hierarchy and then create some new files

Creating Page Templates

Let's add a small condition into our header

Printing the Header Content with a Conditional

In WordPress you can as many Templates as you wish, let's create a custom page template

Creating a Custom Page Template

Let's add all the pages for our services

Adding the Services

Let's write a small loop to print all the services

Querying the Database to Retrieve the Services

Our Services page is looking great, let's finish this section!

Finishing the Services Page

In this video let's continue working, now with the rooms page

Working with the Rooms Page

Let's add a link to the homepage, and a security recommendation :D

Adding a Link to the HomePage

Let's make some changes to the Medium Size Image in WordPress

Working with the Medium Image Size

Time to create another template, in this video let's create the single template page for all the rooms

Working the Rooms Single Template Page

Let's print the separator image in the rooms page

Working with the Separator Image in the Room Page

You can create a WordPress Gallery in the Content Editor, let's create one for our rooms page

Creating a Gallery in the Room Page

Our Gallery is almost done, let's give the final touches :D

Finishing the Gallery

In Ninja forms you can create as many Contact Forms as you want, let's add another one

Creating a New Contact Form with Ninja Forms

Let's add the proper labels and values in our contact form

Customizing the Contact Form

Let's write a little CSS in our Contact Form

Styling the Contact Form

Let's finish our contact form and check a really cool feature that Ninja Forms provides

Finishing the Contact Form and checking form submissions

Let's review which files you can remove and which files you should keep

What files should i Upload to my server?
13 More Sections
About the Instructor
Juan Pablo De la torre Valdez
4.6 Average rating
2,771 Reviews
10,179 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.