Kevin Powell /Sass - from beginner to real world - Master Sass Edition

  • $120 or 3 monthly payments of $40

Sass - from beginner to real world - Master Sass Edition

  • Closed

Work faster & smarter with Sass

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. 

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!

Contents

Introduction

An introduction to the course, including a brief introduction to Sass.
What is Sass anyway?
Preview
What Software do you need?
Preview
VS Code
Preview
The Community

The Setup

A look at setting up everything we need to get started with Sass
A note before we get started
Installing Sass with Sass live compiler
Preview
Sass compilers for other text editors
Using Sass live compiler and live server
Preview
Sass live compiler and live server settings
Preview
A couple of other very useful VS Code Extensions
Preview
CSS output style options
What are source maps?
Other command line alternatives (free and premium options)
Sass vs SCSS - two different ways of writting Sass
CSS vs Sass comments
Preview

Nesting

Nesting is a key feature to Sass. It's really powerful, and often abused. Let's look at how to use it properly, and some of the really cool things ways you can nest within Sass
Nesting selectors
Preview
SCSS vs Sass nesting
Preview
Nesting and the ampersand (&)
Nesting properties
Time for a challenge!
challenge_01-starting-files.zip
solution.scss

Variables

What are variables?
Preview
Variable inseption (variables inside variables)
Variables and the cascade
Naming variables
It's challenge time!
Variable Challenge Starting Files
solution.scss

Operators

A cool way to do math in your CSS!
Introduction to Operators
Operators - a use case

Building out a pricing table

Okay, so we've learned a lot of new stuff, you've nailed a few challenges, now it's time to really step things up with a more realistic example of Sass in action.
Pricing Table - Intro
Preview
Pricing Table Starting Files
Google font @import
Writing the markup
Setting up the variables
Styling it up
pricing-table-finished-version.zip

Extends

Extends are a controversial part of Sass, with a lot of people preferring not to use them, including myself. That said, they're a pretty neat feature, and if used properly, can be used well.
An introduction to Extends
Placeholders
Don't forget about the other stuff you can do
Problems with extends - 1
Problems with extends - 2

Mixins basics

Mixins are one of the things that convinced me that Sass was worth learning. I saw some basic examples of them and was blown away. In this section, I'll introduce you to mixins, and we'll look at why they are so awesome.

Once I've shown you how they work, you'll get to see if you really understood with a challenge that should force you to think a little bit :). 
Introduction to Mixins
Selectors inside mixins
Mixin arguments - part one
Mixin arguments part two - optional arguments
Mixin arguments part three: more ways to work faster
Mixin arguments part four - keeping things in the right order
Mixin Challenge - Introduction
LearnSass - mixin challenge.pdf
Mixin Challenge - Starting Files

Introduction to functions

Functions are an essential part of Sass. You don't realize it yet, but you've already been using them too!

As an introduction, we'll just look at what a function even is as well as a few of the functions that come packaged with Sass to get us started with them, and we'll revisit them later on once we've got into some of the more advanced concepts.
Introduction to Functions
Some of my favourite Sass functions

Building an e-commerce card

It's time to put everything we've learned so far together and build something! I'd suggest trying to build this all out on your own with the provided files, then seeing how I approach it, but there ain't no shame in just following along either!
The Markup
card-starting-files.zip
Getting Sass set up and running
Settin' up the variables
Creating the mixins
Styling the typography
Styling the buttons
Finishing touches
my-finished-files.zip

Lists

Lists are an essential tool for some of the more advanced things we'll be looking at soon. They aren't complicated by any means, but they can be a little strange.
Introduction to Lists
List lengths
The different types of lists
Accessing specific list items
The different ways to write lists

Interpolation

Interpolation is all about using variables in places that they aren't really meant to be used, and while that might sound strange (and be really hard to pronounce), it's super-duper useful!
What is interpolation?
Interpolation and math
Interpolation challenge.pdf

More Mixins

