Chakra UI Course Road Map 🚗
Learn Chakra UI - a modular and accessible component library for React apps. Learn how to add Chakra UI to a Next.js website, get an overview of it's components, use it to build a modern, responsive landing page, and more.
Introduction
1.
🚀 Course Introduction
An introduction to this course.
2.
👶 What Is Chakra UI?
Introduction to Chakra UI - a simple, modular and accessible component library for React based apps.
Basics
3.
🕛 Installing + Getting Started
Install Chakra UI in Next.js, React, and Gatsby.
4.
🖼️ Default Theme
Learn how to use the default theme.
5.
🎨 Custom Theme
Learn how to create a custom theme with custom colors, fonts, and more.
6.
🌑 Dark Mode
Add dark mode to your site in just a few lines of code.
7.
⏰ Basic Components
coming soonAn overview of some basic Chakra UI components including Flex, Grid, Text, Heaiding, Button, and more.
8.
🧱 CSS Grid Using Grid Component
coming soonEasily implement a CSS grid using the Chakra UI Grid component.
9.
📦 CSS Flex Box Using Flex Component
coming soonEasily implement a CSS flex box using the Chakra UI Flex component.
Intermediate
10.
🧨 Animating With Framer Motion
coming soonLet's animate some Chakra UI components with Framer Motion!
11.
🔔 SEO
Learn how to easily optimize your website for search engine optimization (SEO) using Chakra UI.
12.
💻 Build A Landing Page
coming soonVideo Guides
13.
📹 Create A Dashboard
Learn how to create a dashboard in Chakra UI!
14.
🚏 Create A Sidebar Navigation
Code a beautiful sidebar navigation using Chakra UI.