Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Building Basic Kanban Components

Go to class Write review

Overview

Build the core UI for a Kanban task board with Svelte 5's component system. Learn to structure a Svelte app, create reusable components with proper props, implement responsive design, and add polish with CSS transitions—all using accessible, semantic HTML.

Syllabus

Unit 1: Building the Kanban Page Structure in Svelte

Creating Your First Svelte Page
Styling Your Kanban Board Page

Unit 2: Building the Board Layout

Creating Your First Board Component
Adding Column Placeholders to Board
Styling the Board with Flexbox
Styling Column Placeholders for Visual Appeal
Making the Board Mobile Responsive

Unit 3: Designing Dynamic Column Components

Creating Your First Column Component
Adding a Task Container
Rendering Children with Svelte 5 Directives
Styling Columns for Visual Appeal

Unit 4: Creating Interactive Task Cards

Creating Your First Task Card Component
Conditional Rendering for Task Descriptions
Making Task Cards Keyboard Accessible
Styling Task Cards for Visual Appeal
Populating Your Kanban Board with Tasks

Unit 5: Enhancing UI with Visual Feedback

Adding Interactivity to Task Cards
Adding Smooth Transitions to Task Cards
Adding Hover Effects to Columns

Reviews

Start your review of Building Basic Kanban Components