Complete Headless UI with Next.js and TailwindCSS

Focused View

Kim Chen

2:59:01

225 View

1 - Headless UI Transition

1 - Headless UI Transition basic example.mp4

04:33

2 - Headless UI Transition using as prop.mp4

00:14

3 - Headless UI Transition multiple transition.mp4

05:22

2 - Headless UI Dialogue

4 - Headless UI Dialogue create dialogue.mp4

08:18

5 - Headless UI Dialogue manage focus.mp4

01:42

6 - Headless UI Dialogue styling.mp4

04:32

7 - Headless UI Dialogue transition.mp4

05:07

3 - Headless UI Combobox Autocomplete

8 - Headless UI Combobox using object data.mp4

02:52

9 - Headless UI Combobox add checkbox.mp4

05:54

10 - Headless UI Combobox multiple values.mp4

02:20

11 - Headless UI Combobox active current user.mp4

02:27

12 - Headless UI Combobox empty values.mp4

01:05

13 - Headless UI Combobox transition.mp4

01:40

14 - Headless UI Combobox add selector icon.mp4

01:33

4 - Headless UI Listbox

15 - Headless UI Listbox basic example.mp4

05:32

16 - Headless UI Listbox active style and react heroicon.mp4

05:02

17 - Headless UI Listbox horizontal and vertical.mp4

02:03

18 - Headless UI Listbox add transition.mp4

01:56

5 - Headless UI Dropdown Menu

19 - Headless UI Menu Dropdown create project.mp4

06:25

20 - Headless UI Menu Dropdown add style to the menu.mp4

03:56

21 - Headless UI Menu Dropdown Add transition.mp4

02:44

22 - Headless UI Menu Dropdown Multiple values.mp4

02:20

23 - Headless UI Menu Dropdown custom button to toggle show and hide.mp4

04:45

24 - Headless UI Menu Dropdown using React layout.mp4

03:34

25 - Headless UI Menu Dropdown mylink.mp4

05:36

6 - Headless UI Disclosure

26 - Headless UI Disclosure basic example.mp4

10:26

27 - Headless UI Disclosure.mp4

06:22

28 - Headless UI Disclosure.mp4

04:44

7 - Headless UI Popover

29 - Headless UI Popover Basic Example.mp4

08:47

30 - Headless UI Popover styling different states.mp4

03:02

31 - Headless UI Popover custom button.mp4

09:51

32 - Headless UI Popover overlay.mp4

01:24

33 - Headless UI Popover transition.mp4

01:51

34 - Headless UI Popover grouping.mp4

02:38

8 - Headless UI Radio Group

35 - Headless UI Radio Group basic example.mp4

12:29

36 - Headless UI Radio Group add checkbox.mp4

03:46

37 - Headless UI Radio Group.mp4

03:34

9 - Headless UI Tabs

38 - Headless UI Tabs basic example.mp4

09:21

39 - Headless UI Tabs styling the selected tab.mp4

04:15

40 - Headless UI Tabs disable and manually activate.mp4

02:39

41 - Headless UI Tabs vertical arrangement and default selection.mp4

02:20

Description

Create Menu (Dropdown), Listbox (Select), Combobox (Autocomplete), Switch (Toggle), Disclosure, Dialog (Modal), Popover

What You'll Learn?

Create Menu (Dropdown) component
Create Listbox (Select) component
Create Combobox (Autocomplete) component
Create Switch (Toggle) component
Create Disclosure component
Create Dialog (Modal) component

Who is this for?

Developers who want to create components easily with Headless UI

More details

Description
What we are going to learn?
We will walk through all the components in Headless UI, including Menu (Dropdown), Listbox (Select), Combobox (Autocomplete), Switch (Toggle), Disclosure, Dialog (Modal), Popover, Radio Group, Tabs and Transition.

Why Headless UI?
Headless UI, a component library for React.js or Vue.js called Headless UI was developed by the same team who made Tailwind CSS. Our developers like not having to alter or get past the pre-installed default styles of other component libraries. Developers may concentrate more productively on the user experience and business challenge because to the components' deep functionality, complete accessibility, and frictionless aesthetics. Unsurprisingly, Tailwind CSS classes work well with Headless UI.

Why Nextjs?
All of the React components that make up a website's user-facing section are rendered on the server first. This means that after the HTML has been transmitted to the client (the user's browser), the user can read the material on the page without having to do anything further. The user perceives page loading speeds to be substantially faster as a result of this.
SSR also provides an out-of-the-box, indexable and crawlable website, which is critical for Search Engine Optimization (SEO) because no client-side javascript is required to view the page content. Essentially, increased technical SEO benefits our clients.

Why tailwindCSS?
Tailwind CSS is a popular low-level CSS framework with a lot of customization options. Bootstrap is widely used as a comparison. They are, nevertheless, essentially different. Rather of delivering pre-designed components like Bootstrap, Tailwind provides building pieces that allow developers to quickly create designs.
Who this course is for:
Developers who want to create components easily with Headless UI

User Reviews

Rating

average 0

Total votes0

Focused display

He is a registered teacher who has experience in teaching javascript, physics, maths and statistics for over 10 years.He got a master degree in data science and statistics, computer science in the University of Hong Kong.He got GPA 3.55/4.0 and got A in the following subjects Foundations of Data ScienceStatistics of ManagementRegression in PracticeStochastic ModellingSimulations and Statistical ComputingHe now enjoys teaching others and continues to learn every single day.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.