HTML / CSS / JavaScript

Examples Library

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

1046Page 41 / 44
Showing 24 examples
0961Browser Media and Device Capabilities

Visibility log for the outpatient remote desk page

Complete a page visibility log in a clinic remote desk scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Browser Media and Device CapabilitiesPage visibility logHTMLCSSBrowser API
Open and run
0962Mini Apps and Mini Games

Class Treasure Hunt Expense Splitter

Complete the expense splitter in the classroom treasure hunt scene: includes real content, interactive controls, clear state feedback, and responsive layouts across sizes.

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

Quick Date Picker for Reading Club

Quick date selection in a book club scenario: includes realistic content, interactive controls, clear status feedback, and responsive layout.

Basic Controls and SelectorsDate Quick SelectHTMLCSSJavaScript
Open and run
0964Forms and input

Shift Request Live Validation Form

Complete an instant validation form in a shift request scenario: includes real content, actionable controls, clear status feedback, and a responsive layout across sizes.

Forms and inputInstant Validation FormHTMLCSSJavaScript
Open and run
0965Navigation and Menus

Fleet Operations Hub Progress Navigation

Complete the process progress navigation in a fleet control center scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Navigation and MenusProgress navigation flowHTMLCSSJavaScript
Open and run
0966Floating layers and status feedback

Mentor Review Desk Help Popover

Complete a help popover in a mentor review desk scenario: includes real content, actionable controls, clear state feedback, and cross-size layout.

Floating layers and status feedbackHelp PopoverHTMLCSSJavaScript
Open and run
0967Cards, Lists, and Content Organization

Pet Records Contact Directory Index

Complete the contact index for a pet records scenario: includes real content, actionable controls, clear status feedback, and a responsive layout across sizes.

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

Studio Expense Report Multi-Column Sort Table

Complete a multi-column sortable table for a studio reimbursement scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.

Tables and data displayMulti-column sort tableHTML TableCSSJavaScript
Open and run
0969Page Layout and Responsive

Garden Briefing Master-Detail Layout

Complete a master-detail content layout for a garden briefing scenario, including real content, actionable controls, clear state feedback, and cross-size layouts.

Page Layout and ResponsiveMaster-detail content layoutHTMLCSSJavaScript
Open and run
0970Marketing and content scenarios

Studio Membership Subscription Conversion Page

A subscription conversion page for studio membership scenarios: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Marketing and content scenariosSubscription Landing PageHTMLCSSJavaScript
Open and run
0971Dashboard and Admin Interfaces

Housing Operations Command Center Incident Response Board

Complete an incident response board in a housing operations desk scenario: includes real content, actionable controls, clear status feedback, and cross-size layout.

Dashboard and Admin InterfacesIncident Response DashboardHTMLCSS GridJavaScript
Open and run
0972Basic Controls and Selectors

Performance Check-in Desk Color Swatches Selection

Complete color sample selection in a recital check-in desk scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.

Basic Controls and SelectorsColor Sample SelectionHTMLCSSJavaScript
Open and run
0973Forms and input

Shift Review Station Local Suggestion Input

Complete a local suggestion input in a shift review station scenario: includes real content, actionable controls, clear state feedback, and responsive layouts across sizes.

Forms and inputLocal suggestion inputHTMLCSSJavaScript
Open and run
0974Navigation and Menus

Responsive Main Menu for Makers’ Workbench

Complete a responsive main menu in the maker workbench scenario: include real content, interactive controls, clear state feedback, and a responsive layout across sizes.

Navigation and MenusResponsive main menuHTMLCSSJavaScript
Open and run
0975Floating layers and status feedback

Mentor Support Strip Bottom Action Panel

Build a bottom action sheet for a mentor support banner scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.

Floating layers and status feedbackBottom action panelHTMLCSSJavaScript
Open and run
0976Cards, Lists, and Content Organization

Podcast Library Expandable Records

Complete an expandable record in a podcast library scenario: includes realistic content, interactive controls, clear status feedback, and responsive layouts across sizes.

Cards, Lists, and Content OrganizationExpandable RecordsHTMLCSSJavaScript
Open and run
0977Tables and data display

Studio Ledger Sticky Header

Complete sticky table headers for a studio ledger scenario: include real content, actionable controls, clear status feedback, and responsive layouts.

Tables and data displaySticky HeaderHTML TableCSSJavaScript
Open and run
0978Page Layout and Responsive

Garden Brochure Split-Screen Narrative Layout

Create a split-screen narrative layout in a garden brochure scene: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.

Page Layout and ResponsiveSplit-screen narrative layoutHTMLCSS GridResponsive Design
Open and run
0979Marketing and content scenarios

Studio Open Day Pricing Plans Page

Complete the pricing plans page in a studio open day scenario: includes real content, interactive controls, clear status feedback, and responsive layouts.

Marketing and content scenariosPricing PlansHTMLCSSJavaScript
Open and run
0980Dashboard and Admin Interfaces

Operations Hub KPI Overview

Complete a key metrics overview in a housing front-desk scenario: real content, interactive controls, clear state feedback, and responsive layouts across sizes.

Dashboard and Admin InterfacesKey Metrics OverviewHTMLCSS GridJavaScript
Open and run
0981Business and Service Flows

Outpatient return and exchange counter return request flow

Complete a return and exchange request flow in a clinic return-counter scenario: includes real content, interactive controls, clear status feedback, and cross-size layouts.

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

Class Poster Kinetic Typography

Complete dynamic typography in a classroom poster scenario: real content, interactive controls, clear status feedback, and responsive layouts across sizes.

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

Outpatient tracker spring control feedback

Create elastic control feedback in the clinic tracker scenario: includes real content, actionable controls, clear state feedback, and responsive layouts across sizes.

Animation & MicrointeractionsSpring Control FeedbackHTMLCSS AnimationJavaScript
Open and run
0984Creative Visual Effects

Coral corridor confetti burst effect

Complete the confetti burst effect for the coral tunnel scenario: include real content, interactive controls, clear state feedback, and cross-size layouts.

Creative Visual EffectsConfetti Burst EffectHTMLCanvasJavaScript
Open and run