CSS Linting Masterclass

Stop wasting your time on code formatting, finding silly errors, and following or enforcing conventions.

Catching trivial bugs is for tools; your time is better spent solving meaningful problems only you can solve. Learn how to use the best CSS linting tools, Prettier & Stylelint, to your advantage and save your time, energy, and resources for creative development work.

Taught by Zoran Jambor, CSS Weekly

The Challenges of Working With CSS

Working with CSS (with or without a preprocessor) can be demanding, frustrating, and even unbearable, regardless of how many people work in your team—but often for all the wrong reasons.

  • Do you find yourself or your teammates arguing over code conventions?
  • Do you disagree on spaces vs. tabs or any other code formatting options?
  • Do you sometimes spend hours trying to find a bug only to discover you’re missing a simple statement in your CSS?
  • Do you want your whole team to be on the same page with code conventions without you having to babysit everyone?
  • Do you want your tools to prevent you or your team members from pushing bugs into production? 
  • Do you want to automatically catch problems in your stylesheets before anyone sees them, before you create a pull request?
  • Do you want to seamlessly integrate linting tools into your workflow and effortlessly configure them to your wants and needs?
  • Do you value your time highly, do you enjoy automating things, do you want to be solving interesting instead of trivial problems?

Then this course is for you—you’ll learn how to set up Prettier & Stylelint properly, how to integrate them into your workflow from code editor to pre-commit hooks, unit testing, and continuous integration, which will free up your time and energy for the meaningful work that’s worth doing.

Mastering
Prettier & Stylelint

Prettier Logo Stylelint Logo

In this course, you'll learn how to setup Prettier and Stylelint from the ground up. Whether you're working in a team or alone, you'll save a bunch of time on hunting bugs and dealing with annoying code inconsistencies that pile up with time and can quickly get out of hand.

You'll see even greater benefits if you're working in a team. You'll gain an understanding of how to get your entire team and even organization to adhere to the same, consistent, sensible standard, and you will never again have to worry that somebody will commit code that isn't up to your fundamental standards.

Prettier and Styelelint are fantastic tools, often underused because of their complexity.

  • It's difficult and challenging to set them up properly.
  • It's hard to quantify their value in a team and even more for projects where you're the only one working on CSS.
  • Stylelint alone has 170+ built-in rules, and it’s impossible to figure out where to start or what to configure.
  • Just configuring Prettier & Stylelint properly isn't enough; you need to know how to fully integrate them into your workflow.
  • Getting your entire team and organization on board can be challenging.

I address all those pain points in Mastering Prettier & Stylelint—when you finish it, you'll understand exactly how to approach challenges you might face, how to set up the tools, how to integrate them into your workflow, and how to introduce them to your team and even across different teams or products in your company.

By the end of the course...

  • You'll have a clear idea of how to setup Prettier and Stylelint from the ground up. 
  • You’ll understand how to configure both Prettier & Stylelint to work for you without having to dig into every configuration option available.
  • You’ll have a profound understanding of how to integrate Prettier & Stylelint into your workflow—from Code Editor to commit hooks, testing tools, and even continuous integration.
  • You'll know how to effortlessly keep your entire team and even organization adhering to consistent, sensible coding standards, from common stylistic conventions to specific guidelines around Stylesheet rules.
  • You will no longer have to deal with trivial, time-consuming mistakes that can be automatically detected and even fixed.
  • You'll save a ton of time by being able to confidently forget about code formatting, property reordering, and reviewing pull requests for basic mistakes like improper whitespace, duplicated rules, or overly specific selectors.

Taught by Zoran Jambor, CSS Weekly

Hi, I'm Zoran Jambor, the author of CSS Weekly. I've been working on the newsletter for more than ten years, reading dozens of CSS-related articles, exploring tools and various techniques every week, which gives me pretty-good insight into where our industry is, where it's headed, and what problems developers face daily.

In my career as a frontend developer, over the past 15 years, I've worked as a freelancer, in small teams, big teams, and have gained a profound understanding of the challenges you have to face when working with CSS.

And a number of those challenges can be very effectively solved using tools like Prettier & Stylelint—exactly what I'll show you in this course.


What’s in the course

Mastering Prettier & Stylelint is structured into short, digestible lessons that complement each other and gradually introduce new concepts. You'll be in control at all times, and even if you can only invest even a couple of minutes daily, you'll be able to quickly make substantial progress and gain deep insight into the topics—which will benefit you both in your day job and with your side projects.

Course modules

The course consists of video lessons with subtitles, transcriptions, and hands-on challenges to solidify your understanding.

