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?
  • 6 mins
  • 61.7 MB
Preview
What software do you need?
  • 1 min
  • 8.65 MB
Preview
VS Code
    Preview
    The Community
    • 6 mins
    • 113 MB

    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
      • 4 mins
      • 137 MB
      Preview
      Sass compilers for other text editors
        Using Sass live compiler and live server
        • 2 mins
        • 50.9 MB
        Preview
        Sass live compiler and live server settings
        • 4 mins
        • 107 MB
        Preview
        A couple of other very useful VS Code Extensions
        • 2 mins
        • 41.5 MB
        Preview
        CSS output style options
        • 4 mins
        • 50.7 MB
        What are source maps?
        • 3 mins
        • 32.8 MB
        Other command line alternatives (free and premium options)
        • 2 mins
        • 43.1 MB
        Sass vs SCSS - two different ways of writting Sass
        • 3 mins
        • 36.9 MB
        CSS vs Sass comments
        • 2 mins
        • 21.6 MB

        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
        • 3 mins
        • 85.5 MB
        Preview
        SCSS vs Sass nesting
        • 3 mins
        • 75 MB
        Preview
        Nesting and the ampersand (&)
        • 8 mins
        • 135 MB
        Nesting properties
        • 3 mins
        • 31 MB
        Time for a challenge!
        • 2 mins
        • 21.5 MB
        nesting-challenge-starting-files.zip
        • 87.1 KB
        solution.scss
        • 769 Bytes

        Variables

        What are variables?
        • 4 mins
        • 161 MB
        Preview
        Variable inception (variables inside variables)
        • 4 mins
        • 156 MB
        Variables and the cascade
        • 3 mins
        • 17.8 MB
        Naming variables
        • 5 mins
        • 174 MB
        It's challenge time!
        • 3 mins
        • 51.7 MB
        Variable Challenge Starting Files
        • 2.4 KB
        variable-challenge-solution.scss
        • 1.17 KB

        Operators

        A cool way to do math in your CSS!
        Introduction to Operators
        • 5 mins
        • 25.5 MB
        Operators - a use case
        • 3 mins
        • 20.4 MB

        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
        • 1 min
        • 28.7 MB
        Preview
        Pricing Table Starting Files
        • 115 KB
        Google font @import
          Writing the markup
          • 7 mins
          • 136 MB
          Setting up the variables
          • 11 mins
          • 171 MB
          Styling it up
          • 31 mins
          • 804 MB
          Pricing Table finished version
          • 10.6 KB

          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
          • 4 mins
          • 37.6 MB
          Placeholders
          • 2 mins
          • 20.7 MB
          Don't forget about the other stuff you can do
          • 2 mins
          • 22.6 MB
          Problems with extends - 1
          • 2 mins
          • 16.3 MB
          Problems with extends - 2
          • 4 mins
          • 52.6 MB

          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
          • 4 mins
          • 28 MB
          Selectors inside mixins
          • 4 mins
          • 45.8 MB
          Mixin arguments - part one
          • 3 mins
          • 32.2 MB
          Mixin arguments part two - optional arguments
          • 3 mins
          • 21.1 MB
          Mixin arguments part three - more ways to work faster
          • 4 mins
          • 32.6 MB
          Mixin arguments part four - keeping things in the right order
          • 3 mins
          • 22.4 MB
          Mixin Challenge - Introduction
          • 6 mins
          • 89.6 MB
          LearnSass - mixin challenge.pdf
          • 103 KB
          Mixin Challenge - Starting Files
          • 782 Bytes

          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
          • 2 mins
          • 11.7 MB
          Some of my favourite Sass functions
          • 7 mins
          • 55.3 MB

          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
          • 313 KB
          The Markup
          • 6 mins
          • 95.4 MB
          Getting Sass set up and running
          • 3 mins
          • 46.5 MB
          Settin' up the variables
          • 5 mins
          • 66.7 MB
          Creating the mixins
          • 9 mins
          • 168 MB
          Styling the typography
          • 7 mins
          • 132 MB
          Styling the buttons
          • 6 mins
          • 141 MB
          Finishing touches
          • 8 mins
          • 202 MB
          my-finished-files.zip
          • 154 KB

          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
            • 5 mins
            • 61.2 MB
            Order matters when importing your partials
            • 4 mins
            • 62.7 MB
            The 7-1 system and what I actually use (file organization)
            • 10 mins
            • 197 MB

            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.