HTML / CSS / JavaScript

Examples Library

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

1046Page 23 / 44
Showing 24 examples
0529Marketing and content scenarios

Archive Screening Case Study Page

Complete a case study page for archive screening scenarios: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

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

Archive Room Live Activity Feed

Complete a real-time activity feed in an archive room scenario: includes real content, actionable controls, clear status feedback, and cross-size layouts.

Dashboard and Admin InterfacesLive Activity FeedHTMLCSSJavaScript
Open and run
0531Business and Service Flows

Return and Exchange Request Flow for Archive Printing

Complete the return-and-exchange request flow in the archive printing scenario: includes realistic content, actionable controls, clear status feedback, and responsive layouts across sizes.

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

Kinetic Type Layout for Archive Essays

A kinetic typography layout completed for an archive essay scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.

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

Archive Sync Button Morph Transition

Complete the button morph transition in an archive sync scenario: includes real content, actionable controls, clear status feedback, and layouts across sizes.

Animation & MicrointeractionsButton Morph TransitionHTMLCSS AnimationJavaScript
Open and run
0534Creative Visual Effects

Botanical Lab Confetti Burst Effect

Complete the confetti burst effect for the botanical lab scenario: includes realistic content, actionable controls, clear state feedback, and responsive layouts.

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

Archive Growth Relationship Node Map

Complete a relationship node diagram for an archive growth scenario: includes real content, actionable controls, clear state feedback, and cross-size layouts.

Drawing and Data VisualizationRelationship Node DiagramHTMLCanvasJavaScript
Open and run
0536Browser Media and Device Capabilities

Accessibility Clipboard Demo with Assistive Settings

Complete a clipboard operation demo in an accessibility settings scenario: including real content, interactive controls, clear state feedback, and responsive layouts across sizes.

Browser Media and Device CapabilitiesClipboard Operation DemoHTMLCSSBrowser API
Open and run
0537Mini Apps and Mini Games

Archive Hunt Expense Splitter

Complete a expense splitter in an archive treasure-hunt scenario: includes real content, interactive controls, clear state feedback, and responsive layouts across sizes.

Mini Apps and Mini GamesExpense SplitterHTMLCSSJavaScript
Open and run
0538Basic Controls and Selectors

Community Garden Dual Range Control

Complete a dual-range control in a community garden scenario: includes realistic content, interactive controls, clear state feedback, and responsive layouts.

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

Follow-up registration summary confirmation form

Complete the summary confirmation form in a follow-up registration scenario: includes real content, interactive controls, clear status feedback, and layouts across sizes.

Forms and inputSummary Confirmation FormHTMLCSSJavaScript
Open and run
0540Navigation and Menus

Archive Center Breadcrumb Navigation

Complete a breadcrumb navigation flow in an archive center scenario: includes real content, interactive controls, clear state feedback, and responsive layouts.

Navigation and MenusBreadcrumb NavigationHTMLCSSJavaScript
Open and run
0541Floating layers and status feedback

Care reminder progress overlay

Complete a progress overlay in a care reminder scenario: includes real content, interactive controls, clear status feedback, and responsive layouts.

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

Audio Notes Contact Index

Build a contact index for an audio notes scenario: real content, interactive controls, clear status feedback, and responsive layout across screen sizes.

Cards, Lists, and Content OrganizationContact indexHTMLCSSJavaScript
Open and run
0543Tables and data display

Outpatient Billing Column Visibility Control

Complete column visibility control in an outpatient billing scenario: includes realistic content, interactive controls, clear status feedback, and a responsive layout.

Tables and data displayColumn display controlHTML TableCSSJavaScript
Open and run
0544Page Layout and Responsive

Audio archive dashboard shell

Complete a dashboard shell for an audio archive scenario: including real content, actionable controls, clear status feedback, and responsive layouts.

Page Layout and ResponsiveDashboard ShellHTMLCSS GridResponsive Design
Open and run
0545Marketing and content scenarios

Audio Lab product comparison page

Complete a product comparison page in a sound lab scenario: includes real content, interactive controls, clear state feedback, and responsive layouts.

Marketing and content scenariosProduct comparison pageHTML TableCSSJavaScript
Open and run
0546Dashboard and Admin Interfaces

Campus energy calendar heatmap panel

Build a calendar heatmap dashboard in a campus energy-use scenario: includes realistic content, interactive controls, clear status feedback, and responsive layout across sizes.

Dashboard and Admin InterfacesCalendar heatmap panelHTMLCanvasJavaScript
Open and run
0547Basic Controls and Selectors

Family Kitchen Filter Chip Group

Complete a filter tag set in a family kitchen scenario: includes real content, interactive controls, clear state feedback, and a responsive layout across sizes.

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

Community Appeal Budget Planner

Complete the budget configuration sheet in a community appeal scenario: includes real content, actionable controls, clear status feedback, and layouts that adapt across sizes.

Forms and inputBudget allocation sheetHTMLCSSJavaScript
Open and run
0549Navigation and Menus

Archive Hall command palette

Complete the command palette in an archive hall setting: include real content, interactive controls, clear state feedback, and cross-size layouts.

Navigation and MenusCommand PaletteHTMLCSSJavaScript
Open and run
0550Floating layers and status feedback

Check-in desk status banner

Complete a status banner in a check-in desk scenario: includes realistic content, actionable controls, clear status feedback, and responsive layout across sizes.

Floating layers and status feedbackStatus BannerHTMLCSSJavaScript
Open and run
0551Cards, Lists, and Content Organization

Care Plan Accordion List

Complete a collapsible content list for a care-plan scenario: includes real content, actionable controls, clear state feedback, and responsive layouts across sizes.

Cards, Lists, and Content OrganizationAccordion Content ListHTMLCSSJavaScript
Open and run
0552Tables and data display

Clinic inventory plan comparison table

In an outpatient inventory scenario, complete a comparison table of options: include real content, interactive controls, clear status feedback, and cross-size layouts.

Tables and data displayPlan Comparison TableHTML TableCSSJavaScript
Open and run