uibasics

Build beautiful UIs with Tailwind CSS

Solve visual coding puzzles and learn the ins and outs of user interface styling.

It's time to get good at UI Styling!

Learn How

No videos, no lectures - just hands-on practice.

Instead of watching videos, you'll be writing code the whole time and will encounter all the common CSS patterns you need to know.

200+ Visual Exercises

Each exercise gives you a design to replicate, that is either teaching you a new CSS technique or will allow you to build part of an actual UI.

Instant Feedback

With each CSS class you type you'll instantly see how the styling is affected, so you will build an automatic intuition about what each class does.

Custom Auto Completion

The built-in auto completion will help you to learn and remember the different options in Tailwind CSS and will carefully nudge you towards the solution.

CSS Inspector

Our editor will always show you which styles you need to adjust and you can inspect all CSS properties in full detail, to observe what's going on.

Built-in Official Documentation

For every exercise you can access the relevant Tailwind CSS docs with a single click right from within the editor, so you learn directly from the source.

Responsive Viewport

The exercise viewport is easy to resize, so you can check how the designs work on different devices and practice working with the breakpoints in Tailwind CSS.

What's included?

Together with Tailwind CSS you will learn the underlying CSS foundations as well as many user interface design patterns.

Level 1

Typography Free

Get to know the editor while learning about the different text styles that can be controlled with Tailwind.

Font Size
Font Weight
Tracking
Text Alignment
Text Casing
Leading

Level 2

Colors Free

Colors give a UI its personality. Tailwind provides a wide range of predefined colors that can be used to style text, backgrounds, borders, and more.

Background & Text Color
Color Shades
Color Spectrum
Shades of Gray
UI Color Themes

Level 3

Margins

Appropriate vertical spacing is an essential part of any well-designed layout. Learn how to use margins to create a consistent visual hierarchies.

Tailwind Spacing Scale
Headling & Paragraph Spacing
Margin Collapsing
Margin Top vs Bottom
List Spacing

Level 4

Padding & Borders

Learn to distinguish between padding and margins and how to build different types of buttons with borders and rounded corners.

Padding vs Margin
Border Radius
Border Width & Color
Dividers
Button Styles

Level 5

Hover Effects

Add interactivity and visual feedback to your designs with hover effects and learn how to change the look of the mouse cursor.

Change styling on Hover
Avoid layout shifts
Transitions
Scale Up Effect
Shadows
Cursor Styles

Level 6

Flexbox Basics

Flexbox is the most important layout tool in CSS. It allows you to layout, align and distribute space among elements in a very flexible manner.

Block vs Flex
Gaps
Justify & Align
Common Row Layouts
Icon Lists

Level 7

Max Width

One of the most common beginner mistakes is to not set Max Widths appropriately. But if you know how to use it, it will become an essential tools for building responsive UIs.

Max Width Scale
Max Width + Auto Margins = ❤️
Viewport Sizes
Line Length & Readability
Content Sections

Level 8

Personal Website

It's time to bring what you've learnd so far together and build our first real-world website: a developer portfolio. You will build everything from scratch, including:

Header Section
Curriculum Vitae
Project List
Blog Section
Contact CTA
Footer

Level 9

Responsive Breakpoints

Learn how to apply custom styling based on the viewport width using Tailwind's built-in breakpoint utilities

Breakpoint Sizes
Mobile First Approach
Adjust Padding and Text Sizes
Hiding and Showing Elements
Responsive Navigation

Level 10

Images

Images are a vital part of pretty much any website. In this level you learn some important tips and tricks for sizing and displaying images.

Image Sizing
Using Specific Pixel Values
Aspect Ratio
Object Fit & Position
Adapting Image Sizes to the Viewport

Level 11

Grid

Learn how to create complex grid layouts and build responsive designs using the CSS Grid layout algorithm.

Block vs Flex vs Grid
Grid Columns
Vertical and Horizontal Taps
Column and Row Span
Freely Position Grid Items
Align and Justify Items

Level 12

Position

Escape the default layout flow and position elements exactly where you want using absolute, fixed and relative positioning.

Fixed Positioning
Settings Offsets
Inset Shorthand
Relative & Absolute Positions
Creating Layers
Z-Index
Sticky Headers

Level 13

Advanced Flexbox

After some practice with the basics, it's time to take a deeper dive into the Flexbox algorithm. You'll learn about:

Flex Direction: Row vs Column
Switching item order on Breakpoints
Grow, Shrink and Basis
Flex Wrap
Self Justify & Align
Flex + Auto Margins = ❤️

Level 14

Forms

Forms are the underappreciated workhorses of the web. In this lesson, you will learn everything you need to build beautiful and accessible forms.

Text Input Fields
Focus Styling
Outline
Custom Form Elements
Select Boxes
Text Areas

Level 15

Overflow & Page Layouts

Handling overflow is one of the most tricky parts of web design. We'll rebuild some of the most common app layouts to highlight frequently used techniques.

Overflow Property
App Header Layout
Mobile Bottom Navigation
Scrollable Modal Dialog
Desktop App Layout
Kanban Board Layout

Level 16

App Screen

To consolidate everything you've learned, we'll finish the course by building an entire screen for an imaginary web app called Taskly.

Resposinve Sidebar & App Header
Navigation Link Styling
Page Header with Tabs & Search
List View
Floating Action Button

Go to Learning Path

Get UI Basics today

Learn to build beautiful user interfaces with Tailwind CSS

16 Levels
200+ individual exercises
Lifetime access
30-day moneyback gurantee

Full Course Access

Limited Time Launch Offer

€20

One-time Payment

Frequently asked questions

Can't find the answer you're looking for? Reach out to support@uibasics.dev

Is there a free trial available?

The first three levels are free to access. You can try out the exercises and see if UI Basics is the right choice for you.

Is there a money back guarantee?

Yes, we offer a 30-day money back guarantee. If you're not satisfied with UI Basics for any reason, just send us an email and we'll refund your payment.

There's a CSS topic I am missing, why is that?

We try hard to keep the course as concise as possible, so the time you invest will be entirely spend on practicing the CSS techniques you absolutely need to master. The topics we decided to leave out (e.g. dark mode and transforms) should be easy to pick up from the docs once you completed the course. In any case if there are extra levels you'd love to see added, please let us know about it!

I found an issue in one of the exercises, what should I do?

We are constantly testing and improving the exercises. If you find an issue we missed, we'll be super grateful if you reach out to us at support@uibasics.dev, so we can get that fixed quickly.