Frontend Widgets

A curated collection of simple, standalone HTML + CSS + JavaScript projects you can download, customize, and remix.
Everything here is designed to be copy‑paste friendly, with minimal dependencies.

---

Examples

Pixel Art Drawing Board

Quote Image Generator

Personal Palette Generator

Pixel Art Palette Extractor

Quick Start

Option A — Download everything

1. Click “Code” → “Download ZIP” on the GitHub repo.
2. Unzip and open any index.html file in your browser.
3. Tweak the HTML/CSS/JS to fit your needs.

Option B — Grab one project

1. Navigate to the folder you want in this repository.
2. Download only the files in that folder (right‑click → Save link as).
3. Open the HTML in your browser and edit.

Option C — GitHub Pages (recommended)

1. Fork this repo (or use it as a template).
2. Push to your GitHub account.
3. In your repo: Settings → Pages → Source: main → /root.
4. Your projects will be live at https://<your-username>.github.io/<repo>/...

---

Projects Catalogue

Below is an auto‑generated index from the current files. If a project is missing a description, you can improve it by adding a <meta name="description"> tag or an <h1> with a meaningful summary in its HTML.

How To Customize

• Change colors & fonts: tweak values in the :root CSS custom properties or the .css file in the same folder.
• Swap copy/content: edit text inside the HTML. Keep the structure, replace the words.
• Add images: place your images in the same folder and reference them with a relative path (e.g. ./hero.png).
• Disable features: comment‑out or remove event listeners in the JS files.
• Mobile tweaks: use CSS media queries (e.g. @media (max-width: 640px)).
• Accessibility: ensure sufficient color contrast, add alt text to images, and use semantic HTML elements.

---

Recommended File Layout (per project)

project-name/
├── index.html        # the main entry point
├── styles.css        # styles (or inline in HTML)
├── script.js         # optional interactive behavior
└── assets/           # optional images, fonts, etc.

---

Contributing

Got a fix, a feature, or a brand‑new mini‑project?

1. Fork this repo and create a branch: git checkout -b feature/your-idea
2. Add your project in its own folder (see layout above).
3. Include a short README.md inside your folder with: purpose, features, how to use, and license note.
4. Open a Pull Request describing your changes and screenshots/GIFs if relevant.

Please read the CODE_OF_CONDUCT.md and CONTRIBUTING.md before submitting.

---

License

Unless otherwise noted inside a project folder, this repository is released under the MIT License.
You can use these projects in personal or commercial work with attribution preferred but not required. See LICENSE.