Go to Preview Lesson
Go to Preview Lesson
LESSON 7.3
Using jest-axe to Find Accessibility Issues in React Components
LESSON 7.4
What is Visual Testing and How Does it Work?
Build a Complete Company Design System
MODULE 1
Introduction
LESSON 1.1
Build a Company Design System - Course Introduction
LESSON 1.2
Build a Company Design System - Course Overview
LESSON 1.3
What are Design Systems and Why are They so Popular?
LESSON 1.4
Pace Layering and Atomic Design System Mental Models
LESSON 1.5
How to Turn a Figma Design System Into Code
MODULE 2
Design System Monorepo
LESSON 2.1
Module 2 Introduction
LESSON 2.2
How to Structure a Design System Monorepo
LESSON 2.3
Using Yarn Workspaces to Create a Monorepo
LESSON 2.4
How to Build a Dynamic Design System With TypeScript
LESSON 2.5
Create ESLint and Prettier Configs for a Design System
MODULE 3
Foundation package
LESSON 3.1
Module 3 Introduction
LESSON 3.2
How to Work With and Structure Design Tokens
LESSON 3.3
A Guide to Transforming Design Tokens with Style Dictionary
LESSON 3.4
Creating Tailwind CSS Presets With Design Tokens
LESSON 3.5
Building the foundation
MODULE 4
React package
LESSON 4.1
Module 4 Introduction
LESSON 4.2
Setting Up A React Component Library for Design Systems
LESSON 4.3
How to Write React Components for a Company Design System
MODULE 5
Storybook package
LESSON 5.1
Module 5 Introduction
LESSON 5.2
Setting Up Storybook for Company Design Systems
LESSON 5.3
Creating Your First Stories in Storybook
LESSON 5.4
Controls and A11y testing
MODULE 6
Styling components
LESSON 6.1
Module 6 Introduction
LESSON 6.2
How to Style React Components With Design Tokens
LESSON 6.3
How to Use Tailwind CSS With JavaScript Design Tokens
MODULE 7
Testing components
LESSON 7.1
Module 7 Introduction
LESSON 7.2
React Testing Library - Install and Write Your First Test
LESSON 7.3
Using jest-axe to Find Accessibility Issues in React Components
LESSON 7.4
What is Visual Testing and How Does it Work?
MODULE 8
CI, Changelogs and Publishing
LESSON 8.1
Module 8 Introduction
LESSON 8.2
What are Changesets and How Do They Manage Versioning?
LESSON 8.3
How to Setup a CI/CD Pipeline in GitHub Actions
MODULE 9
Summary
LESSON 9.1
Thank you 🙏
Go to Next Lesson
Go to Next Lesson
LESSON 8.1
Module 8 Introduction
Go Pro
Log In
What is Visual Testing and How Does it Work?
What is Visual Testing and how to use it
Table of Contents
Section 7.1
How does it work?