HTML / CSS / JavaScript

Examples Library

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

1046Page 18 / 44
Showing 24 examples
0409Dashboard and Admin Interfaces

Studio Capacity Resource Usage Dashboard

Complete a resource usage dashboard for a studio capacity scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.

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

Workshop booking invoice generator

Complete the invoice generator in a workshop booking scenario: includes realistic content, interactive controls, clear state feedback, and responsive layouts.

Business and Service FlowsBill GeneratorHTMLCSSJavaScript
Open and run
0411Animation & Microinteractions

Staggered entrance for music player list

Complete staggered list entrance in a music player scenario: includes real content, actionable controls, clear state feedback, and a responsive layout.

Animation & MicrointeractionsStaggered List EntryHTMLCSS AnimationJavaScript
Open and run
0412Creative Visual Effects

Aurora field multi-layer wave scene

Complete a multi-layer wave scene in an aurora field scene: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

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

Garden Growth Capability Radar Chart

Complete the ability radar chart in a garden growth scenario: includes real content, actionable controls, clear status feedback, and a responsive layout across sizes.

Drawing and Data VisualizationCapability Radar ChartHTMLCanvasJavaScript
Open and run
0414Basic Controls and Selectors

Travel Plan Numeric Stepper

Complete a numeric stepper for a travel plan scenario: includes real content, interactive controls, clear state feedback, and responsive layouts across sizes.

Basic Controls and SelectorsNumeric StepperHTMLCSSJavaScript
Open and run
0415Forms and input

Service request budget configuration sheet

Complete the budget configurator in a service request scenario: includes realistic content, actionable controls, clear status feedback, and layouts that adapt across sizes.

Forms and inputBudget allocation sheetHTMLCSSJavaScript
Open and run
0416Navigation and Menus

Project Space Flow Progress Navigation

Complete a process progress navigation in a project space scenario: includes real content, actionable controls, clear status feedback, and responsive layout across sizes.

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

Photo Library Status Banner

Status banner for a photo library scenario: real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Floating layers and status feedbackStatus BannerHTMLCSSJavaScript
Open and run
0418Cards, Lists, and Content Organization

Local events priority queue

Complete a priority queue in a local-events scenario: real content, actionable controls, clear state feedback, and layouts across sizes.

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

Project Budget Mobile Card Table

Complete a mobile card table in a project budget scenario: includes realistic content, interactive controls, clear status feedback, and responsive layouts.

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

Responsive Photo Essay Masonry Layout

Build a responsive masonry layout for an image-story scenario: include real content, actionable controls, clear status feedback, and cross-size layouts.

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

Learning Camp Launch Countdown Page

Complete the launch countdown page for the learning camp scenario: include real content, interactive controls, clear status feedback, and a responsive layout across sizes.

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

Studio Capacity Conversion Funnel Dashboard

Complete a conversion funnel dashboard for studio capacity scenarios: including real content, actionable controls, clear state feedback, and cross-size layouts.

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

Workshop Booking Subscription Plan Selection

Complete subscription plan selection for a workshop booking scenario: include real content, actionable controls, clear status feedback, and a responsive layout across sizes.

Business and Service FlowsSubscription Plan SelectionHTMLCSSJavaScript
Open and run
0424Animation & Microinteractions

Music player flip-state transition

Complete the page-flip state transition in the music player scenario: with real content, interactive controls, clear status feedback, and cross-size layouts.

Animation & MicrointeractionsPage transition state switchingHTMLCSS AnimationJavaScript
Open and run
0425Creative Visual Effects

Aurora Field Starfield Traversal Effect

Create a starfield journey effect in an aurora field scene: includes real content, interactive controls, clear status feedback, and cross-size layouts.

Creative Visual EffectsStarfield traversal effectHTMLCanvasJavaScript
Open and run
0426Drawing and Data Visualization

Garden Growth Scatter Plot

Complete a scatter plot for a garden growth scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.

Drawing and Data VisualizationScatter PlotHTMLCanvasJavaScript
Open and run
0427Basic Controls and Selectors

Travel Plan Color Swatch Selection

Complete color swatch selection in a travel planning scenario: includes real content, actionable controls, clear status feedback, and responsive layout across sizes.

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

Service Request Time Slot Booking Form

Complete a time-slot booking form for a service request scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

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

Project Space Bottom Quick Navigation

Complete a bottom quick navigation for a project space scenario: includes real content, interactive controls, clear state feedback, and responsive layouts across sizes.

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

Photo Library Notification Center

Complete a notification center in a photo library scenario: includes real content, interactive controls, clear status feedback, and cross-size layout.

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

Local Events Expandable Records

Complete an expandable records component in a local events scenario: includes real content, interactive controls, clear status feedback, and responsive layouts.

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

Project Budget Comparison Table

Complete the proposal comparison table in the project budget scenario: includes real content, interactive controls, clear status feedback, and cross-size layouts.

Tables and data displayPlan Comparison TableHTML TableCSSJavaScript
Open and run