YoVDO

Build a Modern User Interface with Chakra UI

Offered By: egghead.io

Tags

Chakra UI Courses React Courses Prototyping Courses User Interface Design Courses Responsive Design Courses Front-end Development Courses

Course Description

Overview

After completing this course, you will be able to build well-designed user interfaces without spending a lot of time (if even) styling every component and element. You will drastically simplify your front-end work and learn to modify and build on top of existing design systems.
Chakra UI is a React components library with built-in accessibility. It comes with a modern-looking design system that's easily extendable and configurable. The simple styling API significantly reduces development time, so developers can quickly prototype their ideas and achieve the desired style and "brand" by editing a single file.
The result of using Chakra UI is a well-designed app that's accessible out-of-the-box, achieved with minimal effort and time.
In this course, you'll learn how to build a checkout UI.
In the first phase of the course, you will learn all about the built-in components. Then we will override the theme, add custom fonts and colors, and make our UI unique.
This course provides all the design files to follow along. You can download them here.

Syllabus

  • Install and Setup Chakra UI in a React Project
  • Build a Layout with the Container, Flex and VStack Component in Chakra UI
  • Build a 2-Column Form with the SimpleGrid, FormControl, and Input Component in Chakra UI
  • Create a Dark Mode Switcher in Chakra UI
  • Implement Responsive Design in Chakra UI
  • Define Custom Colors and Fonts in Chakra UI
  • Use Theme Extensions in Chakra UI
  • Override the Built-in Component's Styles in Chakra UI
  • Create Custom Variants in Chakra UI

Taught by

Lazar Nikolov

Related Courses

Angular 17
LearnQuest via Coursera
Application Front End (Traditional Chinese)
Amazon Web Services via AWS Skill Builder
Building a Media Sharing Website - Part 1: Media Upload
Amazon Web Services via AWS Skill Builder
Learn Advanced React
Codecademy
Learn Build Tools
Codecademy