HTML / CSS / JavaScript

Examples Library

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

1046Page 24 / 44
Showing 24 examples
0553Page Layout and Responsive

Care Center magazine editorial grid

Complete the editorial grid in a care center scenario: includes real content, actionable controls, clear status feedback, and a responsive layout across sizes.

Page Layout and ResponsiveMagazine Editorial GridHTMLCSS GridResponsive Design
Open and run
0554Marketing and content scenarios

Care Workshop Event Agenda Page

Complete the event agenda page in a care course scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Marketing and content scenariosEvent Agenda PageHTMLCSSJavaScript
Open and run
0555Dashboard and Admin Interfaces

Care Network Cohort Retention Dashboard

Complete a cohort retention panel in a care network scenario: include real content, actionable controls, clear status feedback, and responsive layout across sizes.

Dashboard and Admin InterfacesGrouped Retention PanelHTML TableCSSJavaScript
Open and run
0556Business and Service Flows

Art Course Seat Selector

Complete the seat picker for an art class scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.

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

Audio script rhythm marquee text

Complete a rhythmic marquee text piece for an audio-script scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.

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

Multi-stage Audio Wave Loader

Complete a multi-stage loader in a sound-wave scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Animation & MicrointeractionsMulti-stage LoaderHTMLCSS AnimationJavaScript
Open and run
0559Creative Visual Effects

City magazine poetry grid layout

Complete the pointer trail effect in a cloud-lake setting: includes real content, actionable controls, clear state feedback, and a responsive layout across sizes.

Creative Visual EffectsPointer Trail EffectsHTMLCanvasJavaScript
Open and run
0560Drawing and Data Visualization

Audio Metrics Waveform Renderer

Complete a waveform renderer in an audio metrics scenario: include real content, interactive controls, clear state feedback, and a responsive layout across sizes.

Drawing and Data VisualizationWaveform PlotterHTMLCanvasJavaScript
Open and run
0561Browser Media and Device Capabilities

Archive Reader System Color Scheme Detection

Detect the system color scheme in an archive reader scenario: includes realistic content, interactive controls, clear status feedback, and responsive layout.

Browser Media and Device CapabilitiesSystem Color Scheme DetectionHTMLCSSBrowser API
Open and run
0562Mini Apps and Mini Games

Sound Match Habit Check-In Board

Complete the habit check-in board in an audio matching scenario: includes realistic content, interactive controls, clear state feedback, and responsive layouts.

Mini Apps and Mini GamesHabit Check-in BoardHTMLCSSJavaScript
Open and run
0563Basic Controls and Selectors

Fitness Corner numeric stepper

Complete a numeric stepper for a fitness corner scenario: include real content, interactive controls, clear state feedback, and a responsive layout across sizes.

Basic Controls and SelectorsNumeric StepperHTMLCSSJavaScript
Open and run
0564Forms and input

Donation Signup Conditional Survey

Complete a conditional survey in a donor signup scene: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Forms and inputConditional questionnaireHTMLCSSJavaScript
Open and run
0565Navigation and Menus

Campus Tour Group Mega Menu

Complete a grouped mega menu in a campus guide scenario: includes real content, interactive controls, clear status feedback, and cross-size layouts.

Navigation and MenusGrouped mega menuHTMLCSSJavaScript
Open and run
0566Floating layers and status feedback

Outpatient Reminder Confirmation Dialog

Complete a confirmation dialog for an outpatient alert scenario: includes real content, interactive controls, clear state feedback, and responsive layout across sizes.

Floating layers and status feedbackConfirmation dialogHTMLCSSJavaScript
Open and run
0567Cards, Lists, and Content Organization

Public Proposal Activity Timeline

Complete an activity timeline for a public proposal scenario: includes realistic content, interactive controls, clear status feedback, and a responsive layout.

Cards, Lists, and Content OrganizationActivity timelineHTMLCSSJavaScript
Open and run
0568Tables and data display

Donation Ledger Inline Edit Table

Complete an inline editable table in a donation ledger scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Tables and data displayInline Editable TableHTML TableCSSJavaScript
Open and run
0569Page Layout and Responsive

Responsive Full-bleed Care Journal Layout

Complete a full-width layered layout for a care log scenario, with realistic content, actionable controls, clear status feedback, and responsive layouts across sizes.

Page Layout and ResponsiveFull-width interleaved layoutHTMLCSS GridResponsive Design
Open and run
0570Marketing and content scenarios

Civic Camp Q&A Conversion Zone

Complete the Q&A conversion section in a civic camp scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.

Marketing and content scenariosQ&A conversion zoneHTMLCSSJavaScript
Open and run
0571Dashboard and Admin Interfaces

Public Hotline Operations Command Center

Complete an operations command center for a public hotline scenario: includes real content, interactive controls, clear status feedback, and responsive layouts.

Dashboard and Admin InterfacesOperations DashboardHTMLCSS GridJavaScript
Open and run
0572Basic Controls and Selectors

Gardening Workshop Option Card Selection

Complete a solution card selection in a garden workshop scenario: include real content, interactive controls, clear status feedback, and a responsive layout.

Basic Controls and SelectorsSolution card selectionHTMLCSSJavaScript
Open and run
0573Forms and input

Equipment request auto-draft form

Complete an auto-draft form for an equipment request scenario: include real content, operable controls, clear status feedback, and a responsive layout.

Forms and inputAuto Draft FormHTMLCSSJavaScript
Open and run
0574Navigation and Menus

Archive Dispatch Desk Pagination Navigation

Complete paginated navigation in an archive dispatch desk scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Navigation and MenusPage navigationHTMLCSSJavaScript
Open and run
0575Floating layers and status feedback

Clinic Action Sheet Context Actions

Complete a contextual action sheet for the clinic action sheet scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.

Floating layers and status feedbackContext ActionsHTMLCSSJavaScript
Open and run
0576Cards, Lists, and Content Organization

Sound Clipping Box Bookmark Organizer

Complete a bookmark organizer for the sound clipping box scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.

Cards, Lists, and Content OrganizationBookmark OrganizerHTMLCSS GridJavaScript
Open and run