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
English
Current price: $10 Original price: $200 Discount: 95% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 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
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
Description

COURSE UPDATE DECEMBER 2016:

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

COURSE UPDATE AUGUST 2016:

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

COURSE UPDATE MAY 2016:

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
22:43:20
+
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
03:17

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
05:33
+
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
09:48

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
04:23

Windows 10 - Installing Foundation 6 for the very first time
10:41
+
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)
06:26

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

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

Text Utilities for Fast Development
03:59

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

Menu Classes in Foundation 6
03:17
+
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
04:03

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:

http://foundation.zurb.com/forum/posts/37167-yeti-updates

How to update your projects in Foundation 6
01:59
+
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
05:00

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
02:35

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

Adding some Foundation Classes to our Header
02:35
+
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
09:13

Let's add our Menu Icon :)

Working with the Menu Icon
08:13

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

Finishing the Header
08:53

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
05:24

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

Styling the Rooms Section with SASS
04:40

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
05:38

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

Finishing the Rooms Section
05:22

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
04:23

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
06:02

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

Working with About Us and Gallery section on the main page
06:35

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
05:18

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
05:28

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
01:59

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

Working with the Booking Section
04:11

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

Working with the Footer in our Website and adding the basic HTML
06:48

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
06:04

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

Adding the Styles to our Footer
08:58
+
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
04:45

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
03:45

Let´s finish our menu by adding some SASS.

Styling the Off Canvas Menu with SASS
04:25

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
03:33

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

Adding Modals to all our Gallery with jQuery
07:16

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
04:15

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

Adding a Form inside Reveal (Modal)
05:02

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
02:35

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

Adding Abide Validation to our Form
08:38
+
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
05:02

Let´s add our overlay above the featured images

Adding an Overlay to our About Us Page
05:08

Let´s finish the About Us page.

Finishing the About Us Page
06:32

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
03:06

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
09:59

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

Adding Classes to align text in Services
01:55

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

Using the Equalizer Component in Services
04:25

Let´s develop the Section with all our rooms

Working with the Rooms Section
08:55

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

Working with the Single Room Template
08:50

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
04:37

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

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

Working with the Contact Us Section (2 of 2)
07:13

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

Deploy to FTP Server
08:28

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
02:26
+
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
08:03

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
03:30

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
04:13

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
03:28

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
03:24

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

Creating a Theme from Scratch
06:08

Let's move our project into our theme folder

Moving our Static website into the Theme Folder
03:13

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
06:32

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

Adding JavaScript Files the WordPress Way
05:33

Let's create the homepage in our backend

Creating the Homepage
02:29

Let's create the Main pages for this website

Creating the Main Pages
03:55

Let's add the Room Pages

Adding Room Pages
03:48

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

Managing Static files into our theme
02:52

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

Adding our HTML5 Videos and App.js
02:53

Let's add our HTML5 Videos into WordPress

Using WordPress to host our HTML5 Video
04:18

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

Fixing some CSS errors
05:34

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

Make our Slogan and Site Title Dynamic
03:59

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

Printing the Rooms in the HomePage
09:05

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

Introducing Advanced Custom Fields
05:33

Let's add more fields with Advanced Custom fields

Adding more fields with Advanced Custom Fields
06:10

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
03:23

Let's start working with our Gallery

Working with the Main Gallery (Part 1)
06:08

Let's finish our gallery with ZURB Foundation and WordPress

Working with the Main Gallery (Part 2 and Final)
09:23

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

WordPress and the Images
04:16

Let's install a plugin and add a Contact Form

Adding a Contact Form
05:41

Let's add the final touches to our Contact Form

Final Adjustments to our Contact Form
07:51

Let's create a Menu in the footer

Creating a Menu with WordPress
03:54

Let's create a Widget into the Footer

Creating a Widget
05:25

Let's add another Widget for the Contact Information

Creating another Widget for the contact information
02:04

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

Creating a Widget for the About Us information
03:30

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

Creating the Footer and Header files
03:17

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

Adding the Main Menu
02:53

Let's print the main menu in our theme

Printing the Menu in our Template
04:13

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
07:13

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
06:42

Let's add a small condition into our header

Printing the Header Content with a Conditional
06:56

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

Creating a Custom Page Template
05:07

Let's add all the pages for our services

Adding the Services
05:46

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

Querying the Database to Retrieve the Services
03:19

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

Finishing the Services Page
06:21

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

Working with the Rooms Page
07:35

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

Adding a Link to the HomePage
04:29

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

Working with the Medium Image Size
05:35

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
04:26

Let's print the separator image in the rooms page

Working with the Separator Image in the Room Page
05:03

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
05:38

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

Finishing the Gallery
03:08

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
03:10

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

Customizing the Contact Form
04:50

Let's write a little CSS in our Contact Form

Styling the Contact Form
04:02

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

Finishing the Contact Form and checking form submissions
07:04

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

What files should i Upload to my server?
01:45
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.