Maintainable and scalable CSS doesn’t have to be a challenge

There are a lot of things that, at scale, get harder and harder:

  • Class naming
  • Staying organized
  • Dealing with the cascade and specificity issues
  • and more

There are a lot of different methodologies, approaches, and tools out there to help solve the problems of writing CSS at scale.

Some approaches involve 3rd party options, which can be super helpful, but often are great at making an MVP that needs a total rework when it’s time to make something more custom.

Or worse yet, you end up with a strange mix of Tailwind here, Bootstrap there, some CSS-in-JS solutions over here and no real direction.

To help overcome a lot of these problems, the first thing you need is a clear direction and a system in place that you understand.

When we create our own system (which can even leverage the tools above!), we have total control from day one.

By having a system in place, you can grow it to fit your own needs and make it work for you, instead of using a “fits all” solution that a 3rd party needs to be.

And best of all, once you’ve got it set up you don’t have to start from scratch on every single project, allowing you to start new projects in record time.

That's why I created Beyond CSS.

A course to help you learn how to wrangle your stylesheets, keeping them organized and scalable no matter the size of the project or how big your team is.

Enroll Now

When we first start writing CSS, it’s pretty easy.

Change a background color here, change a font there.

As you improve, you might start building out individual components or small layouts from designs you find online, and things go pretty well.

You understand the basics of flexbox, grid, and positioning and you are feeling pretty confident.

You can create layouts and get the job done…

But as projects grow in size, things become a bit of a mess.

Every aspect of a project becomes harder to manage the larger the project is. And as more team members enter the picture, the difficulties raise exponentially.

Some things are easier to manage than others, and CSS is one of those things that is very easy for it to explode into a complex, unorganized, mess. And when you’re working in a team with varying degrees of comfort in writing CSS, thing can become a nightmare.

And that’s why there are so many 3rd party libraries and frameworks out there, as well as a bunch of different naming conventions.

Those all exist because writing CSS that can scale is hard, and it’s made harder by the ever growing list of technologies we can use to build our sites as well.

The problem

Most tutorials, blog posts, and videos about CSS cover fundamental concepts like how flexbox works, or how to make a single component in isolation. They don’t talk about writing CSS at scale. That’s just the nature of short, easy to digest content.

And of course, CSS is usually covered in longer content and other courses, but often it’s from extremely talented full-stack educators who don’t have the strongest grasp of CSS.

I’ve also lived through the struggles myself. I know that class naming can be hard, that things can easily become a mess as they grow, and the frustration of dealing with conflicting styles.

There is a better way

As CSS continues to grow as a language, things like custom properties and cascade layers are here to help us wrangle our CSS like we never could do before.

But there are also other tools that have become industry standards such as Sass, PostCSS, and more.

And in this course, I want to teach you how you can leverage modern CSS, and some of those tools to create well-organized, and easy-to-scale projects that actually leave you and your team writing less CSS.

This is an advanced course that assumes you are comfortable writing CSS, but struggle with organization and scaling projects.

Start taking control of your stylesheets today

This course is still a work in progress and is in pre-release at the moment.

Doors to this early release will be closing July 4th at 10pm EDT. The full release will happen around ~November 2022.

Starter Package

Learn to get more organized by using Sass, PostCSS, Vite and more

$79

Enroll now
  • Modules 1–3
  • Lifetime access
  • Hands-on exercises & projects
  • Exclusive Discord Channels
  • 30-day money-back guarantee

Includes

  1. Sass fundamentals
  2. Adding Logic to our stylesheets
  3. Architecture and build tools

Premium Package

Take everything to the next level and create deliverable projects with a Headless CMS and SSG

$349

Enroll now
  • Modules 1–5
  • Lifetime access
  • Hands-on exercises & projects
  • Exclusive Discord Channels
  • 30-day money-back guarantee

Includes

  1. Sass fundamentals
  2. Adding Logic to our stylesheets
  3. Architecture and build tools
  4. Design systems and theming
  5. Scalable solutions with a SSG & Headless CMS
  6. Monthly office-hours
  7. Video library of previous live sessions (20+ hours of content and growing)

Complete Package

Step into the world of theming and design systems

$179

Enroll now
  • Modules 1–4
  • Lifetime access
  • Hands-on exercises & projects
  • Exclusive Discord Channels
  • 30-day money-back guarantee

Includes

  • Module 1 Sass fundamentals
  • 2 Adding Logic to our stylesheets
  • 3 Architecture and build tools
  • 4 Design systems and theming

If you enroll today, you will get immediate access to the first three modules, except for the final project of module 3.

By enrolling early, you will get early access to the next content as it is ready, ahead of the planned November release date of the final course.

Hi, my name is Kevin

I started making websites back in the late 90s when I made a homepage for a Star Wars RPG that I helped run.

Even back then, my favorite part of making sites was figuring out how to make the site look like the planned design. Granted, how we had to make designs a reality was very different back then. Luckily things have changed a lot over the years, and we have much better solutions today!

CSS has changed a lot since then, but despite how much it has matured as a language, it would seem like the one thing that is always a struggle is figuring out the best way to write it at scale.

