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.2 (180 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.
965 students enrolled
Sale Ends Today!
92% off
Take This Course
  • Lectures 271
  • Length 22.5 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 7/2015 English

Course Description


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.

What are the requirements?

  • 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

What am I going to get from this course?

  • 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

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!

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Course Introduction

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


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


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


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


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


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

The Assets for this Course
Section 2: Foundation 6: Setting up the Development Environment (MAC)

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


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

Section 3: Foundation 6: Setting up the Development Environment (Windows)

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.


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

Windows 10 - Installing Foundation 6 for the very first time
Section 4: Foundation 6: Up and Running with Foundation 6

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 Grid is one of most powerful components in the Foundation Framework, you can achieve any design!! let´s see the basics :)


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


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

Section 5: Foundation 6: First Steps in Foundation 6

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


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:

Section 6: Foundation 6: Working with the Index Page

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


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


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

Section 7: Foundation 6: Working with SASS

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


Let's add our Menu Icon :)


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


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.


So we have finished the HTML for the Rooms section it´s time to add some 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.


Let´s finish the rooms section by adding the final styles in this 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.


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


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


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


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


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


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


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


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


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

Section 8: Foundation 6: Working with Components

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


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


Let´s finish our menu by adding some SASS.


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


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


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


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


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


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

Section 9: Foundation 6: Working with Internal Pages

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.


Let´s add our overlay above the featured images


Let´s finish 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


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!


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


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


Let´s develop the Section with all our rooms


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


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


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


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


Let´s see how and which files we need to deploy to a real 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.

Section 10: HotelSpa Website - From HTML5 to WordPress

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


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.


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.


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.


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.


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


Let's move our project into our theme folder


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


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


Let's create the homepage in our backend


Let's create the Main pages for this website


Let's add the Room Pages


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


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


Let's add our HTML5 Videos into WordPress


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


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


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


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


Let's add more fields with Advanced Custom fields


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


Let's start working with our Gallery


Let's finish our gallery with ZURB Foundation and WordPress


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


Let's install a plugin and add a Contact Form


Let's add the final touches to our Contact Form


Let's create a Menu in the footer


Let's create a Widget into the Footer


Let's add another Widget for the Contact Information

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Juan Pablo De la torre Valdez, 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.

Ready to start learning?
Take This Course