HTML / CSS / JavaScript

Examples Library

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

1046Page 26 / 44
Showing 24 examples
0601Cards, Lists, and Content Organization

Sound Notebook Expandable Records

Complete the expandable records for the sound notebook scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

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

Outpatient Ledger Sticky Header

Complete the sticky table header in a clinic ledger scenario: includes real content, interactive controls, clear status feedback, and layouts across sizes.

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

Archive Brochure Master-Detail Layout

Complete a master-detail content layout in an archive brochure scene: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Page Layout and ResponsiveMaster-detail content layoutHTMLCSSJavaScript
Open and run
0604Marketing and content scenarios

Clinic open day subscription conversion page

Complete the subscription conversion page in the outpatient open day scenario: includes real content, actionable controls, clear status feedback, and cross-size layout.

Marketing and content scenariosSubscription Landing PageHTMLCSSJavaScript
Open and run
0605Dashboard and Admin Interfaces

Archive Disposition Line KPI Overview

Complete the key KPI overview in the archive disposal line scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.

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

Care Appointment Ledger Invoice Builder

Complete the invoice generator for the care appointment desk scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.

Business and Service FlowsBill GeneratorHTMLCSSJavaScript
Open and run
0607Typography and Text Effects

Archive caption poetry grid layout

Complete the poetry grid layout in an archival exhibit-sign context: include real content, operable controls, clear status feedback, and responsive layouts across sizes.

Typography and Text EffectsPoetry grid typographyHTMLCSS GridResponsive Design
Open and run
0608Animation & Microinteractions

Catalog Check-in Notification Pop Feedback

Complete the notification pop feedback for a catalog check-in scenario: includes realistic content, actionable controls, clear status feedback, and responsive layouts across sizes.

Animation & MicrointeractionsNotification pop-up feedbackHTMLCSSJavaScript
Open and run
0609Creative Visual Effects

Cloud Dock Gradient Mesh Experiment

Completed a gradient mesh experiment for a cloud dock scenario: includes real content, actionable controls, clear status feedback, and cross-size layouts.

Creative Visual EffectsGradient Mesh ExperimentHTMLCanvasJavaScript
Open and run
0610Drawing and Data Visualization

Air Briefing Donut Chart

Create a donut chart for an air briefing scenario: includes realistic content, interactive controls, clear state feedback, and responsive layouts across sizes.

Drawing and Data VisualizationDonut chartHTMLCanvasJavaScript
Open and run
0611Browser Media and Device Capabilities

Audio Secondary Screen Local Storage Notes

Complete local storage notes in an audio secondary-screen scenario: includes real content, interactive controls, clear state feedback, and responsive layouts.

Browser Media and Device CapabilitiesLocal Storage Sticky NotesHTMLCSSBrowser API
Open and run
0612Mini Apps and Mini Games

Archive List Station Random Picker

Complete a random picker in an archive listing station scenario: includes real content, interactive controls, clear status feedback, and responsive layouts.

Mini Apps and Mini GamesRandom PickerHTMLCSSJavaScript
Open and run
0613Basic Controls and Selectors

Greenhouse Demo Screen Dual Range Control

Complete the dual-range control for a greenhouse demo screen scenario: includes real content, interactive controls, clear state feedback, and responsive layouts.

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

Step-by-step intake flow for exhibit registration desk

Complete a step-by-step form flow in the exhibit intake desk scenario: include real content, interactive controls, clear status feedback, and a cross-size layout.

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

Archive quick index section navigation

Complete chapter navigation in an archive quick index scenario: includes real content, actionable controls, clear status feedback, and cross-size layout.

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

Outpatient Confirmation Card Notification Center

Complete a notification center for the outpatient confirmation card scenario: include real content, interactive controls, clear status feedback, and cross-size layouts.

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

Filtered card wall for the sound plan wall

Complete a filterable card wall for the sound plan wall scenario: includes real content, interactive controls, clear status feedback, and responsive layouts.

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

Outpatient Billing Card Mobile Table

Complete a mobile card table in an outpatient billing statement scenario: includes real content, actionable controls, clear state feedback, and cross-size layout.

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

Archive Special Issue Sticky Sidebar Layout

Complete a sticky sidebar layout for an archive special issue scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.

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

Garden Market Testimonials Wall

Complete a word-of-mouth story wall for a garden fair scenario, with realistic content, actionable controls, clear status feedback, and responsive layouts across sizes.

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

Archive Planning Room Pipeline Board

Complete the pipeline board in the archive planning room scenario: includes real content, interactive controls, clear status feedback, and layouts for multiple sizes.

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

Greenhouse display rack filter chip group

Complete the filter tag group in a greenhouse display-rack scenario: includes real content, actionable controls, clear status feedback, and responsive layout across sizes.

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

Password Strength Feedback for Exhibition Request Form

In the exhibit request form scenario, provide password strength feedback: includes real content, actionable controls, clear state feedback, and responsive layouts across sizes.

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

Archive Resource Shelf Tree Navigation

Complete tree navigation in an archive resource shelf scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Navigation and MenusTree NavigationHTMLCSSJavaScript
Open and run