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

  • $45

Sass - from beginner to real world - Sass Essentials 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 the most common features of 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?

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 are brand new to Sass and who want to learn what is is, how it works, and to start using in their projects today

What's included in this course?

This course goes into what Sass is and how it works, with 51 videos and over 3.5 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
  • File structure
  • Building out several components
  • 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.
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.
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

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. 

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 $35 to $45. 

Feel like you'd like more?

This course is the Sass Essentials edition of the course, and covers all the things you need to get started kickin' butt with Sass, but if you'd like a deeper dive into Sass' more advanced functions and a look into some more projects, the Master Sass edition might be what you are after, with more than 150 videos and over 10 hours of content!

Contents

Introduction

A quick introduction to the course and the software that you'll be needing
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

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!
nesting-challenge-starting-files.zip
solution.scss

Variables

What are variables?
Preview
Variable inception (variables inside variables)
Variables and the cascade
Naming variables
It's challenge time!
Variable Challenge Starting Files
variable-challenge-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

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!
card-starting-files.zip
The Markup
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

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.
Quick note
Introduction to partials
Order matters when importing your partials
The 7-1 system and what I actually use (file organization)

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 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 also help reinforce your learning with 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!

You also get access to a private channel in my Community where you can ask me and others who've enrolled in the course questions if ever you get stuck, or have any issues.

What if at one point I'd like to upgrade to the Master Sass Edition?

There is no problem at all, and what you've paid for this course will be credited toward your purchase of the that version of the course :)

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!

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, but chances are that if you're already comfortable with the basics of Sass and are looking to step up your game, the Master Sass Edition is more what you are after.

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 much content is there?

There are 51 videos totalling more than 3.5 hours of lessons. 

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.