https://github.com/saqibbedar/web-projects-collection

A collection repo of beginner-friendly web development projects
https://github.com/saqibbedar/web-projects-collection

beginner-friendly beginner-project css dom-projects html-css-javascript html5 javascript web web-development-project webdevelopment webprojects

Last synced: 7 months ago
JSON representation

A collection repo of beginner-friendly web development projects

• Host: GitHub
• URL: https://github.com/saqibbedar/web-projects-collection
• Owner: saqibbedar
• License: mit
• Created: 2024-02-18T14:39:25.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2025-03-09T11:20:56.000Z (11 months ago)
• Last Synced: 2025-04-04T21:22:55.088Z (11 months ago)
• Topics: beginner-friendly, beginner-project, css, dom-projects, html-css-javascript, html5, javascript, web, web-development-project, webdevelopment, webprojects
• Language: HTML
• Homepage:
• Size: 608 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: FUNDING.yml

Awesome Lists containing this project

README

          
# Web Development Projects Collection

Welcome to the Web Development Projects Collection! This repository houses a variety of beginner-friendly web development projects, each located in its dedicated folder. Whether you're just starting in web development or looking for hands-on projects to enhance your skills, this collection has something for everyone.

## Key Features

- **Project Variety:** Explore a range of projects to cater to different skill levels and interests.

- **Structured Organization:** Each project has its own folder, keeping the repository neat and easy to navigate.

- **Beginner-Friendly:** Designed with beginners in mind, these projects offer hands-on learning opportunities.

## Projects Included

| S.No | Project name | Preview Link |

|:-- | :-- | :-- |

| 1. | Doctor Website Landing Page | [Preview →](https://saqibbedar.github.io/web-projects-collection/DoctorWebLandingPage/index.html) |

| 2. | Fixed Navbar on scroll | [Preview →](https://saqibbedar.github.io/web-projects-collection/FixedNavbarOnScroll/index.html) |

| 3.1 | Animations - AutoUnderline  | [Preview →](https://saqibbedar.github.io/web-projects-collection/Animations/Auto%20underline%20on%20hover/index.html) |

| 3.2 | Animations - Button | [Preview →](https://saqibbedar.github.io/web-projects-collection/Animations/Button%20Animation/index.html) |

| 3.3 | Animations - CSS | [Preview →](https://saqibbedar.github.io/web-projects-collection/Animations/CssAnimation/index.html) |

| 3.4 | Animations - Typing.js | [Preview →](https://saqibbedar.github.io/web-projects-collection/Animations/Typingjs%20Animation/index.html) |

| 3.5 | Animations - Beautiful Cursor | [Preview →](https://saqibbedar.github.io/web-projects-collection/Animations/mousemove/index.html) |

| 3.6 | Animations - ImageSlider on mousemove event | [Preview →](https://saqibbedar.github.io/web-projects-collection/Animations/moveImage-on-mousemove/index.html) |

| 4 | Elements using Js | [Preview →](https://saqibbedar.github.io/web-projects-collection/CreateElemsUsingLoop/index.html) |

| 5 | Credential Cards | [Preview →](https://saqibbedar.github.io/web-projects-collection/HTML%20Crendential%20Cards/index.html) |

| 6 | Scale Image onClick | [Preview →](https://saqibbedar.github.io/web-projects-collection/ImageScaleOnclick/index.html) |

| 7 | Image Slide Show | [Preview →](https://saqibbedar.github.io/web-projects-collection/ImageSlideShow/index.html) |

| 8 | Website Landing Page | [Preview →](https://saqibbedar.github.io/web-projects-collection/LandingPage-1/index.html) |

| 9 | My first web Project | [Preview →](https://saqibbedar.github.io/web-projects-collection/MyFirstWebProject/homePage.html) |

| 10.1 | Onclick Copy Text | [Preview →](https://saqibbedar.github.io/web-projects-collection/OnclickCopyText/index.html) |

| 10.2 | Onclick Copy Text-2 | [Preview →](https://saqibbedar.github.io/web-projects-collection/OnclickCopyText/onclickCopyText2.html) |

| 10.3 | On doubleblclick Copy Text-2 | [Preview →](https://saqibbedar.github.io/web-projects-collection/OnclickCopyText/dblclickToCopy/index.html) |

| 11 | Onload Animation | [Preview →](https://saqibbedar.github.io/web-projects-collection/Onload/index.html) |

| 12 | Responsive Navbar | [Preview →](https://saqibbedar.github.io/web-projects-collection/ResponsiveNavbar/index.html) |

| 13 | Get Document URL | [Preview →](https://saqibbedar.github.io/web-projects-collection/GetDocumentURL/01_URL.html) |

| 14 | Progress Bar | [Preview →](https://saqibbedar.github.io/web-projects-collection/ProgressBar/index.html) |

| 15 | Fetch API - FakeUserData | [Preview →](https://saqibbedar.github.io/web-projects-collection/FetchAPI/FakeUserData/index.html) |

| 15 | LocalStorage API - Insert & Read Data | [Preview →](https://saqibbedar.github.io/web-projects-collection/LocalStorageAPI/index.html) |

| 15.1 | LocalStorage API - add-more-boxes | [Preview →](https://saqibbedar.github.io/web-projects-collection/LocalStorageAPI/add-more-boxes/index.html) |

| 16 | Search | [Preview →](https://saqibbedar.github.io/web-projects-collection/Search/index.html) |

| 17 | PopUp On Button Click | [Preview →](https://saqibbedar.github.io/web-projects-collection/pop-up-on-button-click/index.html) |

| 18 | Interactive Web Elements | [Preview →](https://saqibbedar.github.io/web-projects-collection/interactive-web-elements/index.html) |

## Getting Started

1. Clone this repository:

    ```bash

    git clone https://github.com/saqibbedar/WebDev-Projects

    ```

2. Navigate to the specific project folder you're interested in.

3. Explore and develop each project independently. Feel free to make any changes; these projects are free to use under the [MIT license](https://github.com/saqibbedar/WebDev-Projects?tab=MIT-1-ov-file).

## Note

These all projects are for practice, you can learn, how logic for particular task is implemented, so, every project is not built with the perfection but it is a practice code which can help you in learning web at your initial phase.

## Contributions 😍

Contributions and improvements are welcome! You can request your practice code, to be added into this repo and, it will be also helpful for the individuals who are just starting the web, hence, if you are working on any project or have a new project idea or want to enhance an existing one, feel free to open an issue or submit a pull request.

## License

This repository is licensed under the `MIT License` - see the [LICENSE.md](https://github.com/saqibbedar/WebDev-Projects?tab=MIT-1-ov-file) file for details.

Happy coding! 🚀