HTML / CSS / JavaScript

Examples Library

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

1046Page 37 / 44
Showing 24 examples
0865Navigation and Menus

Section-spy navigation for the clinic notice board

Complete section-linked navigation in a clinic announcement board scenario: includes real content, interactive controls, clear state feedback, and cross-size layouts.

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

Meeting Operations Notification Center

Complete a notification center for a meeting operations scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.

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

Field Notes Filterable Card Wall

Complete a filterable card wall for a field notes scenario, with real content, interactive controls, clear status feedback, and responsive layouts.

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

Mobile Cards for Meal Plans

A mobile card table for meal planning scenarios, featuring real content, interactive controls, clear state feedback, and responsive layouts across sizes.

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

Class Notebook Sticky Sidebar Layout

Complete a sticky sidebar layout for a classroom notebook scenario: include real content, actionable controls, clear status feedback, and cross-size layouts.

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

Podcast Preview Night, Story Wall of Reviews

Complete the word-of-mouth story wall for a podcast preview night scenario: includes real content, actionable controls, clear status feedback, and cross-size layout.

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

Greenhouse Disposal Pipeline Board

Complete a workflow pipeline board in a greenhouse operations scenario: includes realistic content, interactive controls, clear state feedback, and responsive layouts.

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

Pantry Display Rack Filter Tag Group

Complete the filter chips in a pantry display-rack scenario: include real content, interactive controls, clear status feedback, and responsive layouts across sizes.

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

Meal request password strength feedback

Complete password strength feedback for a meal order scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.

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

Clinic Quick Index Tree Navigation

Complete tree navigation in a clinic quick-index scenario: includes real content, actionable controls, clear state feedback, and multi-size layout.

Navigation and MenusTree NavigationHTMLCSSJavaScript
Open and run
0875Floating layers and status feedback

Membership Center Progress Overlay

Build a progress overlay in a membership center scenario: includes realistic content, interactive controls, clear status feedback, and responsive layout across sizes.

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

Field Plan Wall Task Board

In a field planning wall scenario, complete a task kanban board: real content, interactive controls, clear status feedback, and responsive layouts across sizes.

Cards, Lists, and Content OrganizationTask boardHTMLCSS GridJavaScript
Open and run
0877Tables and data display

Mentor Hours Bulk Selection Table

Complete a bulk-selection table for a mentor-hours scenario: includes realistic content, interactive controls, clear status feedback, and responsive layouts across sizes.

Tables and data displayBatch selection tableHTML TableCSSJavaScript
Open and run
0878Page Layout and Responsive

Adaptive Gallery for the Class Recap Page

Complete an adaptive gallery in a class recap page scenario: include real content, interactive controls, clear status feedback, and cross-size layout.

Page Layout and ResponsiveResponsive GalleryHTMLCSSJavaScript
Open and run
0879Marketing and content scenarios

Podcast Project Book Case Study Page

Complete a case study page in a podcast program guide scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across screen sizes.

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

Greenhouse Operations Resource Usage Dashboard

Complete the resource usage panel in the greenhouse operations scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.

Dashboard and Admin InterfacesResource Usage PanelHTMLCSS GridJavaScript
Open and run
0881Business and Service Flows

Outpatient checkout bag order progress tracking

Complete order progress tracking in the outpatient checkout bag scenario: includes real content, operable controls, clear status feedback, and responsive layouts.

Business and Service FlowsOrder Progress TrackingHTMLCSSJavaScript
Open and run
0882Typography and Text Effects

Responsive Type Scale for Classroom Labels

Complete a responsive type scale in a classroom exhibit-label scenario: includes real content, interactive controls, clear state feedback, and responsive layouts across sizes.

Typography and Text EffectsResponsive typography scaleHTMLCSS TypographyJavaScript
Open and run
0883Animation & Microinteractions

Outpatient Pulse Orbital Status Animation

Complete an orbital status animation in an outpatient pulse scenario: includes real content, interactive controls, clear state feedback, and responsive layouts.

Animation & MicrointeractionsOrbital Status AnimationHTMLCSS AnimationJavaScript
Open and run
0884Creative Visual Effects

Coral Harbor Interactive Particle Field

Complete an interactive particle field in the Coral Harbor scene: includes real content, actionable controls, clear state feedback, and responsive layouts across sizes.

Creative Visual EffectsInteractive Particle FieldHTMLCanvasJavaScript
Open and run
0885Drawing and Data Visualization

Public ledger dashboard graphics

Complete the dashboard graphic in a public ledger scenario: includes real content, interactive controls, clear state feedback, and responsive layouts across sizes.

Drawing and Data VisualizationDashboard chartsHTMLCanvasJavaScript
Open and run
0886Browser Media and Device Capabilities

Outpatient Secondary Display Language and Time Zone Panel

Complete the language and time zone panel in the outpatient secondary screen scenario: include real content, actionable controls, clear state feedback, and responsive layouts across sizes.

Browser Media and Device CapabilitiesLanguage and Time Zone PanelHTMLCSSBrowser API
Open and run
0887Mini Apps and Mini Games

Class Helper Box Tic-Tac-Toe

Complete tic-tac-toe in a classroom helper box scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Mini Apps and Mini GamesTic-Tac-ToeHTMLCSSJavaScript
Open and run
0888Basic Controls and Selectors

Pantry lounge numeric stepper

Complete a numeric stepper in a pantry lounge scenario: includes real content, interactive controls, clear state feedback, and responsive layouts across sizes.

Basic Controls and SelectorsNumeric StepperHTMLCSSJavaScript
Open and run