Yiga AI

Course 11 of 19

Tailwind CSS & Modern UI

Utilities, Components, Dark mode, and more.

Yiga AI

Beginner en

Beginner · Course · 3 weeks at 5 hrs/week

Duration
3 weeks
Effort
5 hrs/week
Lessons
16
Hands-on exercises
16
Projects
1
Language
en

What you’ll learn

Skills you can put to work.

How the Web Works

HTML & CSS

JavaScript Fundamentals

Git & GitHub

Syllabus

Every module, step by step.

4 modules · 21 lessons · 14 hours · 1 graded project

840 minutes of guided lesson time.

Sign in and enrol to unlock every lesson. The first lesson is open as a preview.

Module 1 · 5 lessons · 3 hoursUtilitiesModule 1 of 4 in Tailwind CSS & Modern UI.

  1. Overview and set-up

    Overview and set-up — Utilities in Tailwind CSS & Modern UI.

    Lesson

    40 min

  2. Core concepts

    Core concepts — Utilities in Tailwind CSS & Modern UI.

    Lesson · Locked

    40 min

  3. Worked example

    Worked example — Utilities in Tailwind CSS & Modern UI.

    Lesson · Locked

    40 min

  4. Hands-on practice

    Hands-on practice — Utilities in Tailwind CSS & Modern UI.

    Lesson · Locked

    40 min

  5. Module quiz: Utilities

    Check what you learned in Utilities before moving on.

    Quiz · Locked

    20 min
Module 2 · 5 lessons · 3 hours LockedComponentsModule 2 of 4 in Tailwind CSS & Modern UI.

  1. Overview and set-up

    Overview and set-up — Components in Tailwind CSS & Modern UI.

    Lesson · Locked

    40 min

  2. Core concepts

    Core concepts — Components in Tailwind CSS & Modern UI.

    Lesson · Locked

    40 min

  3. Worked example

    Worked example — Components in Tailwind CSS & Modern UI.

    Lesson · Locked

    40 min

  4. Hands-on practice

    Hands-on practice — Components in Tailwind CSS & Modern UI.

    Lesson · Locked

    40 min

  5. Module quiz: Components

    Check what you learned in Components before moving on.

    Quiz · Locked

    20 min
Module 3 · 5 lessons · 3 hours LockedDark modeModule 3 of 4 in Tailwind CSS & Modern UI.

  1. Overview and set-up

    Overview and set-up — Dark mode in Tailwind CSS & Modern UI.

    Lesson · Locked

    40 min

  2. Core concepts

    Core concepts — Dark mode in Tailwind CSS & Modern UI.

    Lesson · Locked

    40 min

  3. Worked example

    Worked example — Dark mode in Tailwind CSS & Modern UI.

    Lesson · Locked

    40 min

  4. Hands-on practice

    Hands-on practice — Dark mode in Tailwind CSS & Modern UI.

    Lesson · Locked

    40 min

  5. Module quiz: Dark mode

    Check what you learned in Dark mode before moving on.

    Quiz · Locked

    20 min
Module 4 · 6 lessons · 5 hours LockedDesign systemsModule 4 of 4 in Tailwind CSS & Modern UI.

  1. Overview and set-up

    Overview and set-up — Design systems in Tailwind CSS & Modern UI.

    Lesson · Locked

    40 min

  2. Core concepts

    Core concepts — Design systems in Tailwind CSS & Modern UI.

    Lesson · Locked

    40 min

  3. Worked example

    Worked example — Design systems in Tailwind CSS & Modern UI.

    Lesson · Locked

    40 min

  4. Hands-on practice

    Hands-on practice — Design systems in Tailwind CSS & Modern UI.

    Lesson · Locked

    40 min

  5. Module quiz: Design systems

    Check what you learned in Design systems before moving on.

    Quiz · Locked

    20 min

  6. Graded project: Tailwind CSS & Modern UI

    Apply everything from Tailwind CSS & Modern UI in one graded, portfolio-ready build.

    Graded project · Locked

    120 min

Applied learning project

Make the learning visible.

Use Graded project: Tailwind CSS & Modern UI to apply this course to a practical challenge. You’ll finish with a clear solution and the reasoning behind your choices.

Apply the course’s core skillMake and explain practical decisionsCreate evidence you can share
Grace A., AI for professions

Your instructor

Grace A.

AI for professions

Shows working professionals how to use AI responsibly inside everyday workflows.

Samuel Mwangi, Yiga learner

“The examples felt relevant to public service and worked on the connection I actually have.”

Samuel Mwangi

Public service officer, Nairobi

Continue with

Your next best step.

Following the order of Full-Stack Web Developer.

See the full chain

Next lesson

Overview and set-up

Tailwind CSS & Modern UI

40 min · Resume

Course 12 in the track

Advanced React & TypeScript

TypeScript, Context, Performance, and more.

Intermediate · Course · 4 weeks at 5 hrs/week

Course 13 in the track

Next.js Full-Stack

App router, Server actions, API routes, and more.

Intermediate · Course · 4 weeks at 5 hrs/week

Course 14 in the track

React Fundamentals

Components, State, Hooks, and more.

Intermediate · Course · 4 weeks at 5 hrs/week

Learner reviews

What learners say.

Write a review

Sign in to share your experience with this course.

Sign in to review

Loading reviews…

Previous courseGit & GitHubNext courseAdvanced React & TypeScript

Keep going

Other courses in this track.

View full track
Technical Interview Prep cover illustration
Career

20 lessons · 16.7h · Advanced

Technical Interview Prep

Structured practice for coding interviews, plus mock interviews with feedback.

Yiga Plus
Modern Web Development cover illustration
Programming

25 lessons · 19.5h · Intermediate

Modern Web Development

Build and ship responsive web apps with HTML, CSS, JavaScript and React.

Yiga Plus