HTML / CSS / JavaScript

Examples Library

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

1046Page 25 / 44
Showing 24 examples
0577Tables and data display

Clinic review table relationship matrix

Complete a relational matrix table in a clinic review form scenario: include realistic content, interactive controls, clear state feedback, and responsive layouts.

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

Classic Three-Column Archive Atlas Layout

Complete a classic three-column layout in an archive atlas 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
0579Marketing and content scenarios

Civic Lab Feature Tour Page

Complete the feature tour page in the City Lab scenario: includes real content, actionable controls, clear state feedback, and a responsive layout.

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

Archive Central Conversion Funnel Dashboard

Complete a conversion funnel dashboard for an archive console scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

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

Audio Booking Checkout Flow

Complete the checkout step flow in a recording booking scenario: includes real content, interactive controls, clear state feedback, and responsive layouts across sizes.

Business and Service FlowsCheckout steps flowHTMLCSSJavaScript
Open and run
0582Typography and Text Effects

Archive Zine Outline Title Design

Complete outlined heading design in an archive zine scenario: includes real content, interactive controls, clear state feedback, and cross-size layouts.

Typography and Text EffectsOutlined Heading DesignHTMLCSS TypographyJavaScript
Open and run
0583Animation & Microinteractions

Catalog Alert Flip State Transition

Complete the page-flip state transition in a catalog reminder scenario: includes real content, actionable controls, clear state feedback, and responsive layouts across sizes.

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

Cloud Lake Dome Glass Depth Space

Glass Depth Space in a Cloud Lake Dome scenario: real content, actionable controls, clear state feedback, and responsive layouts across sizes.

Creative Visual EffectsGlass Depth SpaceHTMLCSS GridResponsive Design
Open and run
0585Drawing and Data Visualization

Air Atlas Interactive Bar Chart

An interactive bar chart completed for the Air Atlas scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across screen sizes.

Drawing and Data VisualizationInteractive Bar ChartHTMLCanvasJavaScript
Open and run
0586Browser Media and Device Capabilities

Audio Booth Full-Screen Stage Controls

Complete full-screen stage control in the audio booth scenario: includes realistic content, actionable controls, clear status feedback, and a responsive layout across sizes.

Browser Media and Device CapabilitiesFullscreen Stage ControlsHTMLCSSBrowser API
Open and run
0587Mini Apps and Mini Games

Archive challenge desk Pomodoro timer

Complete a Pomodoro timer for an archive challenge desk scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Mini Apps and Mini GamesPomodoro timerHTMLCSSJavaScript
Open and run
0588Basic Controls and Selectors

Greenhouse Check-in Desk Quick Date Selection

Complete quick date selection in a greenhouse check-in desk scenario: includes realistic content, actionable controls, clear status feedback, and responsive layout across sizes.

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

Exhibit Confirmation Card Live Validation Form

Complete an inline validation form in the exhibit confirmation card scenario: include real content, interactive controls, clear state feedback, and a responsive layout across sizes.

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

Archive guide wall flow progress navigation

Complete the process progress navigation in an archive guide wall scenario: includes real content, actionable controls, clear state feedback, and responsive layouts.

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

Outpatient Reminder Room Help Popover

Complete a help popover for the clinic reminder room scenario: include realistic content, actionable controls, clear status feedback, and a responsive layout across sizes.

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

Sound Handover Log Contact Index

Complete contact indexing in a sound handover log scenario: includes real content, actionable controls, clear state feedback, and multi-size layout.

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

Outpatient Claims Paged Data Table

Complete a paginated data table for an outpatient reimbursement scenario: includes real content, interactive controls, clear status feedback, and a responsive multi-size layout.

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

Archive Briefing Responsive Masonry Layout

Complete a responsive masonry layout for an archive briefing scenario, with realistic content, actionable controls, clear status feedback, and responsive layouts across sizes.

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

Course Sprint Launch Countdown Page

Complete the launch countdown page for the course sprint scenario: include real content, interactive controls, clear status feedback, and responsive layouts.

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

Archive Dispatch Room Incident Response Board

Complete an incident response dashboard for an archive dispatch room scenario: including real content, interactive controls, clear state feedback, and responsive layouts across sizes.

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

Greenhouse Control Console Color Swatch Selection

Complete the color swatch selection in a greenhouse control console scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.

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

Exhibit Follow-up Log Local Suggestions Input

Complete a local suggestion input in an event follow-up log scenario: it includes real content, actionable controls, clear state feedback, and responsive layout across sizes.

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

Archive Notice Board Responsive Main Menu

Complete a responsive main menu in the archive notice board scenario: includes real content, actionable controls, clear status feedback, and layouts across sizes.

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

Outpatient Check-in Bell Bottom Action Panel

Complete the bottom action panel in a clinic check-in bell scenario: includes real content, interactive controls, clear state feedback, and responsive layouts across sizes.

Floating layers and status feedbackBottom action panelHTMLCSSJavaScript
Open and run