A curated collection of beginner-to-intermediate level web development projects crafted using HTML, CSS, and JavaScript. These projects demonstrate practical front-end development concepts such as DOM manipulation, API integration, responsive UI design, and client-side storage.
Whether you're a beginner exploring how web technologies work together or a recruiter reviewing my portfolio, this repository reflects hands-on practice in solving real-world problems with code.
A clean and responsive task manager built using JavaScript.
Key Features:
- Add, edit, and delete tasks
- Mark tasks as complete/incomplete
- Stores tasks in
localStorage - Fully responsive design for mobile & desktop
Skills Demonstrated: DOM Manipulation, Event Handling, Local Storage, Responsive Layouts
A weather forecast web app using a public API to display real-time weather conditions.
Key Features:
- Search weather by city name
- Displays temperature, weather conditions, location
- Fetches live data using fetch API
- Simple and user-friendly UI
Skills Demonstrated: API Integration, Error Handling, JSON Parsing, Asynchronous JavaScript
| Language/Tool | Purpose |
|---|---|
| HTML5 | Page structure |
| CSS3 | Styling & responsive layout |
| JavaScript | Functionality & interactivity |
| Fetch API | Fetch real-time data |
| Local Storage | Persistent state management |
You can run any of these projects on your local machine:
- Clone the repository
git clone https://github.com/MohitSoni2021/Web-projects.git
cd Web-projects- Navigate to any project folder, then open
index.htmlin your browser.
- Understand how HTML, CSS, and JS interact to build real applications
- Learn to handle user events, API calls, and persistent data
- Gain confidence building projects from scratch
- Prepare a base to scale toward frameworks like React or Next.js
- Add screenshots of UI (e.g., mobile and desktop views of To-Do App & Weather App)
- Consider adding live demo links via GitHub Pages or Vercel
Web-projects/
│
├── todo-list/ # To-Do List App
│ ├── index.html
│ ├── style.css
│ └── script.js
│
├── weather-app/ # Weather App
│ ├── index.html
│ ├── style.css
│ └── script.js
│
└── README.md
This is a personal learning repository, but suggestions and improvements are always welcome!
Feel free to fork and contribute via pull requests.
This project is open-source under the MIT License.
💡 These projects reflect my journey of mastering the building blocks of the web. Each line of code is a step forward in sharpening my frontend skills and creating real user experiences.