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.5 (154 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.
767 students enrolled
$19
$95
80% off
Take This Course
  • Lectures 222
  • Length 18.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

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

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

About This Course

Published 7/2015 English

Course Description

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.

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!

What are the requirements?

  • We´re gonna write all the HTML, CSS and JS by ourselves
  • Also we´re gonna install all the tools need such as git, NodeJS and Ruby
  • The Only thing that you need is a Text Editor, i´m gonna be using Sublime Text 3

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 3 Real World Projects from start to finish

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

Curriculum

Section 1: Course Introduction
04:04

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

05:36

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

05:41

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

04:41

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

03:17

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

02:27

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
Preview
01:17
Section 2: Foundation 6: Setting up the Development Environment (MAC)
07:28

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

05:33

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

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.

04:23

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
10:41
Section 4: Foundation 6: Up and Running with Foundation 6
06:26

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

03:35

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

03:59

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

03:17

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

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

01:59

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

Section 6: Foundation 6: Working with the Index Page
05:00

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

02:35

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

02:35

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

Section 7: Foundation 6: Working with SASS
09:13

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

08:13

Let´s add some SASS to our header

08:53

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

05:24

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.

04:40

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

05:38

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.

05:22

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

04:23

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

06:02

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

06:35

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

05:18

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

05:28

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

01:59

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

04:11

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

06:48

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

06:04

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

08:58

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

Section 8: Foundation 6: Working with Components
04:45

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

03:45

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

04:25

Let´s finish our menu by adding some SASS.

03:33

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

07:16

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

04:15

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

05:02

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

02:35

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

08:38

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

Section 9: Foundation 6: Working with Internal Pages
05:02

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.

05:08

Let´s add our overlay above the featured images

06:32

Let´s finish the About Us page.

03:06

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

09:59

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!

01:55

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

04:25

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

08:55

Let´s develop the Section with all our rooms

08:50

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

04:37

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

07:52

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

07:13

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

08:28

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

02:26

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: Project: Single Page Website with Flex-Grid, Gulp, SASS and the ZURB Template
06:39

Let´s create our project, it´s gonna be called FrontEndStore!

06:20

Let´s take a look at the file structure of the ZURB Template

03:25

Panini will compile your HTML and give you the functionality to add partials in your design, let´s work with this amazing tool.

03:48

Thanks to handlebars, we can create and print variables in our html, let´s see some examples.

07:27

Let´s see how you can read a JSON file or a YML file.

02:21

This is the PSD file for this section.

For this you will need two fonts, Noto Sans and Open Sans, and Photoshop CS6 at least.

I have added the design in a JPG file, so you can check without any worries.

If you don´t have Photoshop, don´t worry! you don´t it to finish the course!

04:57

By default, Foundation comes with a lot of CSS "hacks" to meet the correct functionality of the grid, so before you start working with the flexbox classes, you need to enable it, let´s see how in this video.

05:25

Let´s start working with this project, let´s add our logo in the header!

06:47

Let´s continue working, we´re gonna create a partial, then, we´re gonna create our Main Navigation.

08:41

Let´s see some of the methods that we have available thanks to Foundation and JavaScript to change the orientation of our nav.

06:04

Let´s add Orbit Slider to our design.

02:52

So we have created our slider, in this video let´s add some controls.

04:28

Motion UI has a lot of animations, let´s integrate it with our Slider.

03:51

It´s time to start working with the CSS for this site. We´re gonna create a new stylesheet, this will contain all of our styles, if something doesn´t exists in the settings.scss you can added it to the custom.scss and everything will work fine :)

06:41

Let´s add some styles to the desktop version of the main navigation.

06:18

Let´s style the responsive version for this website.

03:31

Let´s add some CSS to this Slider, and check the variables that we have available to make some changes, if you don´t have a variable, don´t worry! you can always create your SASS in the Custom file.

06:21

Let´s work with the About Us section, plus we will check some Flex Grid classes for this.

04:56

Let´s add foundation icons to our Project.

Note: I forgot something, so head over to the next video to check where you have to add the libraries and CSS files.

04:04

So i forgot this video, but  it´s really important, where to add your CSS and libraries, let´s see how and where :)

06:52

Let´s add some SASS to our About Us section.

06:20

Let´s add our social menu in the top of our website, let´s position it correctly with some flex grid classes

05:28

Let´s show our products with a JSON file, you will see how easy is to parse the content of any JSON in your HTML.

06:54

You have already printed our products, let´s add some foundation classes to make them look great!

10:12

We have parsed our Products, we have added some HTML, it´s time to add some CSS!

06:42

Let´s continue working this design, now we´re gonna start working with the testimonials section

04:35

Let´s add some styling to this second Slider, and check for the variables that our settings.scss provides

06:46

Flexbox and Foundation have some classes to reorder elements based on screen size, let´s so how powerful and flexible they´re in this video.

07:48

Let´s create a form with some Foundation Classes.

Note: I Know there´s a lot of code for this video, so in the files for this lecture you will find a link to a public gist.

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