🌐 Web Development Basic Projects

A curated collection of introductory projects for mastering core web technologies.
Build a solid foundation in web development with hands-on, practical examples.

📚 Overview

This repository contains 10 fundamental web development lab programs. Each program covers specific concepts in HTML, CSS, JavaScript, PHP, and jQuery, providing a hands-on approach to learning modern web development. All projects are self-contained and ideal for beginners.

🗂️ Folder Structure

Web_Development_Basic_Projects/ │ ├── Program 1 My First Webpage/ │ └── My First Webpage.html │ ├── Program 2 Table/ │ └── Table.html │ ├── Program 3 CSS Selectors/ │ ├── CSS Selectors.html │ └── style.css │ ├── Program 4 Registration Form/ │ └── Registration.html │ ├── Program 5 NewsPaper/ │ └── NewsPaper.html │ ├── Program 6 Calculator/ │ └── Calculator.html │ ├── Program 7 CSV Converter and Hash Generator/ │ └── CSV Converter and Hash Generator.html │ ├── Program 8 Visitor Counter/ │ ├── Visitor Counter.php │ └── count.txt │ ├── Program 8 Student Record Sorter/ │ └── Student Record Sorter.php │ ├── Program 9 Jquery Append, Animate, and Color Change/ │ └── jQuery Append, Animate, and Color Change Demo.html │ └── Program 10 Ajax Demo Program/ ├── Ajax Demo Program.html ├── sample.json └── sample.txt

📝 Program Details

| # | Directory Name | Description & Key Files | |-----|--------------------------------------------------|-----------------------------------------------------------------------------------------| | 1 | Program 1 My First Webpage | Basic HTML tags for structuring content.
File: My First Webpage.html | | 2 | Program 2 Table | Class timetable using HTML tables and basic CSS.
File: Table.html | | 3 | Program 3 CSS Selectors | Demonstrates CSS selectors (element, class, ID, etc.).
Files: CSS Selectors.html, style.css | | 4 | Program 4 Registration Form | User registration form with various HTML input elements.
File: Registration.html | | 5 | Program 5 NewsPaper | Semantic HTML5 layout for a modern newspaper.
File: NewsPaper.html | | 6 | Program 6 Calculator | Simple calculator using HTML, CSS, and JavaScript.
File: Calculator.html | | 7 | Program 7 CSV Converter and Hash Generator | Data conversion (JSON/CSV) and string hashing in JavaScript.
File: CSV Converter and Hash Generator.html | | 8 | Program 8 Visitor Counter | PHP visitor counter script.
Files: Visitor Counter.php, count.txt | | 8 | Program 8 Student Record Sorter | PHP script to fetch and sort student records.
File: Student Record Sorter.php| | 9 | Program 9 Jquery Append, Animate, and Color Change | jQuery DOM manipulation and animation demo.
File: jQuery Append, Animate, and Color Change Demo.html | | 10 | Program 10 Ajax Demo Program | AJAX (with/without jQuery) to load data asynchronously.
Files: Ajax Demo Program.html, sample.json, sample.txt |

🚀 Getting Started

Prerequisites

• Modern web browser (e.g., Chrome, Firefox)
• Local server environment (e.g., XAMPP, WAMP) for PHP programs

Running the Projects

Client-Side Projects (HTML, CSS, JavaScript)

For Programs 1–7, 9, and 10: - Open the .html file in your browser.

Server-Side Projects (PHP)

For Program 8: 1. Install and configure a local server (e.g., XAMPP). 2. Place the project folders inside the server's root directory (e.g., C:/xampp/htdocs/). 3. Start Apache and MySQL from the XAMPP control panel. 4. Access in your browser: - http://localhost/Program%208%20Visitor%20Counter/Visitor%20Counter.php - http://localhost/Program%208%20Student%20Record%20Sorter/Student%20Record%20Sorter.php

💡 Usage

• Explore each folder to learn different web development concepts.
• Modify the code to experiment and expand functionality.
• Use these projects as references or starting points for your own assignments.

🤝 Contributing

Contributions and feedback are welcome!
Feel free to fork the repository, make changes, and submit pull requests.

👨‍💻 Author

B. Chaitanya
GitHub • LinkedIn

📄 License

This project is provided for educational purposes only.

You are free to use, modify, and share the code.
No warranty is provided.