A collection of independent web projects and interface demos. Most use HTML, CSS, and JavaScript directly, so there is no shared build step.
Maintained by Thomas Brown.
Open the project gallery to browse the demos in a browser.
| Project | Description |
|---|---|
| Accessible form validation | Checks a contact form locally with field errors, an error summary, and a success state. |
| Check internet connection | Shows an online or offline status message after checking a remote endpoint. |
| Color contrast checker | Compares two colors against text and interface contrast thresholds with live previews. |
| Cookie consent box | Offers accept, reject, and custom preference choices, then remembers the decision. |
| CSV viewer | Opens CSV or TSV files locally with separator controls, search, sorting, and pagination. |
| Detect browser | Identifies the browser and highlights its logo. |
| Expanding Cards | Expands an image panel when it is selected. |
| File upload with progress bar | Uploads a file to a PHP handler and displays transfer progress. |
| Get user location | Uses browser geolocation and a user-provided OpenCage key to show a location. |
| Image resizer and compressor | Resizes and converts images locally in the browser for download. |
| Password generator | Generates custom or Apple-style passwords locally without repeating a result during a page visit. |
| Progress Steps | Moves forward and backward through a visual progress indicator. |
| QR Code Generator | Generates a QR code image from entered text or a URL. |
| Responsive personal portfolio | A responsive, multi-section portfolio with animated text and a carousel. |
| Rotating Navigation | Reveals navigation by rotating the page layout. |
| Service box with flip animation | Displays service cards with a CSS flip effect. |
| Text to Speech | Speaks entered text with the browser's speech synthesis API. |
| Typing Speed Test | Times a typing exercise and reports mistakes, words per minute, and characters per minute. |
| Url shortener | A PHP and MySQL/MariaDB URL shortener with custom links, click counts, and link management. |
| boilerplate_template | A responsive HTML and CSS starter page. |
| text typing animation | A CSS typing animation that cycles through short phrases. |
Open a project's index.html in a browser. You can also serve the repository locally from its root:
python3 -m http.server 8000Then open http://localhost:8000/ and select a project folder. Browser features such as geolocation may require a secure context; localhost is supported by modern browsers.
Some demos use external services or CDN-hosted assets. The connectivity check queries a remote endpoint, the location demo needs your own OpenCage key for reverse geocoding, and the QR generator requests an image from qrserver.com. An internet connection is needed for those features.
File upload with progress bar requires PHP. From the repository root, create the upload destination and start PHP's local server:
mkdir -p "File upload with progress bar/php/files"
php -S localhost:8001 -t "File upload with progress bar"Open http://localhost:8001/.
Url shortener requires PHP with mysqli, MySQL or MariaDB, and an Apache server with URL rewriting enabled for shortened links. Create a urlshortener database and import database/url.sql. Set the database connection and base URL in php/config.php, and set the displayed short-link domain in js/script.js to match. Serve the Url shortener folder and open index.php directly; its index.html is a separate starter page.
The PHP projects are local demos. Review their upload and link-management behavior before exposing them publicly.
Original code and documentation owned by Thomas Brown are released under the MIT license. You may use, modify, and share that material, including in commercial work, while keeping its copyright and license notice with copies or substantial portions. Source comments and this README also identify the author.
Bundled libraries and files with separate or unverified rights are described in Third-party material. The root MIT license does not grant rights to those files.
See Contributing before opening a pull request, and follow the Code of conduct. For vulnerabilities, read the Security policy before reporting details publicly.
Maintainers can use the repository settings guide when setting main as the default and protected branch.