Complete Headless UI with Next.js and TailwindCSS
Complete Headless UI with Next.js and TailwindCSS, available at $39.99, with 41 lectures, and has 27 subscribers.
You will learn about Create Menu (Dropdown) component Create Listbox (Select) component Create Combobox (Autocomplete) component Create Switch (Toggle) component Create Disclosure component Create Dialog (Modal) component This course is ideal for individuals who are Developers who want to create components easily with Headless UI It is particularly useful for Developers who want to create components easily with Headless UI.
Enroll now: Complete Headless UI with Next.js and TailwindCSS
Summary
Title: Complete Headless UI with Next.js and TailwindCSS
Price: $39.99
Number of Lectures: 41
Number of Published Lectures: 41
Number of Curriculum Items: 41
Number of Published Curriculum Objects: 41
Original Price: $199.99
Quality Status: approved
Status: Live
What You Will 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 Should Attend
- Developers who want to create components easily with Headless UI
Target Audiences
- Developers who want to create components easily with Headless UI
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.
Course Curriculum
Chapter 1: Headless UI Transition
Lecture 1: Headless UI Transition basic example
Lecture 2: Headless UI Transition using as prop
Lecture 3: Headless UI Transition multiple transition
Chapter 2: Headless UI Dialogue
Lecture 1: Headless UI Dialogue create dialogue
Lecture 2: Headless UI Dialogue manage focus
Lecture 3: Headless UI Dialogue styling
Lecture 4: Headless UI Dialogue transition
Chapter 3: Headless UI Combobox (Autocomplete)
Lecture 1: Headless UI Combobox using object data
Lecture 2: Headless UI Combobox add checkbox
Lecture 3: Headless UI Combobox multiple values
Lecture 4: Headless UI Combobox active current user
Lecture 5: Headless UI Combobox empty values
Lecture 6: Headless UI Combobox transition
Lecture 7: Headless UI Combobox add selector icon
Chapter 4: Headless UI Listbox
Lecture 1: Headless UI Listbox basic example
Lecture 2: Headless UI Listbox active style and react heroicon
Lecture 3: Headless UI Listbox horizontal and vertical
Lecture 4: Headless UI Listbox add transition
Chapter 5: Headless UI Dropdown Menu
Lecture 1: Headless UI Menu (Dropdown) create project
Lecture 2: Headless UI Menu (Dropdown) add style to the menu
Lecture 3: Headless UI Menu (Dropdown) Add transition
Lecture 4: Headless UI Menu (Dropdown) Multiple values
Lecture 5: Headless UI Menu (Dropdown) custom button to toggle show and hide
Lecture 6: Headless UI Menu (Dropdown) using React layout
Lecture 7: Headless UI Menu (Dropdown) mylink
Chapter 6: Headless UI Disclosure
Lecture 1: Headless UI Disclosure basic example
Lecture 2: Headless UI Disclosure
Lecture 3: Headless UI Disclosure
Chapter 7: Headless UI Popover
Lecture 1: Headless UI Popover Basic Example
Lecture 2: Headless UI Popover styling different states
Lecture 3: Headless UI Popover custom button
Lecture 4: Headless UI Popover overlay
Lecture 5: Headless UI Popover transition
Lecture 6: Headless UI Popover grouping
Chapter 8: Headless UI Radio Group
Lecture 1: Headless UI Radio Group basic example
Lecture 2: Headless UI Radio Group add checkbox
Lecture 3: Headless UI Radio Group
Chapter 9: Headless UI Tabs
Lecture 1: Headless UI Tabs basic example
Lecture 2: Headless UI Tabs styling the selected tab
Lecture 3: Headless UI Tabs disable and manually activate
Lecture 4: Headless UI Tabs vertical arrangement and default selection
Instructors
-
Kim Chen
Registered teacher, MSc in Computer Science, Statistics
Rating Distribution
- 1 stars: 0 votes
- 2 stars: 0 votes
- 3 stars: 0 votes
- 4 stars: 0 votes
- 5 stars: 0 votes
Frequently Asked Questions
How long do I have access to the course materials?
You can view and review the lecture materials indefinitely, like an on-demand channel.
Can I take my courses with me wherever I go?
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!
You may also like
- Top 10 Language Learning Courses to Learn in November 2024
- Top 10 Video Editing Courses to Learn in November 2024
- Top 10 Music Production Courses to Learn in November 2024
- Top 10 Animation Courses to Learn in November 2024
- Top 10 Digital Illustration Courses to Learn in November 2024
- Top 10 Renewable Energy Courses to Learn in November 2024
- Top 10 Sustainable Living Courses to Learn in November 2024
- Top 10 Ethical AI Courses to Learn in November 2024
- Top 10 Cybersecurity Fundamentals Courses to Learn in November 2024
- Top 10 Smart Home Technology Courses to Learn in November 2024
- Top 10 Holistic Health Courses to Learn in November 2024
- Top 10 Nutrition And Diet Planning Courses to Learn in November 2024
- Top 10 Yoga Instruction Courses to Learn in November 2024
- Top 10 Stress Management Courses to Learn in November 2024
- Top 10 Mindfulness Meditation Courses to Learn in November 2024
- Top 10 Life Coaching Courses to Learn in November 2024
- Top 10 Career Development Courses to Learn in November 2024
- Top 10 Relationship Building Courses to Learn in November 2024
- Top 10 Parenting Skills Courses to Learn in November 2024
- Top 10 Home Improvement Courses to Learn in November 2024