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.

That’s not to mention coding bootcamps that can cost between $10,000-$20,000 and barely even do basic CSS any justice!

Knowing the basics of it is super important, but once you’ve got the fundamentals down, class naming can still be hard, that our stylesheets can easily become a mess as they grow, and we never want to deal with 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.

There are also other tools that have become industry standards such as Sass, PostCSS, and more that can help as well.

And in this course, I want to teach you how you can leverage modern CSS, and some of those other 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.

Thanks to Beyond CSS, I feel a lot more confident about my code. It’s cleaner, I work faster, and it’s easier to adjust later on. I feel like I’ve made big leap forward as a front-end developer.
Julie Vandebosch
The course gave me tools that I use in my every day job. If you are really interested in CSS and work in this field, do not hesitate to buy this course!
Yoav Shai

Start taking control of your stylesheets today

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

As it stands now, modules 1-4 are finished and you will get immediate access to them (though a bit of tidying up and small fixes are still needed).

Module 5 will be progressively added as I make progress on it.

The pre-sale price on the premium package is for a limited time, and will not be available once the final module is complete.

Starter Package

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

Original price:$100

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

Includes (All available immediately!)

  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

Original price:$450

Pre-sale special$350

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

Includes (1-4 available immediately)

  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. Video lessons where I answer your questions
  7. Video library of previous live sessions (20+ hours of content)

Complete Package

Step into the world of theming and design systems

Original price:$250

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

Includes (All available immediately)

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

If you enroll in the starter or complete packages, you will have immediate access to all the content included in those tiers.

If you enroll in the Premium Package, you will get immediate access to the first four modules, plus early access to the next content as it is ready ahead of the planned November release date of the final course.

(The full release will happen around November 2023 🤞)

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 750,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.

I already had some knowledge of Sass, but now I have a deep understanding of its functions, such as @each, @if, @maps, and tokenization, as well as how to leverage these to create an organized design system. This has opened many doors for me, and I really enjoy learning from Kevin.
Samuel Llibre
As a professional Angular developer Beyond CSS has helped me leverage the power of design tokens in a consistent way which lets you fully customize and theme your projects. It also gives you ideas for creating your very own design system which is something not found in other similar courses.
Davor Ćosić

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

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 ~November 2023)

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

Learning from the ground up made a tremendous difference for me. I would learn things here and there from other tutorials and such, but this course connected the dots in a way I hadn't before.

This course is worth the time and money. It boosted my confidence, held my hand then threw me to the wolves armed and ready.

Laila

Beyond CSS that it is a fantastic course and you would absolutely benefit from doing it. Kevin is really knowledgeable and supportive, and the course is organized and simple to follow.

I would without a doubt advise enrolling in the Beyond CSS course.

Adrian

Start taking control of your stylesheets today

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

As it stands now, modules 1-4 are finished and you will get immediate access to them (though a bit of tidying up and small fixes are still needed).

Module 5 will be progressively added as I make progress on it.

The pre-sale price on the premium package is for a limited time, and will not be available once the final module is complete.

Starter Package

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

Original price:$100

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

Includes (All available immediately!)

  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

Original price:$450

Pre-sale special$350

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

Includes (1-4 available immediately)

  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. Video lessons where I answer your questions
  7. Video library of previous live sessions (20+ hours of content)

Complete Package

Step into the world of theming and design systems

Original price:$250

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

Includes (All available immediately)

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

If you enroll in the starter or complete packages, you will have immediate access to all the content included in those tiers.

If you enroll in the Premium Package, you will get immediate access to the first four modules, plus early access to the next content as it is ready ahead of the planned November release date of the final course.

(The full release will happen around November 2023 🤞)

Frequently Asked questions

Is this course beginner friendly?

This is an advanced course where you will need a good understanding of HTML & CSS.

However, you do not need any experience with any of the other things we've covering in the course, such as Sass, PostCSS, Vite, etc. I assume zero knoweldge of any of those, and we start from the ground up.

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 40% 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 I do! If you're in a country with lower purchasing power, you should see a banner at the top of the page with a coupon.

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

If you don't see an adjusted price, please email support@kevinpowell.co.

Is it a subscription, or one-time fee?

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

Is it possible to upgrade later on?

Yes! 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?

We will be using Astro on the front-end. I was going to use Eleventy, but have had a lot of questions about scoped CSS, and Astro allows us to explore that without having to use a specific JS framework.

For the CMS, we will be using Tina CMS, which is a git-based CMS that supports both a visual editor and full markdown support, can be set up for full visual editing and composable blocks, and more.

Are the video lessons closed captioned?

As the course is still a work in progress, some of them have been professionally closed-captioned, while others have automatic captions. All lessons will be professionally closed captioned once all the lessons have been completed.

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!