Study project · features 306-330

Learn UI/UX by reading the code that runs it

25 small lessons, each with a live demo and the real Java, SQL, HTML, CSS and JavaScript behind it. Built with Spring Boot, Thymeleaf and SQL Server. No front-end libraries: everything is plain code you can read.

Start with lesson 306

Lessons: 25
Tables: 10
Products: 120
Libraries: 0

Design with tokens

Every colour in this app is a CSS custom property, so one switch changes the whole theme.

Open Dark Mode

Feedback that feels fast

Skeletons, spinners and progress bars tell people the app is working.

See Skeleton Loading

Keyboard first

Press Ctrl + K anywhere to jump to any lesson, or ? for every shortcut.

Open Shortcuts

Touch friendly

Swipe this carousel, drag Kanban cards and pinch to zoom photos.

Try Drag and Drop

Saved in SQL Server

Theme, font size, colour and sidebar state are stored per browser.

Theme Color

Layout & theme

7 lessons

Responsive Design

รองรับทุกหน้าจอ

One layout that adapts from a 320px phone to a wide desktop, using CSS Grid, media queries and container queries.

Open lesson 307

Dark Mode

โหมดมืด

A dark colour scheme built only from CSS custom properties, saved per browser in SQL Server and rendered by the server so it never flashes.

Open lesson 308

Light Mode

โหมดสว่าง

The default bright scheme, the same tokens with light values, plus a contrast check of every token pair.

Open lesson 309

Font Size Adjust

ปรับขนาดตัวอักษร

Scale the whole interface from 80% to 140% by changing one root font size; every size in the app is in rem.

Open lesson 310

Theme Color

เปลี่ยนสีธีม

Choose a primary colour from presets or a colour picker; tints and text colour are derived automatically.

Open lesson 311

Sidebar Collapse

ย่อแถบเมนู

Collapse the menu to an icon rail with tooltips; on small screens it becomes an off-canvas drawer.

Open lesson 312

Breadcrumb Navigation

เส้นทางนำทาง

A trail of links that shows where you are; built on the server from the request and the database.

Feedback

4 lessons

Loading Spinner

ตัวหมุนแสดงการโหลด

Spinners for buttons, inline text and the whole screen while a slow server call runs.

Open lesson 314

Skeleton Loading

โครงร่างระหว่างโหลด

Grey shapes with the same size as the real cards appear first, so the page does not jump when data arrives.

Open lesson 315

Progress Bar

แถบความคืบหน้า

Determinate and indeterminate bars: a real upload with XHR progress events, a server job polled from SQL Server and a top page bar.

Open lesson 316

Toast Notification

ข้อความแจ้งเตือนชั่วคราว

Small messages that slide in, stack, pause on hover and close themselves; server events are also stored as notifications.

Overlays

3 lessons

Modal Dialog

ป็อปอัพ

The native <dialog> element with a form; focus is trapped inside, Esc closes it and errors come from Bean Validation.

Open lesson 318

Confirm Dialog

ยืนยันก่อนลบ

A promise-based replacement for window.confirm(), with a danger style and type-to-confirm for big deletes.

Open lesson 319

Tooltip

คำอธิบาย

Short hints on hover and keyboard focus, positioned above, below, left or right and flipped when there is no room.

Content

5 lessons

Accordion

ย่อ-ขยายเนื้อหา

FAQ from SQL Server in collapsible panels, with single-open mode, expand all and search.

Open lesson 321

Tab Panel

ARIA tabs with arrow-key navigation; each tab's content is loaded from the server only when first opened.

Open lesson 322

Stepper

แสดงขั้นตอน

A four-step order wizard with per-step validation; the final step saves the order in SQL Server.

Open lesson 323

Carousel

สไลด์

Slides from SQL Server with autoplay, dots, arrows, swipe and keyboard, using CSS scroll-snap.

Open lesson 324

Lazy Load

โหลดเมื่อต้องการ

Images load only when they come near the screen, and the product list loads the next page as you scroll.

Interaction

6 lessons

Keyboard Shortcut

ปุ่มลัด

Global shortcuts and a command palette; the shortcut list is stored in SQL Server and can be changed.

Open lesson 326

Right-click Context Menu

เมนูคลิกขวา

A custom right-click menu on notes: rename, colour, pin, duplicate and delete, all saved in SQL Server.

Open lesson 327

Drag and Drop

ลากและวาง

A Kanban board built with Pointer Events (mouse, pen and touch); the new order is saved in one transaction.

Open lesson 328

Zoom In/Out Image

ซูมรูปภาพ

A lightbox that zooms with the wheel, buttons, double-click and pinch, and pans by dragging.

Open lesson 329

Back to Top Button

ปุ่มกลับขึ้นด้านบน

A floating button that appears after you scroll down, shows how far you are, and scrolls smoothly back up.

Open lesson 330

Full Screen Mode

โหมดเต็มหน้าจอ

Show the whole app or a single panel in full screen with the Fullscreen API.

How this app is built

Server

Spring Boot 3.5 renders every page with Thymeleaf. Small JSON APIs under /api serve the demos.

Database

SQL Server, schema by Flyway (V1__schema.sql), JPA entities checked with ddl-auto=validate.

Browser

One stylesheet with design tokens, core.js for the shared UI kit and demos.js for each lesson.

Source in every lesson

Code regions are marked with [lesson:NNN] comments and shown on the lesson page.

Changed the sample tasks, notes or orders? Put the originals back.