https://github.com/tonystark-19/html-css-js-projects
Welcome to the HTML, CSS & JavaScript Mini Projects Website! 🎨✨ This website showcases various mini projects I created to enhance my front-end development and JavaScript skills. Each project comes with an image preview, source code link, and live demo link for easy access.
https://github.com/tonystark-19/html-css-js-projects
api css3 html-css-javascript html5 javascript mini-projects
Last synced: 2 months ago
JSON representation
Welcome to the HTML, CSS & JavaScript Mini Projects Website! 🎨✨ This website showcases various mini projects I created to enhance my front-end development and JavaScript skills. Each project comes with an image preview, source code link, and live demo link for easy access.
- Host: GitHub
- URL: https://github.com/tonystark-19/html-css-js-projects
- Owner: TonyStark-19
- Created: 2025-02-27T14:13:22.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-29T17:42:25.000Z (about 1 year ago)
- Last Synced: 2025-03-29T18:32:42.381Z (about 1 year ago)
- Topics: api, css3, html-css-javascript, html5, javascript, mini-projects
- Language: CSS
- Homepage: https://html-css-js-projects-five.vercel.app
- Size: 5.21 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🚀 HTML, CSS & JavaScript Mini Projects Hub
---
## 📖 Overview
Welcome to the **HTML, CSS & JavaScript Mini Projects Hub** — a curated collection of beginner-friendly frontend projects built to sharpen **UI/UX,
JavaScript logic, DOM manipulation, API usage**, and responsive design skills.
Every project includes an **image preview, source code link**, and **live demo** — making it easy to learn, explore, and interact.
This repo is a major milestone in my journey to master **JavaScript logic, UI/UX design**, and **web development fundamentals**. 🚀🔥
---
## 📸 Visual Preview
| 🏠 Home Page Interface | 📂 Project Gallery |
| :---: | :---: |
|  |  |
---
## 🌐 Live Demo
The project is live and can be viewed here: [HTML, CSS & JS Mini Projects Website](https://html-css-js-projects-five.vercel.app/)
---
## 🛠 Tech Stack
| Technology | Purpose |
|-----------|--------|
| **HTML5** | Page structure |
| **CSS3** | Styling, layouts & animations |
| **JavaScript** | Logic, DOM manipulation & APIs |
| **ScrollReveal.js** | Scroll-based animations |
| **Vercel** | Deployment |
| **Git & GitHub** | Version control |
| **Favicon by Freepik** | Icon by manshagraphics |
---
## 📂 Projects Listed
Each project includes:
| 📸 Image Preview | 📜 Code Link | 🔗 Live Demo |
|------------------|-------------|--------------|
---
## 📂 Projects
### 🧰 Utility & Interactive Tools
| # | Project | Description |
|---|--------|-------------|
| 1 | Calculator | Basic calculator with JS functionality |
| 2 | Currency Converter | Convert currencies dynamically |
| 3 | Rock-Paper-Scissors | Interactive game logic |
| 4 | Tic-Tac-Toe | Classic 2-player game |
| 5 | Calendar | Dynamic calendar display |
| 6 | Show/Hide Password | Password visibility toggle |
| 7 | Countdown Page | Launch timer page |
| 8 | Digital Clock | Real-time clock |
| 9 | Password Generator | Secure random passwords |
| 10 | Password Strength Indicator | Strength checker UI |
| 11 | Quote Generator | Random quote generator |
| 12 | Drag & Drop | Drag-drop interaction |
| 13 | QR Code Generator | Generate QR codes |
| 14 | Custom Select Menu | Styled dropdowns |
| 15 | Text-to-Speech | Speech synthesis |
| 16 | Age Calculator | Calculate age from DOB |
| 17 | Toast Notification | Notification popup UI |
| 18 | Stopwatch | Functional stopwatch |
| 19 | To-Do List | Task management app |
| 20 | Weather App | Weather using API |
| 21 | Image Search Engine | Unsplash API search |
| 22 | Form Validation | Input validation checks |
| 23 | Notes App | Multi-note app |
---
## 🤝 Contributing
Want to add your own mini project? Contributions are welcome!
Please read **[CONTRIBUTING.md](CONTRIBUTING.md)** for guidelines on:
- Folder structure
- Code quality
- Image naming
- Adding your project card
---
## 🛠 Installation & Usage
To use these projects locally, follow these steps:
1️⃣ **Clone this repository**
```bash
git clone https://github.com/TonyStark-19/HTML-CSS-JS-Projects.git
```
---
2️⃣ **Open a project folder and launch the `.html` file in your browser.**
🚀 No dependencies required! Just HTML, CSS & JavaScript.
---
## ⚙️ Prerequisites
Before running the projects, ensure you have the following installed:
- 🖥️ **A modern web browser** (Chrome, Firefox, Edge, etc.)
- 📝 **VS Code** (or any code editor)
- 🌐 **Git** (optional, for cloning the repository)
---
## Resources
These are the resources I used to learn and build these projects:
- [MDN Web Docs (JavaScript)](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
- [GreatStack youtube channel](https://www.youtube.com/playlist?list=PLjwm_8O3suyOgDS_Z8AWbbq3zpCmR-WE9)
---
## 📜 License
This project is licensed under the MIT License.
You are free to use, modify, and share these projects.
---
Feel free to explore, use, and modify these projects.
If you find them helpful, consider giving this repo a ⭐! 😊