It’s been decades that I’ve been writing CSS and over that time I’ve tried most of the solutions that are out there.

I’ve spent those years learning from my own mistakes, and with Beyond CSS I wanted to take that experience and help others get to the same solutions that I’ve found without all the time needed to get there.

The biggest hurdle in putting this course together has been, after having taught in the classroom for 5 years, I understand the limitations of online courses when compared to more traditional learning environments.

I’ve run into those limitations over on my YouTube channel that’s devoted to CSS, which has grown to over 550,000 subscribers, as well as in other courses that I’ve put together in the past.

As I’ve continued to teach online over the past 5+ years, I’ve been putting a lot of thought and effort, into overcoming those challenges.

To overcome these limitations, I’ve made Beyond CSS as multi-modal as possible. It mixes both text and video lessons, small interactive code blocks with mini-challenges, and larger challenges and projects for you to complete in your own editor.

I’m really proud of this course, and I really look forward to helping you take control of your stylesheets.

Save time and avoid the headaches

How many times have you started a new project and started writing the same CSS that you’ve written 1000 times before just to get started?

And how about running into badly authored CSS?

You can spend hours trying to fix issues dealing with the cascade or specificity for something that should be a “minor” tweak.

That’s hours of time down the toilet each and every time.

That’s lost time that could be spent on better—and more enjoyable—things.

With a system in place, you can jump-start the styling of projects and write a lot less CSS going forward, allowing you and your team to put your time and effort into other priorities instead, saving you a lot of time and headaches along the way.

A smarter workflow

While working fast is great, the most important thing is to work smart.

That’s where some of the bigger topics come into play:

  • project architecture
  • theming
  • design systems

With a smart setup, this is where we really are able to leverage Sass for all it’s worth to create maintainable and scalable solutions.

With good project architecture, we won’t get lost in our code.

It also allows us to easily create themes for our sites that give us total control over the look and feel, without having to style each and every component one at a time.

And then, by creating a design system, we can apply, update, and modify how those themes are applied, quickly and easily changing how a site looks within just a few minutes.

We’re also left with something that can be used in each and every project you work on, so you’re never starting from scratch and rewriting the same code over and over again.

You’ll have a custom solution that works for you, and which can grow with any project that you throw at it.

Reinforce what you’re learning, and take that next step forward

Having a maintainable, scalable solution for our CSS is great, but learning about how it works and actually being able to implement things is another story.

That’s why I’ve done everything I can to make this course as interactive as possible.

As we learn about the small features of Sass, there will be interactive code blocks for you to play and experiment with, like this one right here (change the value of $example to blue and hit compile, and it will update immediately):

Throughout the modules there will be larger challenges for you to complete on your own, helping reinforce everything and make sure you are actually able to implement what we’re learning.

And there are multiple projects throughout the course as well, to reinforce everything within some real-world type situations.

Early on we’ll build some smaller-scale things to help us get our feet wet, and we’ll slowly build up as we learn more.

To really take things beyond CSS, the final module of the course will involve creating a multi-page blog site with a headless CMS, giving you everything you need to hand projects off to clients.

What's included

Each module of the course builds up on the previous ones. While it does assume a decent base in CSS, it assumes no knowledge of any of the tools that we'll be using throughout it.

Module 1:Sass Fundamentals

Even with the evolution of CSS and the rise of other tools, Sass is still a fantastic language which we’ll learn to leverage in the later modules, to create better architecture for our stylesheets, as well as build out and control design systems and more.

Module 2:Adding logic to our stylesheets

Getting into more advanced Sass, we’ll be exploring creating loops, if/else statements and more within our stylesheets, and we’ll see how we can leverage those to write a lot less CSS in the long run.

Module 3:Architecture and build processes

In this module, we’ll build on everything we’ve learned so far to get more organized, and also explore Vite, PostCSS, and a few other tools. We’ll also create a template project that we can use as a starting point for future work.

Module 4:Design systems and theming
(coming August-September 2022)

Taking what we’ve learned, we’ll explore how we can create themes for our projects, and then add an extra layer on top of all of that to create a robust design system in place.

Module 5:Creating deliverable projects
(coming October-November 2022)

With easy-to-maintain stylesheets in place, we step things by integrating everything into a JAMStack site with a headless CMS (probably SvelteKit + Prismic, but subject to change).

The course platform

If you'd like to see a bit more on the platform itself, I take a quick dive into it in the video below.

And more

  • Work faster with Sass

    Learn advanced Sass features and walk away with useful mixins that you can use in your work

  • Build a starter template

    You’ll walk away from this course with a starter template that you can use to jump start all future projects

  • Theming

    We’ll be looking at a few different approaches that you can take to theme your components and sites

  • CSS best-practices

    Everything we’re doing has to be compiled down to CSS the browser can understand, so we’ll be covering advanced CSS techniques and best-practices

  • Naming conventions

    A big part of staying organized is dealing with class names, and we’ll be exploring a few different approaches, including BEM and CUBE CSS

  • Sass vs. CSS

    We’ll explore where Sass features clash with CSS and how we can comfortably use both in our projects

  • Modern CSS

    While we’ll be looking primarily at how we can scale our projects, modern CSS tools like custom properties, clamp(), calc(), and more are a big part of this as well

  • Accessibility

    Creating accessible sites is very important, and we’ll be covering best-practices as we work through our larger projects

  • PostCSS

    Sass is great, but it’s not the only tool out there that we can use to help improve our workflow

  • JAMStack

    Performance is always a concern, and statics sites are a great way to have high-performance sites, so we’ll also be exploring creating a JAMStack site using a headless CMS

