Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/shravandalavi/web-mini-projects

This repository features small web projects built with HTML, CSS, and JavaScript, aimed at enhancing your web development skills. Perfect for beginners, each project focuses on a specific functionality to help you practice and improve.
https://github.com/shravandalavi/web-mini-projects

html-css-javascript miniprojects miniweb project web web-project web-projects webdevelopment webdevelopment-project webminiproject webproject webprojects website

Last synced: about 7 hours ago
JSON representation

This repository features small web projects built with HTML, CSS, and JavaScript, aimed at enhancing your web development skills. Perfect for beginners, each project focuses on a specific functionality to help you practice and improve.

Awesome Lists containing this project

README 

        
# Web-Mini-Projects



Welcome to the Web-Mini-Projects repository! This repository contains a collection of small web-based projects designed to improve your web development skills. Each project focuses on a specific functionality and uses various web technologies.



## Introduction

This repository is a collection of mini web projects built with HTML, CSS, and JavaScript. The projects include a digital clock, a countdown timer, a color palette picker, and more. These projects are ideal for beginners who want to practice and enhance their web development skills.



## Projects

Here is a list of the projects included in this repository:



| **No.** | **Name** |  **Demo** |

| ------- | -------- | -------- | 

|  **01** | [**Analog Clock**](https://github.com/ShravanDalavi/Web-Mini-Projects/blob/main/projects/Analog%20Clock/) | [Link](https://4nz2kd.csb.app/) | 

|  **02** | [**Color Palette Picker**](https://github.com/ShravanDalavi/Web-Mini-Projects/tree/main/projects/Color%20Palette%20Picker)| [Link](https://codepen.io/Shravan-Dalavi/pen/bGPqXVz) | 

|  **03** | [**Countdown Timer**](https://github.com/ShravanDalavi/Web-Mini-Projects/tree/main/projects/Countdown%20Timer)  | [Link](https://codepen.io/Shravan-Dalavi/pen/RwzpXrM) |

|  **04** | [**Daily Journal Web App**](https://github.com/ShravanDalavi/Web-Mini-Projects/tree/main/projects/Daily%20Journal%20Web%20App)  | [Link](https://codepen.io/Shravan-Dalavi/pen/XWvbezL) |

|  **05** | [**Date Difference Calculator**](https://github.com/ShravanDalavi/Web-Mini-Projects/tree/main/projects/Date%20Calculate)  | [Link]() | 

|  **06** | [**Digital Clock**](https://github.com/ShravanDalavi/Web-Mini-Projects/tree/main/projects/Digital%20Clock)  | [Link](https://codepen.io/Shravan-Dalavi/pen/vYqxoGR) |

|  **07** | [**Enhanced Drawing App (Whiteboard)**](https://github.com/ShravanDalavi/Web-Mini-Projects/tree/main/projects/Enhanced%20Drawing%20App%20(Whiteboard))  | [Link](https://tynvtx.csb.app/) |

|  **08** | [**Event Countdown Timer**](https://github.com/ShravanDalavi/Web-Mini-Projects/tree/main/projects/Event%20Countdown%20Timer)  | [Link](https://codepen.io/Shravan-Dalavi/pen/xxovaxK)| 

|  **09** | [**Image Search**](https://github.com/ShravanDalavi/Web-Mini-Projects/tree/main/projects/Image%20Search)  | [Link](https://codepen.io/Shravan-Dalavi/pen/gONWMNe) |

|  **10** | [**Mindfulness Meditation Timer**](https://github.com/ShravanDalavi/Web-Mini-Projects/tree/main/projects/Mindfulness%20Meditation%20Timer)  | [Link](https://57ymkh.csb.app/) |

|  **11** | [**Multi-Step Form**](https://github.com/ShravanDalavi/Web-Mini-Projects/tree/main/projects/Multi%20Step%20Form)  | [Link](https://7wn8dp.csb.app/) | 

|  **12** | [**Notes App**](https://github.com/ShravanDalavi/Web-Mini-Projects/tree/main/projects/Notes%20App)  | [Link](https://codepen.io/Shravan-Dalavi/pen/oNrWLKZ) | 

|  **13** | [**Online Poll Creator**](https://github.com/ShravanDalavi/Web-Mini-Projects/tree/main/projects/Online%20Poll%20Creator)  | [Link](https://lzm79s.csb.app/) | 

|  **14** | [**Password Generator**](https://github.com/ShravanDalavi/Web-Mini-Projects/tree/main/projects/Password%20Generator)  | [Link](https://codepen.io/Shravan-Dalavi/pen/WNqjxVL) | 

|  **15** | [**Personal Blog**](https://github.com/ShravanDalavi/Web-Mini-Projects/tree/main/projects/Personal%20Blog)  | [Link](https://tsr2xq.csb.app/index.html) | 

|  **16** | [**Personal Finance Manager (Expense Tracker)**](https://github.com/ShravanDalavi/Web-Mini-Projects/tree/main/projects/Personal%20Finance%20Manager)  | [Link](https://7t8kht.csb.app/) | 

|  **17** | [**Photo Gallery**](https://github.com/ShravanDalavi/Web-Mini-Projects/tree/main/projects/Photo%20Gallery)  | [Link](https://lf36l9.csb.app/) |

|  **18** | [**Rock Paper Scissors Game**](https://github.com/ShravanDalavi/Web-Mini-Projects/tree/main/projects/Rock%20Paper%20Scissor%20Game)  | [Link](https://codepen.io/Shravan-Dalavi/pen/jOjoZyV) | 

|  **19** | [**Short Link Generator**](https://github.com/ShravanDalavi/Web-Mini-Projects/tree/main/projects/Short%20Link%20Generator)  | [Link](https://qws2hl.csb.app/) |

|  **20** | [**Speech Reader (Text to Speech)**](https://github.com/ShravanDalavi/Web-Mini-Projects/tree/main/projects/Speech%20Reader%20(Text%20to%20Speech%20))| [Link](https://k8xj9s.csb.app/) | 

|  **21** | [**Ticket Management System**](https://github.com/ShravanDalavi/Web-Mini-Projects/tree/main/projects/Ticket%20Management)  | [Link](https://2jt5ft.csb.app/) | 

|  **22** | [**Weather-Based Outfit Recommender**](https://github.com/ShravanDalavi/Web-Mini-Projects/tree/main/projects/Weather%20Based%20Outfit%20Recommender)  | [Link](https://fhrwcx.csb.app/) |



---



## How to Run

To run these projects locally, follow these steps :

1. Clone the repository to your local machine :

    ```bash

    git clone https://github.com/ShravanDalavi/Web-Mini-Projects.git



    ```



2. Navigate to the project directory :

    ```bash

    cd Web-Mini-Projects/projects/

    ```

    

3. Open the `index.html` file in your web browser to view and run the project.

    ```bash

    open index.html

    ```

---



## Technologies Used

- HTML

- CSS

- JavaScript

- Node.js (for backend projects)

- Express (for backend projects)

- Socket.io (for real-time applications)

- Various APIs



---



## Prerequisites

Before running these projects, ensure you have the following installed on your machine:

- A web browser (e.g., Chrome, Firefox, Safari)

- A text editor or IDE (e.g., VS Code, Sublime Text)



For certain projects that may involve additional tooling, follow any specific instructions provided in the project's subfolder.



---



## How can I read this tutorial without an Internet connection? GIF

1. Go [**`here`**](https://github.com/ShravanDalavi/Web-Mini-Projects) and click the big green ➞  **`Code`** button in the top right of the page, then click ➞ [**`Download ZIP`**](https://github.com/shravandalavi/Web-Mini-Projects/archive/refs/heads/main.zip).



![image](https://github.com/user-attachments/assets/864a8d4e-dc4f-43c5-a1b6-cc58503b2981)



2. Extract the ZIP and open it. Unfortunately I don't have any more specific instructions because how exactly this is done depends on which operating system you run.    

3. Launch ipython notebook from the folder which contains the notebooks. Open each one of them

  

    **`Kernel > Restart & Clear Output`**

    

This will clear all the outputs and now you can understand each statement and learn interactively.



If you have git and you know how to use it, you can also clone the repository instead of downloading a zip and extracting it. An advantage with doing it this way is that you don't need to download the whole tutorial again to get the latest version of it, all you need to do is to pull with git and run ipython notebook again.



---



## Licence 📜

You may use this tutorial freely at your own risk. See [LICENSE](./LICENSE).



## Contributors ✨

- Shravan Dalavi

  - Contact: [email protected]

  - GitHub: [Profile](https://github.com/ShravanDalavi)

    

- Ashwini Sonawane

  - Contact: [email protected]

  - GitHub:  [Profile](https://github.com/SonawaneAshwini)



---



### Feedback and Support

We value your input! If you encounter any issues or have suggestions, please open an issue in this repository. Your feedback helps us improve!



### Show Your Support

**If you enjoyed this tutorial, don't forget to [⭐ star the repository](https://github.com/ShravanDalavi/Web-Mini-Projects) and [follow for updates](https://github.com/ShravanDalavi).**



**Thank you for exploring this repository! I hope you find these projects both interesting and useful. 😊**