Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/sorcererchiragsingh/web-development-projects

Some Basic Web Development Project's
https://github.com/sorcererchiragsingh/web-development-projects

self small-projects webdevelopment

Last synced: about 1 month ago
JSON representation

Some Basic Web Development Project's

Awesome Lists containing this project

README

        

Basic Web Development Projects



MIT License

The "Basic Web Development Project" involved developing a series of fundamental web applications that demonstrated my core HTML, CSS, and JavaScript skills.



## Table of Contents

- [About](#about)
- [Features](#features)
- [Screenshots](#screenshots)
- [Tech Stack](#tech-stack)
- [Future Projetc's](#FutureProject's)
- [Report Issues](#report-issues)
- [License](#license)
- [Acknowledgements](#acknowledgements)

## About

Basic Web Development Projects focused on building foundational web applications, showcasing proficiency in HTML, CSS, and JavaScript, and covering essential web design principles and interactive user experiences.

## Features

- **Feature 1:** Responsive Design: Implemented mobile-friendly layouts using flexible grids and media queries.
- **Feature 2:** Semantic HTML: Used semantic elements to improve accessibility and SEO.
- **Feature 3:** Custom CSS Styling: Applied custom styling with CSS to enhance the visual appeal and user experience.

## Screenshots

### 1.Simple Calculator ➥ Live Demo
![](https://github.com/SorcererChiragsingh/Web-Development-Projects/blob/main/1-Simple_Calculator/Preview.png)

### 2.Digital Clock ➥ Live Demo
![](https://github.com/SorcererChiragsingh/Web-Development-Projects/blob/main/2-Digital_Clock/preview.png)

### 3.To Do List ➥ Live Demo
![](https://github.com/SorcererChiragsingh/Web-Development-Projects/blob/main/3-To_Do_List/preview.png)

### 4.Rock Paper and Scissors ➥ Live Demo
![](https://github.com/SorcererChiragsingh/Web-Development-Projects/blob/main/4-Rock_Paper_Scissors/preview.png)

### 5.Social Media Icons ➥ Live Demo
![](https://github.com/SorcererChiragsingh/Web-Development-Projects/blob/main/5-Social_Media_Icons/preview.png)

### 6.Star Rating ➥ Live Demo
![](https://github.com/SorcererChiragsingh/Web-Development-Projects/blob/main/6-Star_Rating/preview.png)

### 7.StopWatch ➥ Live Demo
![](https://github.com/SorcererChiragsingh/Web-Development-Projects/blob/main/7-Stopwatch/preview.png)

### 8.Random Color Generator ➥ Live Demo
![](https://github.com/SorcererChiragsingh/Web-Development-Projects/blob/main/8-Random_Color_Generator/preview.png)

### 9.Simple Login Form ➥ Live Demo
![](https://github.com/SorcererChiragsingh/Web-Development-Projects/blob/main/9-Simple_Login_Form/preview.png)

### 10.Temperature Converter ➥ Live Demo
![](https://github.com/SorcererChiragsingh/Web-Development-Projects/blob/main/10-Temperature_Converter/preview.png)

### 11.Tribute Page ➥ Live Demo
![](https://github.com/SorcererChiragsingh/Web-Development-Projects/blob/main/11-Tribute%20Page/preview1.png)
![](https://github.com/SorcererChiragsingh/Web-Development-Projects/blob/main/11-Tribute%20Page/preview2.png)

### 12.Qiuz App ➥ Live Demo
![](https://github.com/SorcererChiragsingh/Web-Development-Projects/blob/main/12-Quiz%20App/Image/Preview2.png)
![](https://github.com/SorcererChiragsingh/Web-Development-Projects/blob/main/12-Quiz%20App/Image/Preview3.png)

### 13.Restaurant Website➥ Live Demo
![](https://github.com/SorcererChiragsingh/Web-Development-Projects/blob/main/13-Restaurant_website/Image/demo.gif)

### 14.Dice Game ➥ Live Demo
![]()

### 15.Product Landing Page ➥ Live Demo
![](https://github.com/SorcererChiragsingh/Web-Development-Projects/blob/main/15-Product%20Landing%20Page/preview1.png)

### 16.Tic Tac Toe Game ➥ Live Demo
![](https://github.com/SorcererChiragsingh/Web-Development-Projects/blob/main/16-Tic%20Tac%20Toe%20Game/preview1.png)
![](https://github.com/SorcererChiragsingh/Web-Development-Projects/blob/main/16-Tic%20Tac%20Toe%20Game/preview2.png)

### 17.Snake Game ➥ Live Demo
![](https://github.com/SorcererChiragsingh/Web-Development-Projects/blob/main/17-Snake%20Game/preview1.png)
![](https://github.com/SorcererChiragsingh/Web-Development-Projects/blob/main/17-Snake%20Game/preview2.png)

### 18.Sorting Visualizer ➥ Live Demo
![](https://github.com/SorcererChiragsingh/Web-Development-Projects/blob/main/18-Sorting%20Visualizer/preview.png)

### 19.Insect Catch Game ➥ Live Demo
![](https://github.com/SorcererChiragsingh/Web-Development-Projects/blob/main/19-Insect%20Catch%20Game/preview1.png)
![](https://github.com/SorcererChiragsingh/Web-Development-Projects/blob/main/19-Insect%20Catch%20Game/preview2.png)
![](https://github.com/SorcererChiragsingh/Web-Development-Projects/blob/main/19-Insect%20Catch%20Game/preview3.png)

### 20.Rotating Navigation Animation ➥ Live Demo
![](https://github.com/SorcererChiragsingh/Web-Development-Projects/blob/main/20-Rotating%20Navigation%20Animation/preview1.png)
![](https://github.com/SorcererChiragsingh/Web-Development-Projects/blob/main/20-Rotating%20Navigation%20Animation/preview2.png)

### 21.Invalid Input Shake ➥ Live Demo
![](https://github.com/SorcererChiragsingh/Web-Development-Projects/blob/main/21-Invalid%20Input%20Shake/preview1.png)
![](https://github.com/SorcererChiragsingh/Web-Development-Projects/blob/main/21-Invalid%20Input%20Shake/preview2.png)

### 22.Box Shadow Generator ➥ Live Demo
![](https://github.com/SorcererChiragsingh/Web-Development-Projects/blob/main/22-Box%20Shadow%20Generator/preview.png)

### 23.Notes Application ➥ Live Demo
![](https://github.com/SorcererChiragsingh/Web-Development-Projects/blob/main/23-Notes%20Application/preview.png)

### 24.Hoverboard ➥ Live Demo
![](https://github.com/SorcererChiragsingh/Web-Development-Projects/blob/main/24-Hoverboard/preview.png)

### 25.Drawing App ➥ Live Demo
![](https://github.com/SorcererChiragsingh/Web-Development-Projects/blob/main/25-Drawing%20App/preview.png)

### 26.Gradient Generator ➥ Live Demo
![](https://github.com/SorcererChiragsingh/Web-Development-Projects/blob/main/26-Gradient%20Generator/preview.png)

### 27.Animated CountDown ➥ Live Demo
![](https://github.com/SorcererChiragsingh/Web-Development-Projects/blob/main/27-Animated%20countdown/preview.png)

### 28.Memory Matching Game ➥ Live Demo
![](https://github.com/SorcererChiragsingh/Web-Development-Projects/blob/main/28-Memory%20Matching%20Game/Images/snapshot1.PNG)
![](https://github.com/SorcererChiragsingh/Web-Development-Projects/blob/main/28-Memory%20Matching%20Game/Images/snapshot2.PNG)
![](https://github.com/SorcererChiragsingh/Web-Development-Projects/blob/main/28-Memory%20Matching%20Game/Images/snapshot3.PNG)

### 29.Feedback UI Design ➥ Live Demo
![](https://github.com/SorcererChiragsingh/Web-Development-Projects/blob/main/29-Feedback%20UI%20Design/Images/preview1.png)
![](https://github.com/SorcererChiragsingh/Web-Development-Projects/blob/main/29-Feedback%20UI%20Design/Images/preview2.png)

### 30.Verify Account UI Design ➥ Live Demo
![](https://github.com/SorcererChiragsingh/Web-Development-Projects/blob/main/30-Verify%20Account%20UI/Images/preview.png)

### 31.Shoes Website ➥ Live Demo
![](https://github.com/SorcererChiragsingh/Web-Development-Projects/blob/main/31-Shoes%20Website/Image/preview1.png)
![](https://github.com/SorcererChiragsingh/Web-Development-Projects/blob/main/31-Shoes%20Website/Image/preview2.png)

## Tech Stack

- Frontend: HTML, CSS, JAVASCRIPT, BOOTSTRAP
- Backend: Not Applicable
- Database:Not Applicable
- Deployment:XAAMP LocalHost & Github.io

## Future Project's

- Student Grade Calculator
- Slide Down a Navigation Bar on Scroll
- Tip Calculator
- Detect Internet Speed Test
- And Many More.................To Come

## Report Issues
- You can report issues on this project using Github issue.
- You can read more about this from [Github Docs](https://docs.github.com/en/issues/tracking-your-work-with-issues/creating-an-issue)

## License

- This project is licensed under the MIT License - see the [LICENSE](https://github.com/SorcererChiragsingh/Web-Development-Projects/blob/main/LICENSE) file for details.
- The project Bean & Brew Coffee is packaged and distributed using the [MIT License](https://choosealicense.com/licenses/mit/) which allows for commercial use, distribution, modification and private use provided that all copies of the software contain the same license and copyright.

## Acknowledgements

- I want to express my gratitude to the online resources that greatly assisted me in completing this project.

- Firstly, I am thankful to [Vijay Kumar](https://www.udemy.com/user/vijay-kumar-4865/) & [Geeks for Geeks](https://www.geeksforgeeks.org/web-development-projects/?ref=lbp) for providing extensive tutorials and examples on web development topics, which helped deepen my understanding of various concepts and techniques.

- Additionally, I would like to acknowledge [Teamwork.com](https://www.teamwork.com/blog/web-development-projects/) for its insights and resources on effective project management, which were invaluable in organizing and executing the different stages of this project.

- Their contributions have been instrumental in the successful development of these web projects.

- For the Community By The Community!
- A passion project by [Chirag](www.linkedin.com/in/chirag-singh-148993279)