Start taking control of your stylesheets today

This course is still a work in progress and is in pre-release at the moment.

Doors to this early release will be closing July 4th at 10pm EDT. The full release will happen around ~November 2022.

Starter Package

Learn to get more organized by using Sass, PostCSS, Vite and more

$79

Enroll now
  • Modules 1–3
  • Lifetime access
  • Hands-on exercises & projects
  • Exclusive Discord Channels
  • 30-day money-back guarantee

Includes

  1. Sass fundamentals
  2. Adding Logic to our stylesheets
  3. Architecture and build tools

Premium Package

Take everything to the next level and create deliverable projects with a Headless CMS and SSG

$349

Enroll now
  • Modules 1–5
  • Lifetime access
  • Hands-on exercises & projects
  • Exclusive Discord Channels
  • 30-day money-back guarantee

Includes

  1. Sass fundamentals
  2. Adding Logic to our stylesheets
  3. Architecture and build tools
  4. Design systems and theming
  5. Scalable solutions with a SSG & Headless CMS
  6. Monthly office-hours
  7. Video library of previous live sessions (20+ hours of content and growing)

Complete Package

Step into the world of theming and design systems

$179

Enroll now
  • Modules 1–4
  • Lifetime access
  • Hands-on exercises & projects
  • Exclusive Discord Channels
  • 30-day money-back guarantee

Includes

  • Module 1 Sass fundamentals
  • 2 Adding Logic to our stylesheets
  • 3 Architecture and build tools
  • 4 Design systems and theming

If you enroll today, you will get immediate access to the first three modules, except for the final project of module 3.

By enrolling early, you will get early access to the next content as it is ready, ahead of the planned November release date of the final course.

Frequently Asked questions

Is this course beginner friendly?

This is an advanced course where you will need a good understanding of HTML & CSS. While we will be looking at tools like Sass, PostCSS, Vite and more, you do not need any experience with any of those.

I've been using Sass/SCSS for a long time now, will I learn anything?

I think so, yes! While the early modules do dive into the fundamentals of Sass/SCSS, this is to get us all on the same page so we can get more organized and start building out themes and design systems.

We are also looking at the new version of Sass, not node-sass, which it seems most people still use despite being deprecated years ago.

With all the other tools out there today, do we still need Sass/SCSS?

With usage still growing year-over-year and very high satisfaction, I would say this is a resounding yes.

We're also not limited to using Sass. This course looks at how we can combine it with tools like PurgeCSS, PostCSS, and in the final module, scoped component styling as well.

Are there any student discounts?

Yes! If you're actively enrolled in an educational program you can receive 20% off any of the tiers, though you cannot combine this with any other discounts, including PPP.

To receive a student discount, please send an email to support@kevinpowell.co with proof of enrolment.

Do you support Purchasing Power Parity (PPP)?

Yes! If you are in a country that qualifies you should see a banner at the top of the page with a unique coupon code for you to use at checkout.

If you do not see one and use a VPN, please turn off the VPN and try again.

Is it a subscription, or one-time fee?

All tiers are a one-time fee with lifetime access. That includes all future updates to the course as well.

Is it possible to upgrade later on?

Of course! You can upgrade at any time by sending an email to support@kevinpowell.co.

Is this a video course?

Unlike my previous courses, this one is a mix of text and video lessons. There are also built-in mini-challenges as well as larger challenges and projects to get you working within your own editor.

What if I get stuck, or have a question?

There are private channels within my Discord community that you will have access to. Here you can ask questions, share ideas, and get feedback on your work.

I will be in there answering questions, and the Discord community in general is very active and always willing to help out with problems as well!

Is it possible to purchase multiple licences for my team or a large group?

You can order multiple licenses by contacting support@kevinpowell.co.

Orders of 5 and more will get a discount of 10%, and orders of 10 or more licenses will get 20% off.

What will you be using for the front-end and the CMS in the final module?

While I am not 100% sure at the moment, I am leaning toward SvelteKit and Prismic.

I was going to use Eleventy, but have had a lot of questions about scoped CSS, so will be using either SvelteKit or an alternative option that make that side of things easy, and let us explore the differences in handling a styles in that way.

Are the video lessons closed captioned?

Yes! As the course is in pre-release, some of them have been professionally closed-captioned, while others are automatic captions. All lessons will be professionally closed captioned before the official release around November.

What if I want a refund?

No problem at all!. I offer a 30-day, no questions asked, money back guarantee. Simply send me an email at support@kevinpowell.co to let me know.

I have more questions!

If you need clarification on anything at all, send an email over to support@kevinpowell.co and I'll be happy to help!

Enroll Now