Module 1

Course Overview & Setup

You’ll get a brief course overview to get you up to speed with prerequisites and all the essential info you’ll need to follow along and stay up to date.

6 videos 11:04
  • Introduction 01:59
  • Tooling 03:06
  • Starter files 03:54
  • Updates 00:38
  • Resources 00:44
  • Conclusion 00:43

Published:

Module 2

Prettier Basics

You’ll learn how to get started with Prettier, what configuration options are available, and how to set it up properly in your code editor.

11 videos 51:00
  • What is Prettier 01:06
  • Add Prettier to your project 02:16
  • Use Prettier from the command line 06:42
  • Determine which files to format with Prettier (.prettierignore) 02:23
  • Configure Prettier from the command line 01:44
  • Overview of different configuration file options 05:56
  • Create a starting-point config 03:01
  • Configure Prettier in Visual Studio Code 09:19
  • Overview of Prettier options 11:36
  • Prettier Basics challenge 06:23
  • Prettier Basics conclusion 00:30

Published:

Module 3

Working with Prettier

You’ll find out everything you need to know to comfortably work with Prettier on a day-to-day basis, from ignoring code, using plugins, and transitioning existing codebases to Prettier.

  • Main challenges and obstacles to adopting Prettier
  • Ignoring code
  • Configuration overrides
  • Transitioning codebases to Prettier
  • Using plugins
  • Optimizing Prettier

Coming up next:

Module 4

Integrating Prettier Into Your Workflow

You’ll gain an in-depth understanding of how to integrate Prettier into your workflow fully, take full advantage of automatization, and seamlessly get your entire team or company to use Prettier with the tools and processes you already have in place.

  • Sharing configurations
  • Setting up a pre-commit hook
  • Integrating Prettier with Jest
  • Setting up Prettier in different task runners (NPM Scripts, Parcel, Webpack, Gulp)
  • Using Prettier in Continuous Integration tools (GitHub Actions, and more)

Coming soon:

Module 5

Stylelint Basics

You’ll learn how to setup Stylelint, from configuring it and using it in the command line to enabling it in your editor, along with a birds-eye overview of different types of rules and how they can help you avoid errors and enforce conventions.

  • Adding Stylelint to your project
  • Configuring Stylelint
  • Working from the command line
  • Setting up Stylelint in your code editor (VS Code)
  • Overview of Stylelint rules (avoiding errors, enforcing conventions)

Coming soon:

Module 6

Working with Stylelint

You’ll become proficient in working with Stylelint, from adjusting, tweaking, and customizing your own configuration to enabling various stylesheet syntaxes and specific guides for enforcing coding conventions.

  • Setting up your Stylelint config
  • Integrating Stylelint with Prettier
  • Enabling Sass/Scss
  • Automatically ordering properties
  • Enforcing convention recipes
  • Ignoring code
  • Configuration overrides

Coming soon:

Module 7

Integrating Stylelint Into Your Workflow

You’ll learn how to fully integrate Stylelint into your workflow and have your codebase thoroughly and seamlessly linted regardless of which tools and processes you and your team are using.

  • Sharing configurations
  • Setting up a pre-commit hook
  • Integrating Stylelint with Jest
  • Setting up Stylelint in different task runners (NPM Scripts, Parcel, Webpack, Gulp)
  • Using Stylelint in Continuous Integration (GitHub Actions, and more)

Coming soon:

Module 8

Conclusion

You’ll get a brief overview of what you’ve learned, where to go from here, how this course will be updated in the future, and which tools you could utilize to complement your linting workflow even further.

  • Conclusion
  • Updates
  • An overview of tools that can complement your workflow
  • Additional resources

Coming soon:

Let the tools do the heavy lifting for you. Transform your & your team's workflow profoundly. Sign up today to get the exclusive pre-sale discount.

  • Basic Package

    Fundamental concepts only—recommended if you're just starting out.

    $59 $37

    The estimated price with VAT included is $37

    Pre-sale discount—35% off.

    Enroll Now »
    • Access to 6 out of 8 modules
    • 70+ video lessons
    • Stream all lessons
    • Full English transcripts and captions
    • Lifetime access to all course content
    • Unlimited updates
    • 30-day money-back guarantee
    • Access to the exclusive, private community

    Includes Modules

    • Course Overview & Setup
    • Prettier Basics
    • Working with Prettier
    • Stylelint Basics
    • Working with Stylelint
    • Conclusion
    Enroll Now » Pre-sale discount—35% off.
  • Masterclass

    Develop an in-depth understanding of Prettier & Stylelint and how to integrate them fully into your workflow.

    $79 $47

    The estimated price with VAT included is $47

    Pre-sale discount—40% off.

    Enroll Now »
    • Full access to all 8 modules
    • 100+ video lessons
    • Stream and download all lessons
    • Full English transcripts and captions
    • Lifetime access to all course content
    • Unlimited updates
    • 30-day money-back guarantee
    • Access to the exclusive, private community
    • Certificate of Completion

    Includes Modules

    • Course Overview & Setup
    • Prettier Basics
    • Working with Prettier
    • Integrating Prettier into your workflow
    • Stylelint Basics
    • Working with Stylelint
    • Integrating Stylelint into your workflow
    • Conclusion
    Enroll Now » Pre-sale discount—40% off.

