HTML / CSS / JavaScript

Examples Library

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

1046Page 30 of 44
Showing 24 examples
0697Basic Controls and Selectors

Children’s Room Preference Switch Matrix

Complete a preference toggle matrix in the children’s room scenario: includes real content, actionable controls, clear status feedback, and layouts across sizes.

Basic Controls and SelectorsPreference Toggle MatrixHTMLCSSJavaScript
Open and run
0698Forms and input

Automatic Draft Survey Form for Follow-up Responses

Complete an auto-draft form for a follow-up survey scenario: includes real content, interactive controls, clear status feedback, and responsive layouts.

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

Campus Map Numbered Pages Navigation

Complete page navigation in a campus map scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.

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

Gallery Alert Room Context Actions Sheet

Complete the contextual action sheet in the gallery alert room scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

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

Outpatient Notebook Bookmark Organizer

Complete a bookmark organizer for an outpatient notebook scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.

Cards, Lists, and Content OrganizationBookmark OrganizerHTMLCSS GridJavaScript
Open and run
0702Tables and data display

Exhibit inspection paginated data table

Complete a paginated data table in an exhibit inspection scenario: includes real content, actionable controls, clear state feedback, and responsive layouts.

Tables and data displayPaginated data tableHTML TableCSSJavaScript
Open and run
0703Page Layout and Responsive

Care handbook responsive masonry layout

Complete a responsive masonry layout in a care handbook scenario: includes real content, actionable controls, clear status feedback, and cross-size layouts.

Page Layout and ResponsiveResponsive Masonry LayoutHTMLCSSJavaScript
Open and run
0704Marketing and content scenarios

Launch countdown page for Makers Open Day

Complete a launch countdown page for an open house scenario in a creative environment: include real content, actionable controls, clear status feedback, and responsive layout across sizes.

Marketing and content scenariosLaunch countdown pageHTMLCSS AnimationJavaScript
Open and run
0705Dashboard and Admin Interfaces

Class Dispatch Conversion Funnel Dashboard

Complete the conversion funnel dashboard in a course dispatch room scene: includes real content, actionable controls, clear status feedback, and responsive layouts.

Dashboard and Admin InterfacesConversion Funnel DashboardHTMLCSS GridJavaScript
Open and run
0706Business and Service Flows

Care return counter service reservation flow

Complete the service booking flow in a care return counter scenario: includes real content, interactive controls, clear status feedback, and responsive layouts.

Business and Service FlowsService reservation flowHTMLCSSJavaScript
Open and run
0707Typography and Text Effects

Archive Poster Fluid Headline Typography

Complete fluid headline typography for archive-poster scenarios: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Typography and Text EffectsFluid Headline TypographyHTMLCSS TypographyJavaScript
Open and run
0708Animation & Microinteractions

Catalog Sync Skeleton Screen Transition

Complete the skeleton screen transition in a catalog synchronization scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Animation & MicrointeractionsSkeleton Screen TransitionHTMLCSS AnimationJavaScript
Open and run
0709Creative Visual Effects

Cloud Lake Observatory Multi-Layer Wave Scenario

Complete the multi-layer wave scene in a cloud observatory scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.

Creative Visual EffectsMulti-layer Wave SceneHTMLCSS AnimationJavaScript
Open and run
0710Drawing and Data Visualization

Air queue relationship node map

Complete a relationship node diagram for an air queue scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Drawing and Data VisualizationRelationship Node DiagramHTMLCanvasJavaScript
Open and run
0711Browser Media and Device Capabilities

Audio Sensor Seat Page Visibility Log

Complete page visibility logging in an audio-sensor seat 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
0712Mini Apps and Mini Games

Archive Treasure Hunt Expense Splitter

Complete the expense splitter in an archive treasure-hunt bureau setting: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.

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

Loft Check-in Desk Date Quick Select

Complete a quick date picker in a loft check-in desk scenario: includes real content, interactive controls, clear state feedback, and responsive layouts.

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

On-site Data Collection Live Validation Form

Complete an instant-validation form for field collection scenarios: including real content, interactive controls, clear status feedback, and a responsive layout.

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

Campus Notice Board Progress Navigation

Complete a process-progress navigation for a campus notice board scenario: includes realistic content, interactive controls, clear status feedback, and a responsive layout.

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

Gallery check-in bell help popover

Complete a help popover in a gallery check-in bell scenario: includes real content, actionable controls, clear state feedback, and responsive layouts across sizes.

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

Clinic Plan Wall Contact Index

Complete a contact directory in a clinic plan wall scenario: real content, actionable controls, clear status feedback, and responsive layouts across sizes.

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

Exhibit Expense Report Multi-column Sort Table

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

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

Care Digest Master-Detail Content Layout

Complete the master-detail content layout in the care special issue scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.

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

Creative Preview Night Subscription Conversion Page

Complete a subscription conversion page for a creator preview night scenario, with real content, interactive controls, clear status feedback, and responsive layouts.

Marketing and content scenariosSubscription Landing PageHTMLCSSJavaScript
Open and run