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

CodeSignal

Advanced UI Features and Theming

via CodeSignal

Overview

Polish your Kanban app with professional UI features and a full theming system. Build a notification system, add loading indicators and empty states, and create light, dark, and sepia modes with persistence and system preference detection for a great user experience.

Syllabus

  • Unit 1: Enhancing the Notification System with Centralized State in Svelte
    • Creating a Reactive Notification Store
    • Adding Auto Dismiss to Notifications
    • Creating Notification Type Helper Functions
    • Building the Notification Component UI
    • Integrating the Notification Manager Component
    • Integrating Notifications with Task Operations
  • Unit 2: Adding Loading States and Indicators in Svelte
    • Creating a Reactive Loading State Store
    • Creating Error Safe Loading Helpers
    • Building a Reusable Loading Indicator Component
    • Integrating Loading States with Task Operations
    • Implementing Loading Indicators for User Feedback
  • Unit 3: Handling Empty States in Svelte Kanban Applications
    • Creating Your First Empty State Component
    • Adding Context Specific Empty States
    • Adding Icons to Empty States
    • Integrating Empty States with Task Lists
    • Implementing Board Level Empty States
  • Unit 4: Creating a Theme System in Svelte Kanban Apps
    • Creating Theme Color Palettes
    • Creating Reactive Theme State
    • Implementing Theme Switching with Persistence
    • Implementing Smart Theme System Initialization
    • Completing the Theme System Integration
  • Unit 5: Building a Theme Switcher UI in Svelte
    • Building a Basic Theme Toggle Component
    • Creating Dynamic Theme Icons
    • Styling the Theme Switcher Component
    • Implementing Theme Selection Dropdown Menu
    • Integrating Theme Switcher into App Header

Reviews

Start your review of Advanced UI Features and Theming

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.