HTML / CSS / JavaScript

Examples Library

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

1046Page 31 / 44
Showing 24 examples
0721Dashboard and Admin Interfaces

Course Incident Resolution Board

Complete an incident response dashboard in a course incident line scenario: includes realistic content, interactive controls, clear status feedback, and responsive layouts across sizes.

Dashboard and Admin InterfacesIncident Response DashboardHTMLCSS GridJavaScript
Open and run
0722Basic Controls and Selectors

Loft Control Deck Color Swatches

Complete color swatch selection in the loft control console scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.

Basic Controls and SelectorsColor Sample SelectionHTMLCSSJavaScript
Open and run
0723Forms and input

Grant Application Local Suggestion Input

A local-suggestions input completed for a grant application scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.

Forms and inputLocal suggestion inputHTMLCSSJavaScript
Open and run
0724Navigation and Menus

Campus quick index responsive main menu

Create a responsive primary menu for the campus quick index scenario: includes real content, interactive controls, clear status feedback, and cross-size layouts.

Navigation and MenusResponsive main menuHTMLCSSJavaScript
Open and run
0725Floating layers and status feedback

Gallery Confirmation Card Bottom Action Panel

Complete the bottom sheet in the gallery confirmation card scenario: includes real content, interactive controls, clear state feedback, and responsive layout.

Floating layers and status feedbackBottom action panelHTMLCSSJavaScript
Open and run
0726Cards, Lists, and Content Organization

Outpatient prompt card expandable records

Complete the expandable records pattern for the clinic prompt cards scenario: real content, interactive controls, clear status feedback, and responsive layout across screen sizes.

Cards, Lists, and Content OrganizationExpandable RecordsHTMLCSSJavaScript
Open and run
0727Tables and data display

Exhibit Ledger Sticky Header

Complete the sticky header in the exhibit ledger scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Tables and data displaySticky HeaderHTML TableCSSJavaScript
Open and run
0728Page Layout and Responsive

Care guide split-screen narrative layout

Complete a split-screen narrative layout in a care-guide scenario: real content, interactive controls, clear state feedback, and responsive layouts across sizes.

Page Layout and ResponsiveSplit-screen narrative layoutHTMLCSS GridResponsive Design
Open and run
0729Marketing and content scenarios

Creative Project Handbook Pricing Page

Complete a pricing plans page for the creative project booklet scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.

Marketing and content scenariosPricing PlansHTMLCSSJavaScript
Open and run
0730Dashboard and Admin Interfaces

Key metrics overview for the course planning room

Complete a KPI overview in the class planning room scenario: includes real content, actionable controls, clear status feedback, and layouts that adapt across sizes.

Dashboard and Admin InterfacesKey Metrics OverviewHTMLCSS GridJavaScript
Open and run
0731Business and Service Flows

Care Service Flow Return and Exchange Request

Complete the return and exchange request flow in a care-service scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Business and Service Flowsreturn and exchange request flowHTMLCSSJavaScript
Open and run
0732Typography and Text Effects

Archive Reader Dynamic Typography

Complete dynamic typography composition for the archive reader scenario: include real content, interactive controls, clear status feedback, and cross-size layouts.

Typography and Text EffectsDynamic TypographyHTMLCSS AnimationJavaScript
Open and run
0733Animation & Microinteractions

Catalog tracker spring control feedback

Complete elastic control feedback in a catalog-tracker scenario: includes realistic content, actionable controls, clear status feedback, and responsive cross-size layouts.

Animation & MicrointeractionsSpring Control FeedbackHTMLCSS AnimationJavaScript
Open and run
0734Creative Visual Effects

Cloud lake stage confetti burst effect

Complete the confetti burst effect in the cloud lake stage scene: includes real content, actionable controls, clear status feedback, and a cross-size layout.

Creative Visual EffectsConfetti Burst EffectHTMLCanvasJavaScript
Open and run
0735Drawing and Data Visualization

Air Review Binder Capability Radar Chart

Complete an ability radar chart in an air review notebook scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.

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

Audio tablet pointer capability test

Complete pointer capability detection for an audio tablet scenario: includes real content, interactive controls, clear state feedback, and layouts across sizes.

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

Archive Sprint Focus Timer

Complete a focus timer in an archive sprint scenario: includes realistic content, actionable controls, clear status feedback, and responsive layouts.

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

Loft Demo Screen Dual-Range Control

Complete the dual-range control in the loft demo screen scenario: includes realistic content, interactive controls, clear status feedback, and responsive layouts.

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

Homestay Confirmation Card Multi-step Form

Complete a step-by-step flow for the staying confirmation card scenario: includes realistic content, actionable controls, clear state feedback, and layouts that adapt across sizes.

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

Campus Resource Shelf Section Spy Navigation

Complete chapter navigation for the campus resource shelf scenario: include realistic content, interactive controls, clear status feedback, and responsive layouts across sizes.

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

Gallery Proof Notification Center

Complete the Notification Center in a gallery proofing scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.

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

Outpatient Directory Board Filterable Card Wall

Build a filterable card wall in a clinic roster board scenario: includes realistic content, interactive controls, clear status feedback, and responsive layout across sizes.

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

Exhibit Settlement Mobile Card Table

Complete the mobile card table in the exhibit settlement sheet scenario: includes real content, actionable controls, clear status feedback, and cross-size layouts.

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

Care Exhibit Sticky Sidebar Layout

Complete a sticky sidebar layout in a care exhibition scenario: includes real content, actionable controls, clear status feedback, and cross-size layout.

Page Layout and ResponsiveSticky Sidebar LayoutHTMLCSS GridResponsive Design
Open and run