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.

Presented 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.

11 videos 01:13:17
  • Working with Prettier module overview 00:41
  • Challenges & obstacles to adopting Prettier 05:29
  • Ignoring code 07:48
  • Configuration overrides 08:59
  • Transitioning large codebases to Prettier 06:31
  • Updating Prettier 08:27
  • Extending Prettier with Plugins 10:25
  • Optimizing Prettier (making Prettier faster) 10:39
  • Working with Prettier challenge 10:59
  • A note about installing Prettier plugins 02:41
  • Working with Prettier conclusion 00:37

[Published]

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.

15 videos 01:12:17
  • Integrating Prettier Into Your Workflow module overview 00:59
  • Sharing Configurations 10:46
  • Pre-Commit Hook 03:35
  • Fix pre-commit hook problems in GUIs 07:05
  • Jest 03:49
  • Setting up Prettier with task runners 01:00
  • NPM Scripts 05:20
  • Gulp.js 05:41
  • Webpack 04:45
  • Parcel 01:17
  • Setting up Prettier in Continuous Integration workflow 01:01
  • GitHub Actions — Format files on push workflow 14:37
  • GitHub Actions — Check files on pull requests 10:01
  • Integrating Prettier Into Your Workflow challenge (C03) 01:23
  • Prettier Conclusion 00:58

[Published]

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.

10 videos 01:02:13
  • Stylelint Basics module overview 00:51
  • What is Stylelint 01:36
  • Add Stylelint to your project 05:14
  • Use Stylelint from the command line 10:29
  • Determine which files to format with Stylelint (.stylelintignore) 01:43
  • Configuring Stylelint (Overview of different configuration file options) 03:39
  • Overview of Stylelint rules 19:32
  • Configure Stylelint in Visual Studio Code 10:45
  • Stylelint Basics challenge (C04) 07:43
  • Stylelint Basics conclusion 00:41

[Published]

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

Join more than 100 devs who already enrolled and profoundly transform your and your team's workflow.

  • Basic Package

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

    $59 $37

    VAT is included in the price. The appropriate taxes will be withdraw from this price.

    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

    VAT is included in the price. The appropriate taxes will be withdraw from this price.

    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.

Module 6, Working with Stylelint, is currently in production.

  • Modules will be published as soon as they're completed.
  • 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

Course development was paused for a while due to personal reasons, but I'm now working on it again regularly.

The next module will be released in the next few weeks, by the end of 2024.

The current plan is to finish the rest of the modules, then add the ESLint module, and then rerecord the first part of the course.

Updated: December 5, 2024


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 2023. 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.

What about ESLint?

ESLint is an essential tool for a thorough linting setup.

Even though I initially planned to only cover Prettier and Stylelint in this, I don't think this course would be complete without digging into ESLint as well.

So to answer your question: YES, I do plan to release modules related to ESLint as well, even though they aren't currently mentioned anywhere else on this landing page. :)

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.