Web Development Tutorial Projects

Explore my learning path in web development with HTML, CSS, and JS. This repository houses practice projects crafted during tutorials, reflecting my progress. Join me on this coding adventure! 💻✨ #WebDev #CodingJourney

Welcome to the Web Development Practice Projects repository! This collection features hands-on projects created during my journey to mastering web development, guided by tutorials in HTML, CSS, and JavaScript.

Project List

1. Weather App

   • This code is a concise Weather App webpage, using HTML, CSS, and JavaScript. Users input a city name, and the app fetches real-time weather data, displaying temperature, city, humidity, and wind speed with corresponding weather icons.

2. To-Do List

   • This is a simple web-based to-do list application built with HTML, CSS, and JavaScript. It allows users to add, mark as completed, delete, and clear tasks. The tasks are saved in the browser's local storage, so they persist across page reloads.

3. Quiz Application

   • This is a simple web-based quiz application built with HTML, CSS, and JavaScript. The application presents a series of questions to the user, tracks their score, and displays the final score at the end of the quiz.

4. Password Generator

   • This is a simple JavaScript-based password generator that creates a secure, random password containing uppercase letters, lowercase letters, numbers, and symbols.

5. Notes App

   • This is a simple web-based note-taking application that allows users to create, edit, and delete notes. The notes are stored in the browser's localStorage, enabling them to persist even after the page is reloaded.

6. Age Calculator

   • This is a simple web-based application that calculates the age of a user based on their birth date. The user inputs their birth date, and the application displays their age in years, months, and days.

7. Quote Generator

   • This web application displays a random quote from various categories and allows users to tweet the quote. It features a clean and centered design with interactive buttons to fetch new quotes and share them on Twitter.

8. QR Code Generator

   • A simple web application that generates QR codes based on user input. Users can enter text or a URL to create a corresponding QR code, which is then displayed on the page.

9. Toast Notification System

   • This project implements a toast notification or also caled as Snack Bar system using HTML, CSS, and JavaScript. It provides visual feedback for different types of messages (success, error, invalid) through animated toast messages that appear in the bottom-right corner of the screen.

10. Music Player

    • A simple music player built with HTML, CSS, and JavaScript. It allows users to play and pause a song, and control the playback position using a progress bar.

...

Credits

A big thank you to the following sources and tutorials that have been instrumental in my learning journey:

• W3 Schools-HTML: Basics of HTML.
• W3 Schools-CSS: Basics of CSS.
• W3 Schools-Javascript: Basics of Javascript.
• This project was learned and coded with the help of this YouTube playlist.
• Some parts of the projects like documentation and commenting was built with the help of ChatGPT.
• ...

Contribution Guidelines

If you'd like to contribute or have suggestions, feel free to open an issue or submit a pull request. Feel free to explore these tutorials to deepen your understanding and enhance your skills!

Happy coding! 🚀