Modern Web Development with SASS, Gulp, NPM & Web Workflows
4.4 (81 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.
631 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Modern Web Development with SASS, Gulp, NPM & Web Workflows to your Wishlist.

Add to Wishlist

Modern Web Development with SASS, Gulp, NPM & Web Workflows

You want to be a more efficient Web Developer? Add SASS, Gulp, NPM to your toolkit with this 100% Practical Course!
4.4 (81 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.
631 students enrolled
Last updated 1/2017
Current price: $12 Original price: $95 Discount: 87% off
4 days left at this price!
30-Day Money-Back Guarantee
  • 5 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion

Training 5 or more people?

Get your team access to Udemy's top 2,000 courses anytime, anywhere.

Try Udemy for Business
What Will I Learn?
  • Understand SASS to create amazing websites
  • Host your projects in Github
  • Create a file to manage dependencies for future projects
  • Create a Gulp workflow to handle the JavaScript Automation Tasks
View Curriculum
  • Install Node, NPM, Git and SASS in your computer
  • Manage Project Dependencies with NPM
  • Use this dependencies with Gulp
  • JavaScript Automation with Gulp
  • Use SASS (SCSS) to create a Complete Website
  • Understand SASS Key Components like variables, partials, directives, and More
  • Create a Custom Responsive Grid!
  • Create a Card Component
  • Understand Mixins and Extend SASS Classes

If you have ever wonder how you can become more efficient when developing a website, this course is for you!

You will learn JavaScript Automation with Gulp, you will create a Gulp workflow that has the next functionalities:

  • SASS (SCSS) Compiler
  • Web Server 
  • Live Reload
  • Autoprefixr
  • Browserify
  • Partials (Like PHP Includes but using HTML)
  • And Minification for Images, HTML, CSS and JavaScript

Also you will Learn SASS and you will basic and Advanced Features of this CSS with Super Powers!

You Will learn how to:

  • Create Variables
  • Create Partials
  • Directives in SASS
  • How to create your Custom Responsive Grid
  • Extend Classes
  • And a Lot More!

Also, You will learn how to host your projects in Github the most popular Free Repository

We're building a COMPLETE PROJECT from start to finish!

Who is the target audience?
  • If you have built some websites using CSS and HTML and you want to give the next step, this course is for you
  • If you want to use JavaScript Automation for the most common Web Development Tasks like Servers, Partials, Image, HTML, CSS and JavaScript Minification this course is for you
Compare to Other Sass Courses
Curriculum For This Course
59 Lectures
Course Introduction
2 Lectures 10:09

Let's review the Gulp Workflow that we are building for this course

Preview 04:52

Let's review the final SASS Project for this Course!

What we're building - SASS Project
Setting up a Development Environment in Mac and Windows
2 Lectures 09:57

Let see how we can install NPM, Node, Gulp and Git in Windows 10

Preview 04:37

Let's see how you can install the development environment in Mac

Preview 05:20
Developing a Gulp Workflow from Scratch
23 Lectures 02:11:46

Let's create a Repository in Git, so we can save our work and re use this Workflow for upcoming projects

Preview 04:46

Let's install Gulp and Gulp SASS as dependencies for this project

Preview 07:20

Let's see how you add a Task in your Gulpfile

Adding our first task (SASS compiler)

BrowserSync will change the way you work! let's see how you can install it in you Workflow

Installing BrowserSync and Creating the Gulp Task

Let's see how you can add live reload when you make any change to your files

Adding Gulp Watch

Prefixing things is boring! so let's install a Node Module that will prefix our CSS when needed

Installing Auto Prefixer

Let's see how you can copy files from one folder to another

Copying HTML Files from one folder to another

Cleaning unused or remove files is important, so let's see how you can integrate this in our workflow

Cleaning HTML Files

Let's see how you can move JavaScript files from one folder into  another

Moving JavaScript files

Let's see how you can concatenate different files into one

Concatenating different javascript files into one

Let's add browserify so you can import modules like Bootstrap, Mustache or jQuery

Adding Browserify, Bootstrap, Mustache and jQuery

Sometimes you want to import a CSS library, and your code is already SCSS, let's see how you can concatenate this together

Joining CSS and SCSS files into one

Let's test if our project is working before we continue

EXAMPLE: Testing Bootstrap & jQuery with a Carousel

There's one final peace in our Bootstrap Project, let's see how you can move the Fonts 

Moving Bootstrap Fonts into our project

It's time to test if Mustache is working, let's create a small project

Example: JSON and Mustache Templates (Pt 1)

Let's finish the  project that we started in the previous video

Example: JSON and Mustache Templates (Pt 2)

Let's see how you can use gulp to minify your images

Adding Image Minification

Partials are like PHP Includes, so you don't have to copy the same code in different files, they're simply great!

Adding HTML partials

Let's see how you can minify JavaScript with Gulp

Adding JavaScript Minification

Let's see how you can minify CSS with Gulp

Adding CSS Minification

Let's see how you can minify HTML with Gulp

Adding HTML Minification

Let's add a task that executes the other 3 tasks for production

Adding a Production Task

Let's push everything to Github, so you can re use this for future projects

Pushing Everything to GitHub
Working with SASS
32 Lectures 02:27:28

Let's clone our web Workflow from the previous Chapter

Cloning the Workflow

We're Building a Complete Project, so let's copy some of the images, this are available as resources in this lecture

Moving the Images for this Project

Let's copy the HTML to develop this project, this way we can focus only in the SCSS part

Copying the HTML for this Website

The first component in our SASS learning are Variables, so let's see how you create this :)

Working with SASS Variables

SASS Provides a lot of functions, let's see some of the functions that you can use when working with colors

Using Darken and Lighten Built In Functions in SASS

Let's continue adding more variables and comments in SASS

Adding more variables and Comments in SASS

a Map is like an Array, it contains a lot of content in a single variable, let's create 2 of those

Creating SASS Maps

One of the advantages of using SASS is that you can split your files into different modules, so let's do that in this video

Separating our SCSS files into different small files

Let's create a Typography file, and add some content

Working with the Typography

Let's add some code to the layout file

Working with the Layout File

Adding Google Fonts it's something that i use in all my websites, let's see how you can import this the SASS way

Adding a Google Font

Since we created a bunch of different SCSS files you need to modify the Workflow a little

Modifying our Gulp File

Let's create the grid file, in upcoming videos we're building a complete grid like the ones that you find in Bootstrap or Foundation

Adding a Grid File

One of the most powerful features in SASS is the use of mixins, so let's see how you can create, and use mixins

Working with Mixins and Accessing Map Values

Let's add some of the most popular Mixins that you will need in your everyday work, let's start with the Clearfix

Adding the Clearfix Mixin

Let's continue working, and let's add the Border Box Mixin

Adding the Border Box Mixin

Border Radius are one of my favorite CSS3 Features, so let's add one mixin for those

Adding the Border Radius Mixin

Let's add the Styles for the Main Navigation

Working with the Main Navigation

Let's add a Mixin for the Background

Adding a Mixin for Background Images

We have some classes for the Background, let's add the CSS code 

Adding the Background Image Classes

Let's use the Background Image Mixin that we created

Applying the BG Image Mixin

Let's add the popular Card Component to our Project

Adding the Card Design to our Site

Let's create a Mixin for buttons, so we can re use this one in all our website

Creating a Mixin for Buttons

Time to use the new Mixin that we created in the last video

Applying the Button Mixin

Let's use again our mixin for background images

Working with the Second Background Image

Let's continue Working, and it's time to develop our custom Grid

Adding a Custom Grid

Let's create a small Grid for our images

Working with a Image Grid

Styling Tables is something that's a little confusing, so let's see how you can add SASS to HTML Tables

Styling Tables with SASS

We're almost done, time to add some SASS to our services section

Styling the Services Section

Let's write some SCSS to our footer

Working with the Footer

Let's see how you can re use and inherit the values from one class to another with @extend

Extending a Class

Let's push the final Project to Github

Pushing the project to Github
About the Instructor
Juan Pablo De la torre Valdez
4.5 Average rating
3,846 Reviews
13,650 Students
19 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.