HTML / CSS / JavaScript

Examples Library

Choose a complete case study to view the result, modify the source, and run it in the browser.

1046Page 42 / 44
Showing 24 examples
0985Drawing and Data Visualization

Civic Signal Capability Radar Chart

Complete a capability radar chart in a public signal map scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Drawing and Data VisualizationCapability Radar ChartHTMLCanvasJavaScript
Open and run
0986Browser Media and Device Capabilities

Outpatient Sensor Pointer Capability Check

Complete pointer capability detection in the clinic sensor seat scenario: includes real content, interactive controls, clear status feedback, and responsive layouts.

Browser Media and Device CapabilitiesPointer Capability DetectionHTMLCSSBrowser API
Open and run
0987Mini Apps and Mini Games

Class Reward Focus Timer

Build a focus timer for a classroom rewards scenario, including real content, actionable controls, clear state feedback, and responsive layouts across sizes.

Mini Apps and Mini GamesFocus TimerHTMLCSSJavaScript
Open and run
0988Basic Controls and Selectors

Stage Control Room Dual-Value Range Control

Complete dual-value range control in the performance control console scenario: includes real content, interactive controls, clear state feedback, and responsive layouts across sizes.

Basic Controls and SelectorsDual-range controlHTMLCSSJavaScript
Open and run
0989Forms and input

Shift Schedule Form Multi-step Entry Flow

Complete a step-by-step input flow in a shift schedule table scenario: includes real content, interactive controls, clear state feedback, and a cross-size layout.

Forms and inputStep-by-step form filling flowHTMLCSSJavaScript
Open and run
0990Navigation and Menus

Maker Forum section-spy navigation

Section-based navigation completed in a maker forum scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.

Navigation and MenusSection-spy navigationHTMLCSSJavaScript
Open and run
0991Floating layers and status feedback

Mentor Update Window Notification Center

Complete a notification center in a mentor update window scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Floating layers and status feedbackNotification CenterHTMLCSSJavaScript
Open and run
0992Cards, Lists, and Content Organization

Filterable Recipe Collection Card Wall

Complete a filterable card wall for a recipe collection scenario: include real content, actionable controls, clear state feedback, and responsive layouts across sizes.

Cards, Lists, and Content OrganizationFilterable Card WallHTMLCSSJavaScript
Open and run
0993Tables and data display

Studio Settlement Sheet Mobile Card Table

Complete the mobile card table for a studio payout sheet scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Tables and data displayMobile card tableHTML TableCSSJavaScript
Open and run
0994Page Layout and Responsive

Greenhouse Diary Sticky Sidebar Layout

Complete a sticky sidebar layout for the greenhouse diary scenario: includes real content, actionable controls, clear state feedback, and responsive layouts across sizes.

Page Layout and ResponsiveSticky Sidebar LayoutHTMLCSS GridResponsive Design
Open and run
0995Marketing and content scenarios

Studio Preview Night testimonial wall

Complete the testimonial story wall for the studio preview night scenario: includes realistic content, actionable controls, clear status feedback, and responsive layouts.

Marketing and content scenariosWord-of-mouth story wallHTMLCSSJavaScript
Open and run
0996Dashboard and Admin Interfaces

Housing Dispatch Pipeline Board

Complete the workflow pipeline board in a care-dispatch hall scenario: includes realistic content, actionable controls, clear status feedback, and responsive layouts across sizes.

Dashboard and Admin Interfacesprocess pipeline panelHTMLCSS GridJavaScript
Open and run
0997Basic Controls and Selectors

Performance Demo Screen Filter Tag Group

Complete the filter chip group for the performance demo screen scenario: include real content, interactive controls, clear status feedback, and a responsive layout across sizes.

Basic Controls and SelectorsFilter Tag GroupHTMLCSSJavaScript
Open and run
0998Forms and input

Shift Support Ticket Password Strength Feedback

Complete password strength feedback in a shift-support scenario: includes real content, actionable controls, clear status feedback, and cross-size layout.

Forms and inputPassword strength feedbackHTMLCSSJavaScript
Open and run
0999Navigation and Menus

Media Room Tree Navigation

Complete a tree navigation in a media room scenario: includes real content, interactive controls, clear state feedback, and a responsive layout.

Navigation and MenusTree NavigationHTMLCSSJavaScript
Open and run
1000Floating layers and status feedback

Approval Action Sheet Progress Blocker

Complete the progress blocker in an approval form scenario: includes real content, interactive controls, clear state feedback, and responsive layout.

Floating layers and status feedbackProgress overlayHTMLCSSJavaScript
Open and run
1001Cards, Lists, and Content Organization

Research Clips Kanban Board

Complete a task board for a research clips scenario: includes real content, interactive controls, clear state feedback, and cross-size layouts.

Cards, Lists, and Content OrganizationTask boardHTMLCSS GridJavaScript
Open and run
1002Tables and data display

Studio Roster Bulk Selection Table

Complete the bulk selection table for the studio roster scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Tables and data displayBatch selection tableHTML TableCSSJavaScript
Open and run
1003Page Layout and Responsive

Garden Special Adaptive Gallery

Complete an adaptive gallery in a garden digest scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.

Page Layout and ResponsiveResponsive GalleryHTMLCSSJavaScript
Open and run
1004Marketing and content scenarios

Studio Program Guide Case Study

Complete a case study page in a studio project handbook scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across screen sizes.

Marketing and content scenarioscase study pageHTMLCSS GridResponsive Design
Open and run
1005Dashboard and Admin Interfaces

Housing Response Line Resource Usage Dashboard

Complete the resource usage panel in a housing incident response scenario: include real content, interactive controls, clear status feedback, and responsive layouts across sizes.

Dashboard and Admin InterfacesResource Usage PanelHTMLCSS GridJavaScript
Open and run
1006Business and Service Flows

Outpatient Service Line Seat Selector

Complete the seat selector in a clinic service-flow scenario: includes realistic content, actionable controls, clear state feedback, and responsive layouts across sizes.

Business and Service FlowsSeat PickerHTMLCSSJavaScript
Open and run
1007Typography and Text Effects

Course reader rhythm marquee text

Complete the rhythmic marquee text in a course reader scenario: includes real content, interactive controls, clear state feedback, and responsive layouts.

Typography and Text EffectsRhythmic marquee textHTMLCSS AnimationJavaScript
Open and run
1008Animation & Microinteractions

Outpatient Trigger List Staggered Entry

Complete the staggered list entry flow in a clinic trigger scenario: includes real content, actionable controls, clear state feedback, and responsive layouts.

Animation & MicrointeractionsStaggered List EntryHTMLCSS AnimationJavaScript
Open and run