Learn SCSS for WordPress

Description

Can you write some CSS? Well, then you can write SASS/SCSS!

(Note: SCSS is almost the same thing as SASS just slightly different formatting. SCSS is less confusing because it uses curly brackets and not rely on indentation like SASS does. Although different, SASS and SCSS are terms that can be used interchangeably in regular life, and for the record, SASS is way easier to say. Haha Details here: https://sass-lang.com/documentation/syntax )

SCSS is short for Sassy CSS. It’s a syntax that has everything you needed in writing great style sheets. It requires a compiler to produce the final CSS file, and I will walk you through setting it all up. It’s super easy.

With SCSS you can do things you’ve always wanted to do in CSS but couldn’t like..

• Making “macros (mixins)” that does all the calculations for you
• Changing all the styling on the website in one file that propagates throughout the whole site.
• Grouping all the selectors that follow the same rules efficiently
• Making media queries easily and consistent throughout the site
• Automatically minifying your files
• And so much more!

With this course you will

• Learn to make your own lightweight “bootstrap” type code base that weighs in at 5-7kb
• Add our custom code to that and end up with only 30-50kb to style a whole website. (Note: this is possible if you are in full control of the html structure as well. This can be a little hard with page builders, but then you’d probably just have 20-30kb + the page builder code)
• Learn to set up your own units for spacing, sizing, and colors
• Learn how to apply your new SCSS knowledge into a live WordPress build.

The reason my SCSS course is so good is because you’ll be getting everything I’ve learned over the past few years:

• All the mistakes that I’ve made, I teach you how to avoid
• All the cool things I’ve come up with you’ll be getting a thorough explanation on how to tweak it to suit you and/or how to use it in your development
• All the tricks I’ve used and figured out over time, you will learn without wasting the time I did haha

Think of it as totally changing your frontend styling game so you will never look back.

Become a superstar in CSS in record time.

This is the crash course that will change your life. Seriously.

Pre-answered questions

– Do I need to know CSS?
YES. But just the basics, not everything about it. You don’t have to be a CSS wizard to start learning SCSS. This is a course on how to use SCSS, not on CSS. The level of CSS I use in the course doesn’t go beyond intermediate level. If you want to start with learning CSS, I have a CSS crash course that you can go through before you start this one. Or, if you want an extra discount, there’s a package that includes this course and the crash course.

– Do I need to purchase anything extra?
No. Everything related to the course can be used freely. I use Atom text editor, Scout app, and Dropbox. The only thing that could involve money is how I use XD to explain how a design proof is put together, but that’s only because Adobe changed their XD pricing so there’s no free tier anymore. XD is offered on a trial, so if you want to, you can just try that. But it’s not imperative in the course

– Do you provide the files?
Yes. At the end of the course, I have the whole folder ready for you to download.

– What WP page builder do you use to teach?
I used Gutenberg for the example in the course, but it was mostly focused on HOW to implement it with your page builder of choice, and not the nuances of Gutenberg or any particular page builder. You can use any page builder as long as you can add custom classes.

The Course Curriculum

Chapter 1. Intro

• L01 – Introduction
• L02 – Setup

Chapter 2. Learning SCSS

• L01 – Syntax
• L02 – The Ampersand
• L03 – Variables
• L04 – Extend
• L05 – Mixins Basic
• L06 – Advanced Mixins 1 – Easy Flexbox, Easy Flexbox Grids
• L07 – Advanced Mixins 2 – Media Queries, Easy Grid Layouts
• L08 – Discussion – Extends vs. mixins, semantic CSS

Chapter 3. My SCSS Structure

• L01 – The Folder Structure
• L02 – The Variable Folder
• L03 – The mixins folder
• L04 – The extends folder

Chapter 4. The sample design

• L01 – The Design Proof – XD
• L02 – Preparing the proof

Chapter 5. Using it on WordPress

• L01 – Setting up the development environment
• L02 – Custom Setup – variables
• L03 – Setup and Structuring
• L04 – Quick Styling Walkthrough
• L05 – Quick WordPress Application

Chapter 6. Wrap up

• L01 – Wrap up
• L02 – All the resources

Once you learn CSS, moving on to SCSS is
almost inevitable.

heh.