Another look at mixins, and some even cooler and more powerful stuff that you can do with them!
A quick refresher on Mixins
A look at variable arguments
Staying organized with variables
Variable arguments with @include
Variable arguments with @include - part two
Mixin challenge - part one.mp4
mixin challenge handout.pdf
Mixin challenge - part two.mp4
A look at @content
Using @content to make awesome media query mixins
Adding a custom size media query

@for

For loops are extremely powerful, and can be very useful. In this introduction to them, I look at a nice example of using them to create a grid system that you could use on a site, using only a few lines of SCSS to output a large amount of CSS. As we go through the different videos, I look at the basic function of a @for loop, and slowly make it better and better, adding in math and variables to really make things shine.
Intro to Sass @for
Using the $i variable
Using interpolation
Adding in some math
A little more math and a new variable
@for challenge
@for challenge.pdf

@each

Introduction to @each
A more useful example of @each
Using nested lists
Refactoring

@if, @else, @if else and the if() function

Intro to the @if directive
A more realistic example
@else directive intro
A more realistic look at @else
Using @if and @else to make a cool @mixin
Improving the mixin
Introduction to @if else
The if() function
Using the if function to write less code

Creating your own functions

We've already seen, and used, a few of the functions which come built-in with Sass. They're useful, but sometimes you need to make something yourself. This section is an introduction on how to do just that.
Introduction to custom functions
Variable number of arguments
functions - starter file for following videos.zip
Dynamically set text color
Making the output look a little better
Refactor challenge.mp4
Refactor challenge - solution.mp4

Warnings and Errors

We can add in our own warnings and errors to our mixins and functions.
Intro to debugging in Sass
The warning
Creating an error
Improving our error with interpolation
Debug

Maps

Maps are sort of like nested lists, but with key: value pairs. I avoided them for the longest time because they seemed overly complicated for things I could do with variables, but the more I learned about them, the more awesome I realized they are.
Introduction to Sass maps
How to access maps
Access maps made easier
Mapception
Accessing maps inside of other maps
Accessing maps inside of other maps made easier (plus a mini challenge)
Improving our media query mixin with a map
Maps and `@each`
Accessing maps with `@each` challenge
Accessing maps with `@each` solution
map-has-key()
A more realistic example of map-has-key()

Improving our media query mixin with map-has-key()

See if you can take what we've learned so far to improve our media query mixin
Improving our media query mixin - challenge
map-has-key-challenge.zip
The solution

Improving our media query mixin with type-of()

A look at the type-of() function
Using type-of to improve our mq mixin even more! A challenge
And making it even better!
type-of-challenge.zip

Partials and file organization

Partials are pretty much little Sass files. They allow us to break our code up into a more organized system, and then import all of the individual files into one file, which then gets compiled into our final CSS file.
Introduction to partials
Order matters when importing your partials
The 7-1 system and what I actually use (file organization)

Building out a 1-page site

Putting everything that's been covered so far to use, it's time to build out a site.
Introduction to the project
Preview
assets.zip
A look at the files
The Markup - Navigation
The Markup - Home and About
The Markup - Facts and Meals
The Markup - Testimonial and Footer
First variables and mixins
Setting up a custom function
Adding an error to the function
Setting up the typography
Setting up the general layout
Styling the navigation
Styling up the home section layout
Stlying the About section, and some trouble shooting
Creating an underline pseudo element mixin
Styling the facts and meals sections
Styling the testimonial and footer, and fixing a mistake
Adding in a media query mixin
About section - large screen layout with grid
Creating a grid mixin
Fixing up the nav and about section
Fixing up the typography + closing thoughts

5-page travel blog with Sass and CSS Grid

In this final section of the course, we're building out a 5-page site using what we've learned about Sass so far.

I strongly encourage you to check out the first few videos to see what we're dealing with, but then to try and tackle it on your own as a big final challenge.
Coming soon
Project overview
Preview

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

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.

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.

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!

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!

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!

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!