Sass - from beginner to real world - Master Sass Edition by Kevin Powell
Enrollment is closed

Sass - from beginner to real world - Master Sass Edition

Work faster & smarter with Sass
Enrollment is closed

Overview

Sass has become an essential language to learn for front-end developers. It helps you write your code faster, pull off things that sometimes seem like magic, and it’s also a part of many modern workflows.

This course is going to teach you how to use Sass, how to integrate it into your workflow and push you with challenges, helping you become a better front-end developer.

This course is about more than just Sass

This course also doesn’t solely focus on Sass as a language. Understanding the language itself is important, but it presents us with an opportunity to change how we work on our projects. This course teaches you not only the language of Sass but examines how to use it in the real world as well.

It also dives into intermediate and advanced level CSS. Sass is, at the end of the day, a fancy way to write CSS after all. So how could we learn Sass really well if we don’t also get into some higher level CSS stuff along the way?

We’ll look at putting together a full, multi-page website, where I’ll examine file structure and general workflow concepts, as well as get into class naming conventions for our CSS, and more, along the way.

This course isn’t just about learning how to use Sass, it’s about learning how to be a better front-end developer.

Who this course is for

  • People who know HTML & CSS and are ready to take the next step
  • People who have started using Sass, but want to raise their game to the next level with a deeper understanding of how it works and how it fits into a modern workflow

The lessons in Learn Sass made my workflow so much simpler. I am not just learning theory, I am learning practical things I can use now.
Adrian Simpson

The Community

By purchasing this course,you'll get access to a private channel in my community devoted to this course.

The community is a Discord channel where like-minded people can chat, ask questions and network, learn together, as well as just hang out.

It has text, audio and video chat, including screen sharing which can be very useful for trouble shooting problems that you may be having. You'll have access to a channel that is only for members of the course where you can ask me questions if ever you get stuck, or need help with something.

Who's Teaching the course?

My name is Kevin and most of the time you can find me over on YouTube where I teach over 50,000 subscribers HTML, CSS and occasionally some JS along the way.

I'm not only on YouTube though, I also teach in a physical classroom, and bring my teaching experience to this courses. 
Kevin's course is much more than just Sass, it's a dive into the modern web development process, a great reference for good practices, and an awesome way to learn advanced CSS.

Perfectly paced with a masterful balance of theory and real-wold applications and challenges, by the end of it you'll feel confident on coding anything the designers throw at you.
Facundo Corradini

Pre-registration period discount

The course offically launches on February 1, 2019. If you register for it between now and the 1st, you'll reserve your place and get a very nice discount.

Once the course launches on Feb 1, the price will jump from $90 to $120. 
Buy Now

What's included in this course?

This course goes into what Sass is and how it works, looking specifically at with over 150 videos and 10 hours of video, looking at:
  • What is Sass and how to install it
  • SCSS / Sass
  • Nesting, Variables, Extends, and Opoerators
  • Mixins
  • Using existing Sass functions
  • Creating custom Sass functions
  • Lists, maps, and Interpolation
  • Control directives
  • File structure
  • Building out several components, as well a a single-page, and a 5-page website
  • Challenges that help reinforce what you've learned
  • Access to a private channel in my community where you can ask for help, advice, and feedback!

If you'd like a bit more detail on what's included, scroll down and you'll find a complete list of all the videos and files that are included.
This covers covers all that Sass has to offer, but if you think it's a little too much for you to start with, there is a Sass Essentials edition of the course available too!
Check out the Sass Essentials Edition

What's included?

Video Icon 139 videos File Icon 18 files Text Icon 6 text files

Contents

