HTML / CSS / JavaScript

Examples Library

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

1046Page 29 / 44
Showing 24 examples
0673Forms and input

Exhibit Entry Budget Configuration Sheet

Complete the budget setup table in an event check-in scenario: include real content, interactive controls, clear state feedback, and responsive layouts across sizes.

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

Campus Dispatch Desk Command Palette

Complete a command palette for a campus dispatch desk scenario: include real content, actionable controls, clear status feedback, and responsive layouts across sizes.

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

Delivery Status Banner

Complete a status banner for delivery updates: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

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

Outpatient Clip Box Collapsible Content List

In the outpatient clip box scenario, complete a collapsible content list: including real content, actionable controls, clear state feedback, and responsive layouts across sizes.

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

Energy Consumption Records Inline Edit Table

Complete an inline edit table in an energy usage records scenario: includes real content, actionable controls, clear state feedback, and responsive layouts across sizes.

Tables and data displayInline Editable TableHTML TableCSSJavaScript
Open and run
0678Page Layout and Responsive

Care Atlas Full-bleed Interleaved Layout

Complete the full-bleed layout in the care atlas scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Page Layout and ResponsiveFull-width interleaved layoutHTMLCSS GridResponsive Design
Open and run
0679Marketing and content scenarios

Feature Tour for a Creation and Launch Week

Complete a feature tour page for the creation and release week scenario: includes real content, actionable controls, clear status feedback, and a responsive layout across sizes.

Marketing and content scenariosFeature Guide PageHTMLCSSJavaScript
Open and run
0680Dashboard and Admin Interfaces

Course Management Cohort Retention Panel

Complete the cohort retention panel for course management scenarios: includes real content, actionable controls, clear status feedback, and responsive layout across sizes.

Dashboard and Admin InterfacesGrouped Retention PanelHTML TableCSSJavaScript
Open and run
0681Business and Service Flows

Care Prep List Quote Builder

Create a quote builder for a care prep list scenario: with real content, actionable controls, clear state feedback, and responsive layouts.

Business and Service FlowsQuote BuilderHTMLCSSJavaScript
Open and run
0682Typography and Text Effects

Archive notebook drop cap layout

Complete a drop-cap layout in an archive notebook scenario: includes real content, interactive controls, clear state feedback, and responsive layouts.

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

Catalog signal content reveal animation

Create a content reveal animation in a catalog signal scenario: includes real content, actionable controls, clear state feedback, and cross-size layouts.

Animation & MicrointeractionsContent reveal animationHTMLCSS AnimationJavaScript
Open and run
0684Creative Visual Effects

Cloud Harbor Starfield Traverse Effect

Complete the starfield traversal effect in the Cloud Lake Harbor scenario: includes real content, interactive controls, clear status feedback, and responsive layouts.

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

Air monitoring station trend line chart

Complete a trend line chart for an air monitoring station scenario: includes real content, actionable controls, clear status feedback, and a responsive layout across sizes.

Drawing and Data VisualizationTrend line chartHTMLCanvasJavaScript
Open and run
0686Browser Media and Device Capabilities

Audio Remote Desk Network Status Indicator

Complete network status indication in the audio remote desk scenario: includes real content, interactive controls, clear state feedback, and responsive layouts across sizes.

Browser Media and Device CapabilitiesNetwork status indicatorHTMLCSSBrowser API
Open and run
0687Mini Apps and Mini Games

Archive Planning Board Portable Calculator

Complete a portable calculator in an archive planning board setting: including real content, interactive controls, clear state feedback, and cross-size layout.

Mini Apps and Mini GamesPortable calculatorHTMLCSSJavaScript
Open and run
0688Basic Controls and Selectors

Guest suite segmented selector

Complete a segmented selector in a guest-suite scenario: real content, actionable controls, clear state feedback, and layouts across sizes.

Basic Controls and SelectorsSegmented SelectorHTMLCSSJavaScript
Open and run
0689Forms and input

Exhibition registration conditional questionnaire

Complete a conditional questionnaire in the exhibition registration scenario: includes realistic content, interactive controls, clear status feedback, and a responsive layout.

Forms and inputConditional questionnaireHTMLCSSJavaScript
Open and run
0690Navigation and Menus

Campus Guide Wall Group Mega Menu

Create a grouped mega menu for a campus guide wall scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.

Navigation and MenusGrouped mega menuHTMLCSSJavaScript
Open and run
0691Floating layers and status feedback

Gallery action sheet confirmation dialog

Complete the confirmation dialog in a gallery operation-sheet scenario: includes real content, interactive controls, clear state feedback, and responsive layouts across sizes.

Floating layers and status feedbackConfirmation dialogHTMLCSSJavaScript
Open and run
0692Cards, Lists, and Content Organization

Clinic Handover Log Activity Timeline

Complete an activity timeline for an outpatient handover log scenario: includes real content, actionable controls, clear status feedback, and responsive layout across sizes.

Cards, Lists, and Content OrganizationActivity timelineHTMLCSSJavaScript
Open and run
0693Tables and data display

Exhibit review table relationship matrix

Complete a relationship matrix table for the exhibit review sheet scenario: includes real content, interactive controls, clear status feedback, and cross-size layout.

Tables and data displayRelationship Matrix TableHTML TableCSSJavaScript
Open and run
0694Page Layout and Responsive

Classic three-column responsive layout for care briefing

Complete a classic three-column layout in a care briefing scenario: includes real content, actionable controls, clear status feedback, and responsive layout across sizes.

Page Layout and ResponsiveClassic three-column layoutHTMLCSS GridResponsive Design
Open and run
0695Marketing and content scenarios

Creative Membership Seasonal Narrative Hero

Complete a narrative hero section for the creator membership season scene: includes real content, actionable controls, clear state feedback, and cross-size layouts.

Marketing and content scenariosNarrative HeroHTMLCSSJavaScript
Open and run
0696Dashboard and Admin Interfaces

Course Control Center Operations Command Center

Complete the operations command center for the course headquarters scenario: with real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Dashboard and Admin InterfacesOperations DashboardHTMLCSS GridJavaScript
Open and run