Web project collection
Explore the projects.
Twenty-one independent demos, from small browser tools to page layouts and interface experiments. Open a browser project to try it, or check the setup notes for the two server projects.
Browse projects01 / Open in a browser
Browser projects
These pages need no build step. Some features work best from localhost or need internet access; those requirements are marked on their cards.
-
Form demo
Accessible form validation
Try a contact form with clear errors, keyboard-friendly navigation, and a local success state.
Open demo -
Browser tool Internet
Check internet connection
Check a remote endpoint and show whether the connection is available.
Open demo -
Utility
Color contrast checker
Compare two colors, check contrast thresholds, and preview text and buttons.
Open demo -
Browser storage
Cookie consent box
Try a consent prompt with accept, reject, and custom choices that can be changed later.
Open demo -
Utility Local files
CSV viewer
Open a CSV locally, then search, sort, and page through its rows.
Open demo -
Browser tool
Detect browser
Identify the current browser and highlight its logo.
Open demo -
Interface
Expanding Cards
Select an image panel to expand it across the layout.
Open demo -
Browser tool Location + internet
Get user location
Use geolocation and reverse geocoding to show a place name.
Open demo -
Utility Local files
Image resizer and compressor
Resize and convert an image in your browser, then download the result.
Open demo -
Utility
Password generator
Generate custom or Apple-style passwords locally, then copy the result.
Open demo -
Interface
Progress Steps
Move forward and backward through a visual progress indicator.
Open demo -
Utility Internet
QR Code Generator
Create a QR code image from entered text or a URL.
Open demo -
Page layout Internet assets
Responsive personal portfolio
Explore a multi-section portfolio with animated text and a carousel.
Open demo -
Interface
Rotating Navigation
Reveal navigation by rotating the page layout.
Open demo -
CSS effect Internet icons
Service box with flip animation
Flip service cards to reveal their reverse side.
Open demo -
Browser tool
Text to Speech
Speak entered text with the browser's speech synthesis feature.
Open demo -
Utility
Typing Speed Test
Time a typing exercise and report mistakes and typing speed.
Open demo -
Starter page
Boilerplate template
Start a one-page site with a responsive HTML and CSS layout.
Open demo -
CSS effect
Text typing animation
Cycle through short phrases with a CSS typing effect.
Open demo
02 / Run locally
Server projects
These interfaces have server-side features. Follow the setup notes before trying their main actions.
-
PHP
File upload with progress bar
Track upload progress while a PHP handler receives the file. The interface opens in a browser; uploading needs a PHP server.
View interface -
PHP + database
URL shortener
Create short links and see click counts with PHP and MySQL or MariaDB. Its working entry point is
Read setup notesindex.php.