Introduction
What is Sass anyway?
6 mins
What Software do you need?
1 min
VS Code
The Community
6 mins
The Setup
A note before we get started
Installing Sass with Sass live compiler
4 mins
Sass compilers for other text editors
Using Sass live compiler and live server
2 mins
Sass live compiler and live server settings
4 mins
A couple of other very useful VS Code Extensions
2 mins
CSS output style options
4 mins
What are source maps?
3 mins
Other command line alternatives (free and premium options)
2 mins
Sass vs SCSS - two different ways of writting Sass
3 mins
CSS vs Sass comments
2 mins
Nesting
Nesting selectors
3 mins
SCSS vs Sass nesting
3 mins
Nesting and the ampersand (&)
8 mins
Nesting properties
3 mins
Time for a challenge!
2 mins
challenge_01-starting-files.zip
87.1 KB
solution.scss
769 Bytes
Variables
What are variables?
4 mins
Variable inseption (variables inside variables)
4 mins
Variables and the cascade
3 mins
Naming variables
5 mins
It's challenge time!
3 mins
Variable Challenge Starting Files
2.4 KB
solution.scss
1.17 KB
Operators
Introduction to Operators
5 mins
Operators - a use case
3 mins
Building out a pricing table
Pricing Table - Intro
1 min
Pricing Table Starting Files
115 KB
Google font @import
Writing the markup
6 mins
Setting up the variables
11 mins
Styling it up
31 mins
pricing-table-finished-version.zip
10.6 KB
Extends
An introduction to Extends
4 mins
Placeholders
2 mins
Don't forget about the other stuff you can do
2 mins
Problems with extends - 1
2 mins
Problems with extends - 2
4 mins
Mixins basics
Introduction to Mixins
4 mins
Selectors inside mixins
4 mins
Mixin arguments - part one
3 mins
Mixin arguments part two - optional arguments
3 mins
Mixin arguments part three: more ways to work faster
4 mins
Mixin arguments part four - keeping things in the right order
3 mins
Mixin Challenge - Introduction
6 mins
LearnSass - mixin challenge.pdf
103 KB
Mixin Challenge - Starting Files
782 Bytes
Introduction to functions
Introduction to Functions
2 mins
Some of my favourite Sass functions
7 mins
Building an e-commerce card
The Markup
6 mins
card-starting-files.zip
313 KB
Getting Sass set up and running
3 mins
Settin' up the variables
5 mins
Creating the mixins
9 mins
Styling the typography
7 mins
Styling the buttons
6 mins
Finishing touches
8 mins
my-finished-files.zip
154 KB
Lists
Introduction to Lists
1 min
List lengths
2 mins
The different types of lists
1 min
Accessing specific list items
1 min
The different ways to write lists
3 mins
Interpolation
What is interpolation?
3 mins
Interpolation and math
1 min
Interpolation challenge.pdf
26.6 KB
More Mixins
A quick refresher on Mixins
4 mins
A look at variable arguments
4 mins
Staying organized with variables
2 mins
Variable arguments with @include
2 mins
Variable arguments with @include - part two
5 mins
Mixin challenge - part one.mp4
2 mins
mixin challenge handout.pdf
34.5 KB
Mixin challenge - part two.mp4
3 mins
A look at @content
5 mins
Using @content to make awesome media query mixins
4 mins
Adding a custom size media query
2 mins
@for
Intro to Sass @for
2 mins
Using the $i variable
1 min
Using interpolation
2 mins
Adding in some math
2 mins
A little more math and a new variable
2 mins
@for challenge
2 mins
@for challenge.pdf
35.2 KB
@each
Introduction to @each
2 mins
A more useful example of @each
1 min
Using nested lists
4 mins
Refactoring
4 mins
@if, @else, @if else and the if() function
Intro to the @if directive
4 mins
A more realistic example
3 mins
@else directive intro
1 min
A more realistic look at @else
3 mins
Using @if and @else to make a cool @mixin
4 mins
Improving the mixin
3 mins
Introduction to @if else
4 mins
The if() function
2 mins
Using the if function to write less code
3 mins
Creating your own functions
Introduction to custom functions
4 mins
Variable number of arguments
3 mins
functions - starter file for following videos.zip
898 Bytes
Dynamically set text color
7 mins
Making the output look a little better
2 mins
Refactor challenge.mp4
2 mins
Refactor challenge - solution.mp4
4 mins
Warnings and Errors
Intro to debugging in Sass
1 min
The warning
4 mins
Creating an error
2 mins
Improving our error with interpolation
2 mins
Debug
4 mins
Maps
Introduction to Sass maps
4 mins
How to access maps
3 mins
Access maps made easier
5 mins
Mapception
3 mins
Accessing maps inside of other maps
2 mins
Accessing maps inside of other maps made easier (plus a mini challenge)
5 mins
Improving our media query mixin with a map
5 mins
Maps and `@each`
2 mins
Accessing maps with `@each` challenge
7 mins
Accessing maps with `@each` solution
5 mins
map-has-key()
3 mins
A more realistic example of map-has-key()
3 mins
Improving our media query mixin with map-has-key()
Improving our media query mixin - challenge
1 min
map-has-key-challenge.zip
773 Bytes
The solution
2 mins
Improving our media query mixin with type-of()
A look at the type-of() function
2 mins
Using type-of to improve our mq mixin even more! A challenge
3 mins
And making it even better!
4 mins
type-of-challenge.zip
978 Bytes
Partials and file organization
Introduction to partials
5 mins
Order matters when importing your partials
4 mins
The 7-1 system and what I actually use (file organization)
10 mins
Building out a 1-page site
Introduction to the project
2 mins
assets.zip
14.4 MB
A look at the files
3 mins
The Markup - Navigation
5 mins
The Markup - Home and About
6 mins
The Markup - Facts and Meals
5 mins
The Markup - Testimonial and Footer
5 mins
First variables and mixins
7 mins
Setting up a custom function
3 mins
Adding an error to the function
2 mins
Setting up the typography
9 mins
Setting up the general layout
4 mins
Styling the navigation
5 mins
Styling up the home section layout
4 mins
Stlying the About section, and some trouble shooting
5 mins
Creating an underline pseudo element mixin
6 mins
Styling the facts and meals sections
8 mins
Styling the testimonial and footer, and fixing a mistake
11 mins
Adding in a media query mixin
9 mins
About section - large screen layout with grid
9 mins
Creating a grid mixin
8 mins
Fixing up the nav and about section
3 mins
Fixing up the typography + closing thoughts
5 mins
5-page travel blog with Sass and CSS Grid
Coming soon
Project overview
4 mins
Closing thoughts
I hope you enjoyed the course, plus a few other things
Future Updates

