HTML / CSS / JavaScript

Examples Library

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

1046Page 38 / 44
Showing 24 examples
0889Forms and input

Mentor match dynamic field group

Complete a dynamic field group in the mentor matching scenario: includes real content, interactive controls, clear status feedback, and cross-size layouts.

Forms and inputDynamic Field GroupHTMLCSSJavaScript
Open and run
0890Navigation and Menus

Outpatient Resource Shelf Workspace Tabs

Complete workspace tabs in the clinic resource shelf scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Navigation and MenusWorkspace tabsHTMLCSSJavaScript
Open and run
0891Floating layers and status feedback

Mentor action sheet side drawer

Complete a side drawer for the mentor action-sheet scenario, including real content, actionable controls, clear status feedback, and cross-size layouts.

Floating layers and status feedbackSide drawerHTMLCSSJavaScript
Open and run
0892Cards, Lists, and Content Organization

Field prompt cards waterfall notes

In a field prompt card scenario, complete a masonry note layout: includes real content, interactive controls, clear state feedback, and responsive layouts across sizes.

Cards, Lists, and Content OrganizationWaterfall notesHTMLCSSJavaScript
Open and run
0893Tables and data display

Pet Visit Column Visibility Control

Complete column visibility control in a pet visit scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

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

Clinic Brochure Bento Grid Layout

Complete a bento-style grid layout for a clinic brochure scenario: include real content, actionable controls, clear state feedback, and layouts across sizes.

Page Layout and ResponsiveBento grid layoutHTMLCSS GridResponsive Design
Open and run
0895Marketing and content scenarios

Podcast series product comparison page

Complete a product comparison page in a podcast series scene: with real content, interactive controls, clear state feedback, and responsive layouts across sizes.

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

Greenhouse Planning Room Trend Analysis Dashboard

Complete a trend analysis panel for the greenhouse planning room scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Dashboard and Admin InterfacesTrend Analysis PanelHTMLCanvasJavaScript
Open and run
0897Basic Controls and Selectors

Pantry Plan Board Option Cards Selection

Complete card selection in a pantry plan board scenario: include realistic content, actionable controls, clear status feedback, and responsive layouts.

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

Pet Adoption Time Slot Booking Form

Complete a time-slot booking form in a pet adoption scenario: includes realistic content, actionable controls, clear status feedback, and responsive layout across sizes.

Forms and inputTime Slot Booking SheetHTMLCSSJavaScript
Open and run
0899Navigation and Menus

Outpatient Route Map Bottom Quick Navigation

Complete a bottom quick-navigation pattern for an outpatient route map scenario, including real content, interactive controls, clear state feedback, and responsive layouts across sizes.

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

Mentor Reminder Room Keyboard Tooltip

Complete the keyboard tooltip in the mentor alert room scenario: includes real content, actionable controls, clear status feedback, and cross-size layouts.

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

Field Directory Board Priority Queue

Complete a priority queue in a field roster board scenario: includes realistic content, interactive controls, clear state feedback, and responsive layouts across sizes.

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

Podcast Schedule Comparison Table

Create a comparison grid for a podcast scheduling scenario: includes real content, actionable controls, clear status feedback, and cross-size layouts.

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

Activity Recap Dashboard Shell

Complete the dashboard shell in an event recap scenario: real content, actionable controls, clear state feedback, and responsive layouts across sizes.

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

Podcast Signup Week Agenda Page

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

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

Greenhouse Review Board Real-time Activity Feed

Complete a live activity feed in the greenhouse review board scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.

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

Outpatient package promotion builder

Complete a promotion composer for an outpatient kit scenario: include real content, actionable controls, clear status feedback, and responsive layouts.

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

Class Column Font-Weight Hierarchy Experiment

Complete a font-weight hierarchy experiment for a classroom column scenario: includes real content, interactive controls, clear status feedback, and responsive layouts.

Typography and Text EffectsWeight Hierarchy ExperimentHTMLCSS TypographyJavaScript
Open and run
0908Animation & Microinteractions

Clinic signal ring progress feedback

Completed ring progress feedback in the outpatient signal scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

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

Coral observatory spotlight stage

Complete the spotlight stage in a coral observatory scene: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.

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

Civic monitoring matrix heatmap

Complete the matrix heatmap in a public monitoring console scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.

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

Clinic kiosk media query watcher

Complete the media query observer in the outpatient self-service desk scenario: includes real content, interactive controls, clear status feedback, and responsive layout across sizes.

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

Class Match Unit Converter

Complete the unit converter in the classroom matching round scenario: includes real content, interactive controls, clear state feedback, and responsive layouts.

Mini Apps and Mini GamesUnit ConverterHTMLCSSJavaScript
Open and run