HTML / CSS / JavaScript

Examples Library

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

1046Page 20 of 44
Showing 24 examples
0457Tables and data display

Project Budget Inline Edit Table

Complete an inline-edit table in a project budget scenario: includes realistic content, interactive controls, clear status feedback, and responsive layouts.

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

Responsive gallery for image stories

Complete an adaptive gallery in an image-story scenario: includes real content, interactive controls, clear state feedback, and responsive layouts.

Page Layout and ResponsiveResponsive GalleryHTMLCSSJavaScript
Open and run
0459Marketing and content scenarios

Learning Camp Case Study Page

Complete a case study page in a learning camp scenario: includes realistic content, actionable controls, clear state feedback, and responsive layouts across sizes.

Marketing and content scenarioscase study pageHTMLCSS GridResponsive Design
Open and run
0460Dashboard and Admin Interfaces

Studio capacity cohort retention panel

A grouped retention panel completed for a studio capacity scenario: includes real content, actionable controls, clear status feedback, and a cross-size layout.

Dashboard and Admin InterfacesGrouped Retention PanelHTML TableCSSJavaScript
Open and run
0461Animation & Microinteractions

Music Player Content Reveal Animation

Complete a content reveal animation in the music player scenario: includes real content, actionable controls, clear status feedback, and cross-size layouts.

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

Aurora Field Glass Depth Space

Complete the glass depth space in an aurora field scenario: includes real content, actionable controls, clear status feedback, and a responsive layout across sizes.

Creative Visual EffectsGlass Depth SpaceHTMLCSS GridResponsive Design
Open and run
0463Basic Controls and Selectors

Quick Date Picker for Travel Plans

Complete quick date selection in a travel planning scenario: includes real content, actionable controls, clear state feedback, and cross-size layouts.

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

Service Request Summary Confirmation Form

Complete the summary confirmation form in the service request scenario: it includes real content, interactive controls, clear state feedback, and responsive layouts.

Forms and inputSummary Confirmation FormHTMLCSSJavaScript
Open and run
0465Navigation and Menus

Project Space Group Mega Menu

Complete the grouped mega menu for a project space scenario: includes real content, actionable controls, clear state feedback, and responsive layouts across sizes.

Navigation and MenusGrouped mega menuHTMLCSSJavaScript
Open and run
0466Cards, Lists, and Content Organization

Local Events Contact Index

Complete a contact index for local event scenarios: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

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

Project Budget Bulk Selection Table

Complete a bulk selection table in a project budget scenario: includes real content, actionable controls, clear state feedback, and cross-size layout.

Tables and data displayBatch selection tableHTML TableCSSJavaScript
Open and run
0468Page Layout and Responsive

Responsive Master-Detail Layout for a Photo Essay

Complete a master-detail content layout in an image-story scenario: includes realistic content, actionable controls, clear status feedback, and responsive layout across sizes.

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

Learning Camp Product Comparison Page

Complete a product comparison page for the learning camp scenario: include realistic content, actionable controls, clear status feedback, and responsive layouts across sizes.

Marketing and content scenariosProduct comparison pageHTML TableCSSJavaScript
Open and run
0470Dashboard and Admin Interfaces

Studio Capacity Pipeline Board

Complete the process pipeline board for studio capacity scenarios: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Dashboard and Admin Interfacesprocess pipeline panelHTMLCSS GridJavaScript
Open and run
0471Animation & Microinteractions

Music Player Track Status Animation

Complete orbital status animation in a music player scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.

Animation & MicrointeractionsOrbital Status AnimationHTMLCSS AnimationJavaScript
Open and run
0472Creative Visual Effects

Aurora Field Pointer Trail Effect

Complete a pointer light-trail effect in an aurora field scene: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Creative Visual EffectsPointer Trail EffectsHTMLCanvasJavaScript
Open and run
0473Basic Controls and Selectors

Music Studio Segmented Selector

Complete the segmented choice control in the music studio scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

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

Event Booking Live Validation Form

Complete a live validation form for the event booking scenario: includes realistic content, interactive controls, clear status feedback, and responsive layout across sizes.

Forms and inputInstant Validation FormHTMLCSSJavaScript
Open and run
0475Cards, Lists, and Content Organization

Filterable Card Wall for Team Directory

Create a filterable card wall for a team directory scenario: includes realistic content, interactive controls, clear status feedback, and responsive layouts.

Cards, Lists, and Content OrganizationFilterable Card WallHTMLCSSJavaScript
Open and run
0476Tables and data display

Service ticket multi-column sorting table

Complete the multi-column sorting table in a service ticket scenario: includes real content, interactive controls, clear status feedback, and cross-size layouts.

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

Research Notes Bento Grid Layout

Complete a bento grid layout in a research notes scenario: include real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Page Layout and ResponsiveBento grid layoutHTMLCSS GridResponsive Design
Open and run
0478Marketing and content scenarios

Nature campsite narrative hero

Create a narrative hero section for a nature camp scenario: includes real content, interactive controls, clear status feedback, and responsive layouts.

Marketing and content scenariosNarrative HeroHTMLCSSJavaScript
Open and run
0479Animation & Microinteractions

Multi-Stage Loader for Order Status

Build a multi-stage loader for order status scenarios: includes real content, interactive controls, clear status feedback, and layouts across sizes.

Animation & MicrointeractionsMulti-stage LoaderHTMLCSS AnimationJavaScript
Open and run
0480Creative Visual Effects

Interactive particle field in paper space

Complete the interactive particle field in a paper-space setting: includes realistic content, interactive controls, clear status feedback, and responsive layouts.

Creative Visual EffectsInteractive Particle FieldHTMLCanvasJavaScript
Open and run