Take your front-end skills to the next level

Do you want to learn how to make some kick-ass websites? Between teaching in a physical classroom, my YouTube channel, and the premium courses available here, I teach people how to make the web, and how to make it look good while they are at it.

FAQ

Do I need any experience with Sass before starting this course?

No! This course is designed assuming you have never used it before.

With that said, it does assume that you're comfortable with HTML & CSS already. I don't go into a lot of detail about the CSS I'm writing, focusing more on the Sass I'm writing and looking at the output that it's producing. You may happen to learn some new CSS stuff along the way, but I assume that you're relatively comfortable with it already.

I've been using Sass for awhile now, is it worth it for me to take this course?

It really depends on how advanced you are. If you are already using Sass, you can probably skip some of the early content, but still get a lot of value from the later chapters. If ever you feel like it isn't bringing you enough value, there is a 30-day, no questions asked, money back guarantee!

There are other Sass courses out there, why should I pick this one?

Many of the courses out there simple look at all the Sass functionality, and skip over implementing it in real projects, or they fail to really dive deep into some of the more useful features of Sass. In this course, I not only look at how Sass works, but I look at how it works in a modern workflow, how it can help you work faster and smarter, as well as using challenges throughout the course to ensure that you are actually learning, and not just blindly following along.

On top of this, we look at some real-world type projects, with the final one being a multipage website that we'll build out together using CSS Grid!

On top of this, you also get access to a private channel in my community where you can ask me, and others enrolled in the course, for help or clarification if ever it's needed!

How long will it take me to complete this course?

That's really up to you! You can work through the content at your own pace, go back over lessons, or speed through it. You have access to the course forever!

What if I decide this course isn't for me?

It happens, so you've got nothing to worry about. Get in touch with me within 30 days, and I'll gladly issue you a full refund!

How much content is there?

There are over 150 videos totalling more than 10 hours of lessons. Sass is a big topic!

On top of that there are challenges where I give you a problems to solve, based on what we've covered so far in the course.