HTML / CSS / JavaScript

Examples Library

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

1046Page 17 / 44
Showing 24 examples
0385Mini Apps and Mini Games

Team ritual flip-card memory game

Complete a card-flip memory game in a team ritual setting: with real content, interactive controls, clear status feedback, and a responsive layout.

Mini Apps and Mini GamesMemory Matching GameHTMLCSSJavaScript
Open and run
0386Basic Controls and Selectors

Travel Plan Rating Scale

Complete the rating scale in a travel-planning scenario: real content, actionable controls, clear state feedback, and responsive layouts across sizes.

Basic Controls and SelectorsRating scaleHTMLCSSJavaScript
Open and run
0387Forms and input

Service Request Password Strength Feedback

Complete password strength feedback for a service request scenario: includes real content, actionable controls, clear status feedback, and a responsive layout across sizes.

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

Project Space Command Palette

Complete a command palette for a project space scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.

Navigation and MenusCommand PaletteHTMLCSSJavaScript
Open and run
0389Floating layers and status feedback

Photo Library Help Popover

Complete a help popover in a photo library scenario: includes real content, actionable controls, clear state feedback, and responsive layouts.

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

Local Events Accordion List

Complete the accordion content list in the local events scenario: with real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Cards, Lists, and Content OrganizationAccordion Content ListHTMLCSSJavaScript
Open and run
0391Tables and data display

Project Budget Column Visibility Control

Column visibility control in a project budget scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.

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

Visual Story Dashboard Shell

Complete the dashboard shell in an image-storytelling scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.

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

Learning camp testimonial story wall

A testimonial story wall completed for a learning camp scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

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

Studio Capacity Operations Command Center

Complete the operations command center for a studio capacity scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Dashboard and Admin InterfacesOperations DashboardHTMLCSS GridJavaScript
Open and run
0395Business and Service Flows

workshop reservation service reservation flow

Complete a service reservation flow in a workshop booking scenario: including real content, interactive controls, clear state feedback, and responsive layouts across sizes.

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

Exhibition note drop cap layout

Complete a drop cap layout in an exhibition caption scenario: with real content, interactive controls, clear state feedback, and responsive layouts across sizes.

Typography and Text EffectsDrop Cap LayoutHTMLCSS GridResponsive Design
Open and run
0397Animation & Microinteractions

Music Player Skeleton Screen Transition

Complete a skeleton-screen transition for a music player scenario: include real content, interactive controls, clear status feedback, and layouts across sizes.

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

Aurora Field Spotlight Stage

Complete a spotlight stage in an aurora field scene: includes realistic content, interactive controls, clear status feedback, and responsive layouts across sizes.

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

Garden Growth Dashboard Graphic

Complete dashboard graphics for a garden growth scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Drawing and Data VisualizationDashboard chartsHTMLCanvasJavaScript
Open and run
0400Mini Apps and Mini Games

Team Ritual Focus Timer

Complete the focus timer in the team ritual scenario: including real content, interactive controls, clear state feedback, and responsive layouts.

Mini Apps and Mini GamesFocus TimerHTMLCSSJavaScript
Open and run
0401Basic Controls and Selectors

Travel Plan Filter Chips

Complete a filter chip group for a travel plan scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

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

Dynamic Field Group for Service Requests

Complete a dynamic field group for a service request scenario: includes real content, interactive controls, clear status feedback, and responsive layout across sizes.

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

Project Space Tree Navigation

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

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

Photo library keyboard tooltip

Complete a keyboard tooltip in a photo library scenario: includes real content, actionable controls, clear status feedback, and cross-size layouts.

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

Local Events Story Carousel Cards

Complete the story carousel card in a local events scenario: includes real content, actionable controls, clear state feedback, and responsive layouts across sizes.

Cards, Lists, and Content OrganizationStory carousel cardHTMLCSSJavaScript
Open and run
0406Tables and data display

Project Budget Sticky Header

Complete a sticky table header for the project budget scenario: include real content, operable controls, clear status feedback, and a responsive layout.

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

Editorial Grid for Visual Story Magazine

Complete the magazine editorial grid in the image-story scenario: includes real content, interactive controls, clear status feedback, and layouts for multiple sizes.

Page Layout and ResponsiveMagazine Editorial GridHTMLCSS GridResponsive Design
Open and run
0408Marketing and content scenarios

Learning Camp Feature Tour Page

Complete the feature tour page for the learning camp scenario: includes real content, actionable controls, clear state feedback, and cross-size layouts.

Marketing and content scenariosFeature Guide PageHTMLCSSJavaScript
Open and run