Modern Web Development with SASS, Gulp, NPM & Web Workflows
4.5 (73 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.
565 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.5 (73 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.
565 students enrolled
Last updated 1/2017
English
Current price: $10 Original price: $95 Discount: 89% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 5 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
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
Requirements
  • 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
Description

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
Students Who Viewed This Course Also Viewed
Curriculum For This Course
59 Lectures
04:59:20
+
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
05:17
+
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)
08:11

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
11:43

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

Adding Gulp Watch
04:57

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

Installing Auto Prefixer
06:17

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

Copying HTML Files from one folder to another
06:05

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

Cleaning HTML Files
05:28

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

Moving JavaScript files
05:33

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

Concatenating different javascript files into one
04:00

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

Adding Browserify, Bootstrap, Mustache and jQuery
05:39

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

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

EXAMPLE: Testing Bootstrap & jQuery with a Carousel
05:32

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

Moving Bootstrap Fonts into our project
04:54

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

Example: JSON and Mustache Templates (Pt 1)
04:21

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

Example: JSON and Mustache Templates (Pt 2)
05:35

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

Adding Image Minification
06:51

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

Let's see how you can minify JavaScript with Gulp

Adding JavaScript Minification
03:01

Let's see how you can minify CSS with Gulp

Adding CSS Minification
05:01

Let's see how you can minify HTML with Gulp

Adding HTML Minification
03:24

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

Adding a Production Task
02:19

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

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

Let's clone our web Workflow from the previous Chapter

Cloning the Workflow
06:33

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

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

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

Working with SASS Variables
05:37

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

Let's continue adding more variables and comments in SASS

Adding more variables and Comments in SASS
04:46

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

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

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

Working with the Typography
05:21

Let's add some code to the layout file

Working with the Layout File
05:07

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

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

Modifying our Gulp File
02:12

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

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

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

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


Adding the Border Box Mixin
05:05

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

Adding the Border Radius Mixin
03:14

Let's add the Styles for the Main Navigation

Working with the Main Navigation
12:01

Let's add a Mixin for the Background

Adding a Mixin for Background Images
04:53

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

Adding the Background Image Classes
03:28

Let's use the Background Image Mixin that we created

Applying the BG Image Mixin
04:06

Let's add the popular Card Component to our Project

Adding the Card Design to our Site
05:38

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

Creating a Mixin for Buttons
04:09

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

Applying the Button Mixin
03:11

Let's use again our mixin for background images

Working with the Second Background Image
01:29

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

Adding a Custom Grid
07:49

Let's create a small Grid for our images

Working with a Image Grid
06:42

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

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

Styling the Services Section
04:49

Let's write some SCSS to our footer

Working with the Footer
04:40

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

Extending a Class
03:07

Let's push the final Project to Github

Pushing the project to Github
01:46
About the Instructor
Juan Pablo De la torre Valdez
4.6 Average rating
3,234 Reviews
11,478 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.