https://github.com/chakra-ui/panda-mastery-lessons
Panda Mastery Course Content (as Code)
https://github.com/chakra-ui/panda-mastery-lessons
css css-in-js jsx layout monorepo patterns recipes
Last synced: about 2 months ago
JSON representation
Panda Mastery Course Content (as Code)
- Host: GitHub
- URL: https://github.com/chakra-ui/panda-mastery-lessons
- Owner: chakra-ui
- Created: 2024-07-22T14:09:58.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-09-10T23:38:28.000Z (9 months ago)
- Last Synced: 2025-09-14T15:58:40.702Z (9 months ago)
- Topics: css, css-in-js, jsx, layout, monorepo, patterns, recipes
- Language: TypeScript
- Homepage: https://www.pandamastery.com/
- Size: 253 KB
- Stars: 19
- Watchers: 0
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Panda Mastery Course
Welcome to the Panda Mastery Course! This course consists of 12 modules designed to help developers become expert in using Panda CSS when building modern web applications.
Panda Mastery is a step-by-step guide that will help you master the Panda CSS framework and level up your web development skills. Using a Vite and React project, you'll learn to create stunning and responsive user interfaces with ease.
## Modules
1. Introduction
2. Styling Foundations
3. Layout Patterns
4. Color Mode
5. Recipes
6. Slot Recipes
7. Config Recipes
8. Design Tokens
9. Migration
10. Theming
11. JSX Style Props
12. Monorepo
## Getting Started
To get started with the course, simply clone the repository and run `pnpm install` to install the necessary dependencies. Then, run vite to start the development server and open the project in your web browser.
Each module will include a series of lessons, with a video lecture and a code exercise to help you reinforce your learning. Be sure to complete each exercise before moving on to the next module.
## Branching Out
To access the code for each lesson, branch out from the main branch to a new branch for the lesson. For example, to access the code for module 2 lesson 2, switch to it using `git checkout 02-lesson2`.
## Completing the Course
Once you have completed all 12 modules, you will have a solid understanding of Panda CSS and be able to build responsive, maintainable, and scalable web applications.
Have fun building!