The full course should be out by the end of 2022

  • Modules will be published as they're completed, and the entire course should be out by the end of 2022.
  • Discounts will gradually decrease as the launch approaches—act now, so you don't miss out.
  • Some of the perks will be available after the full launch.
  • Modules and lessons might be tweaked and altered—with the goal of giving you the best possible experience and results.
  • See FAQ for info on Parity Purchasing Power discounts.

Team License Packages

Boost the productivity of your entire team and significantly improve the quality of your codebase with multiple licenses. Your team members will receive full access to the "Masterclass" package—including certification.

If you're working in a larger team, or want a custom offer, get in touch at [email protected], and we'll find a deal that works for you.

Your company should pay for this course

Techniques presented in this course have the most impact in a team environment, where they can help you and your team get on the same page with coding standards and conventions around your stylesheets easier.

This boost in productivity with less time spent around trivial tasks that can be automated and with fewer structuring errors in your CSS (that can take a massive amount of time to debug—but unlikely fix), this course will pay itself shortly multiple times over.

So here is the template you can use to propose reimbursement for your company.

Current Course Status

All materials are prepared and written. I have written over 150 pages of content that goes into the nooks and crannies of Prettier and Stylelint.

The first two modules have been published, and I'm working on Working with Prettier module, wich should be released in the middle of November 2022.

My initial estimates were a lot more optimistic, but I would rather delay the course a bit than deliver something that I'm not proud of.

Updated: October 31, 2022 

Frequently Asked Questions

Why Prettier?

Prettier is an opinionated code formatter used by companies and products you rely on daily, like React, Jest, Babel, Yarn, Webpack, Storybook, Vercel, PayPal, Facebook, Dropbox, Webflow, and more. Suffice it to say, it's well-established in the industry.

It enforces a consistent style by parsing your code and re-printing it with the rules you define, taking the maximum line length into account, wrapping code when necessary, and more. It has few configuration options, but getting even those right can be tricky—and even more integrating Prettier fully into your workflow.

Why Stylelint?

Stylelint is a modern linter that helps you avoid errors and enforce conventions in your stylesheets. It is used and endorsed by companies like Google, GitHub, WordPress, InVision, Sentry, Airbnb, Codecademy, Codepilot, and more.

It has over 170 built-in rules for CSS syntax and features, it complements Prettier, and it not only helps you catch errors but allows you to enforce conventions that will prevent errors in the first place. And on top of that, it allows you to enforce consistent patterns in your CSS, like selector name patterns, allowed units, rules, color functions, and much more.

If this sounds overwhelming, it probably is. In this course, I'll give you a practical guide on how to make it work for you without having to dig into all rules individually to figure out how (or if) you want to set them up.

Do you offer Parity Purchasing Power discount?

I sure do!

Unfortunately, Teachable (the platform I'm using for this course) doesn't offer an option to change the price automatically based on your location, so I've prepared some coupons you can use if you need a discount.

Use a coupon PARITY20, PARITY30, or PARITY40 for 20%, 30%, or 40% off.

If you need a bigger discount, please email me at [email protected], and I'll gladly give you a unique offer.

And no, there is no system in place to enforce any of this. I really do trust you, so if you need or want a discount, use one of these coupons at the checkout.

Enroll Now »

When will this course fully launch?

I aim to finish it fully by the end of 2022. And I will keep you up-to-date with my progress via email if you sign up to the email updates or if you buy the course.

How much content will there be in the final version?

By my current estimates, 6+ hours of video content.

But I don't have any specific targets, as I believe there should be only as much content as needed for you to get a firm grasp of Prettier & Stylelint and how you can utilize them best for your own use-cases.

And for any other questions you might have, send me an email to [email protected] I'll be happy to hear from you, and I'll be happy to answer any doubts, questions or comments you might have.