HTML / CSS / JavaScript

Examples Library

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

1046Page 28 / 44
Showing 24 examples
0649Navigation and Menus

Bottom quick navigation for the Archive Service Hall

Complete the bottom quick navigation in the archive service hall scenario: it includes real content, actionable controls, clear state feedback, and responsive layouts across sizes.

Navigation and MenusBottom Quick NavigationHTMLCSSJavaScript
Open and run
0650Floating layers and status feedback

Outpatient Support Bar Keyboard Tooltip

Complete a keyboard tooltip in a clinic support banner scenario: including real content, interactive controls, clear state feedback, and responsive layouts across sizes.

Floating layers and status feedbackKeyboard TooltipHTMLCSSJavaScript
Open and run
0651Cards, Lists, and Content Organization

Audio Story Shelf Priority Queue

Complete the priority queue in the audio story shelf scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.

Cards, Lists, and Content OrganizationPriority queueHTMLCSS GridJavaScript
Open and run
0652Tables and data display

Outpatient Stock Book Comparison Table

Complete a solution comparison table for a clinic stockbook scenario: include real content, actionable controls, clear status feedback, and cross-size layouts.

Tables and data displayPlan Comparison TableHTML TableCSSJavaScript
Open and run
0653Page Layout and Responsive

Archive Notebook Dashboard Shell

Complete a dashboard shell in an archive notebook scenario: includes real content, interactive controls, clear state feedback, and responsive layouts across sizes.

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

Creative Brief Event Agenda Page

Complete the event agenda page for a creative brief scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

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

Archive duty log live activity feed

Complete a real-time activity feed in an archive duty log scenario: includes realistic content, actionable controls, clear status feedback, and responsive layouts across sizes.

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

Care Pickup Window Promotion Builder

Complete a promotion composer in the care pickup window scenario: includes real content, interactive controls, clear state feedback, and responsive layouts.

Business and Service FlowsPromotion BuilderHTMLCSSJavaScript
Open and run
0657Typography and Text Effects

Archival Notes Text Mask Effect

Achieve a text masking effect in an archive-note setting: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.

Typography and Text EffectsText mask effectHTMLCSS TypographyJavaScript
Open and run
0658Animation & Microinteractions

Catalog Pulse Ring Progress Feedback

Complete circular progress feedback in a catalog pulse scenario: includes real content, actionable controls, clear status feedback, and cross-size layouts.

Animation & MicrointeractionsCircular progress feedbackHTMLCSS AnimationJavaScript
Open and run
0659Creative Visual Effects

Cloud Lake Hall Spotlight Stage

Complete a spotlight stage for a Cloud Lake Hall scenario: includes real content, actionable controls, clear state feedback, and responsive layouts across sizes.

Creative Visual EffectsSpotlight StageHTMLCanvasJavaScript
Open and run
0660Drawing and Data Visualization

Air ledger matrix heatmap

Build a matrix heatmap for an air-ledger scenario: with realistic content, actionable controls, clear state feedback, and responsive layouts across sizes.

Drawing and Data VisualizationMatrix heatmapHTMLCanvasJavaScript
Open and run
0661Browser Media and Device Capabilities

Audio recorder media query observer

Complete the media query observer in an audio recorder scenario: include real content, interactive controls, clear status feedback, and layouts that adapt across sizes.

Browser Media and Device CapabilitiesMedia Query ObserverHTMLCSSBrowser API
Open and run
0662Mini Apps and Mini Games

Archive Match Unit Converter

Complete a unit converter in an archive match-game scenario: includes realistic content, interactive controls, clear status feedback, and responsive layouts.

Mini Apps and Mini GamesUnit ConverterHTMLCSSJavaScript
Open and run
0663Basic Controls and Selectors

Greenhouse Setup Cart Range Adjuster

Complete a range slider in a greenhouse setup cart scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Basic Controls and SelectorsRange SliderHTMLCSSJavaScript
Open and run
0664Forms and input

Exhibition Support Request Summary Confirmation Form

Complete a summary confirmation form in an exhibition support scenario: include real content, actionable controls, clear status feedback, and cross-size layouts.

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

Archive Access Card Breadcrumb Navigation

Complete a breadcrumb navigation in an archive access card scenario: includes real content, interactive controls, clear state feedback, and cross-size layout.

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

Clinic Update Toast Stack

Completed message stack for the outpatient update window scenario: includes real content, actionable controls, clear status feedback, and cross-size layout.

Floating layers and status feedbackMessage Toast StackHTMLCSSJavaScript
Open and run
0667Cards, Lists, and Content Organization

Audio Patrol Line Story Carousel Cards

Complete the story carousel cards in the audio patrol line scenario: include real content, interactive controls, clear status feedback, and cross-size layout.

Cards, Lists, and Content OrganizationStory carousel cardHTMLCSSJavaScript
Open and run
0668Tables and data display

Outpatient Usage Table Composite Filter Table

Complete the composite filter table in the outpatient usage scenario: includes realistic content, interactive controls, clear status feedback, and cross-size layouts.

Tables and data displayComposite Filter TableHTML TableCSSJavaScript
Open and run
0669Page Layout and Responsive

Archive Recap Page Magazine Editorial Grid

Complete a magazine editorial grid for the archive recap page scenario, including real content, actionable controls, clear status feedback, and cross-size layouts.

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

Maker Fair Q&A conversion zone

Complete an FAQ conversion section in a makers’ market scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.

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

Archive Watch Desk Calendar Heatmap Panel

Complete a calendar heatmap dashboard for the archive watch desk scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.

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

Greenhouse Task Shelf Rating Scale

Complete the rating scale in a greenhouse task shelf scenario: includes real content, interactive controls, clear state feedback, and responsive layouts across sizes.

Basic Controls and SelectorsRating scaleHTMLCSSJavaScript
Open and run