Update README.md

Author: TheComputationalCore

README.md

@@ -1,80 +1,203 @@
-# HTML & CSS Mini-Task (Task 6)
+# 🌐 HTML & CSS Mini-Tasks — Comprehensive Practice Pack
+
+![Build](https://img.shields.io/badge/Build-Static_HTML/CSS-blue)
+![Status](https://img.shields.io/badge/Status-Completed-green)
+![License](https://img.shields.io/badge/License-MIT-yellow)
+
+A complete collection of **11 HTML & CSS tasks** designed to strengthen fundamentals in **HTML structure, form creation, debugging, styling, lists, tables, and semantic markup**.  
+Screenshots and clean project structure are included for clarity.
+
+---
+
+## 📂 Project Structure
+
+```
+html-css-mini-tasks/
+│
+├── .github/
+│   └── workflows/
+│       └── html-check.yml
+│
+├── screenshots/
+│   ├── 1.png
+│   ├── 2.png
+│   ├── 3.png
+│   ├── 4.png
+│   ├── 5.a.png
+│   ├── 5.b.png
+│   ├── 6.png
+│   ├── 7.png
+│   ├── 8.png
+│   ├── 9.png
+│   ├── 10.png
+│   ├── 11.a.png
+│   └── 11.b.png
+│
+├── Question1.html
+├── Question2.html
+├── Question3.html
+├── styleQ3.css
+├── Question4.html
+├── Question5.html
+├── Question6.html
+├── Question7.html
+├── styleQ7.css
+├── Question8.html
+├── Question9.html
+├── Question10.html
+├── Question11.html
+│
+├── LICENSE
+└── README.md
+```
+
+---
+
+## 📝 Task Overview
+
+### **Q1 – Fix Bugs in HTML Snippet**
+Basic bug‑fixing involving:
+- Improper nesting  
+- Unclosed tags  
+- Incorrect attribute placements  
+
+---
+
+### **Q2 – Fix Bugs in Another HTML Snippet**
+Similar debugging with structure correction and semantic fixes.
+
+---
+
+### **Q3 – Contact Us Form**
+Creates a complete form containing:
+- Name, Email, Subject, Message fields  
+- Required validation  
+- Styled using **styleQ3.css**
+
+📸 *Screenshot:*  
+![Q3](screenshots/3.png)
 
-This repository contains HTML and CSS files for a mini-task designed to demonstrate the usage of basic HTML tags, form creation, table design, and element manipulation. The project includes solutions to 11 tasks (Q1 to Q11) focusing on HTML structure, debugging, and styling without CSS where specified.
+---
 
-## Project Structure
+### **Q4 – Programming Languages & Databases List**
+Nested lists covering:
+- JS, Python, Java
+- Frameworks (e.g., React, Django)
+- Databases (MySQL, MongoDB)
 
-- **Question1.html**: Fixes bugs in the provided HTML snippet (Q1).
-- **Question2.html**: Fixes bugs in a second provided HTML snippet (Q2).
-- **Question3.html**: Designs a "Contact Us" form with all fields required (Q3).
-- **styleQ3.css**: Styles for the "Contact Us" form in Q3.
-- **Question4.html**: Displays a nested list of programming languages, frameworks, and databases (Q4).
-- **Question5.html**: Creates a link to open `https://google.com` in a new tab (Q5).
-- **Question6.html**: Adds radio buttons for employee type (Salaried and Own Business) to a form (Q6).
-- **Question7.html**: Designs a form based on the provided image (Q7).
-- **styleQ7.css**: Styles for the form in Q7.
-- **Question8.html**: Designs a table based on a provided image (Q8).
-- **Question9.html**: Shows default values for all form elements using HTML input tags (Q9).
-- **Question10.html**: Highlights the text "HTML & CSS is awesome" without using CSS (Q10).
-- **Question11.html**: Creates a form with all types of input elements (Q11).
-- **1.png, 2.png, 3.png, 4.png, 5.a.png, 5.b.png, 6.png, 7.png, 8.png, 9.png, 10.png, 11.a.png, 11.b.png**: Screenshots of the code implementations for each task.
+---
 
-## Tasks Overview
+### **Q5 – Open Google in New Tab**
+Simple anchor-tag behavior using:
+
+```html
+<a href="https://google.com" target="_blank">Open Google</a>
+```
 
-### Q1: Fix Bugs in HTML Snippet 1
-- Fixes structural errors in a given HTML snippet to ensure proper nesting and tag closure.
+---
 
-### Q2: Fix Bugs in HTML Snippet 2
-- Fixes structural errors in a second given HTML snippet to ensure proper nesting and tag closure.
+### **Q6 – Employee Type Radio Buttons**
+Two grouped radio buttons:
+- Salaried  
+- Own Business  
 
-### Q3: Contact Us Form
-- Designs a "Contact Us" form with all fields marked as required, styled using `styleQ3.css`.
+---
 
-### Q4: Display Programming Languages and Databases
-- Uses HTML list elements to display a nested structure of:
-  - Programming Languages (JavaScript, Python, Java) with their frameworks.
-  - Databases (MySQL, MongoDB, Cassandra).
+### **Q7 – Form UI Based on a Reference Image**
+Recreates a complex form layout with custom styling in **styleQ7.css**.
 
-### Q5: Link to Open Google in New Tab
-- Creates an HTML element (anchor tag) that opens `https://google.com` in a new tab.
+📸 *Screenshot:*  
+![Q7](screenshots/7.png)
 
-### Q6: Radio Buttons for Employee Type
-- Adds two radio buttons to a form for employee type (Salaried and Own Business), grouped together.
+---
 
-### Q7: Form Design Based on Image
-- Designs a form based on the provided image (http://evc-cit.info/cit040/formguide/card_0.png), styled using `styleQ7.css`.
+### **Q8 – Table Based on Reference Image**
+Uses table tags `<table>`, `<tr>`, `<td>`, `<th>` to recreate a given design.
 
-### Q8: Table Design Based on Image
-- Uses the `<table>` tag to design a table based on a provided image.
+📸 *Screenshot:*  
+![Q8](screenshots/8.png)
 
-### Q9: Default Values for Form Elements
-- Creates HTML input tags with default values for various form elements.
+---
 
-### Q10: Highlight Text Without CSS
-- Highlights the text "HTML & CSS is awesome" using HTML elements (e.g., `<mark>`) without CSS.
+### **Q9 – Default Form Values**
+Demonstrates placeholder/default values for all HTML input types.
 
-### Q11: Form with All Input Types
-- Creates an HTML page containing all types of input elements (e.g., text, password, radio, checkbox, etc.).
+---
 
-## How to View
+### **Q10 – Highlight Text Without CSS**
+Uses `<mark>` to highlight:  
+**HTML & CSS is awesome**
 
-1. **Clone the Repository**:
-   ```bash
-   git clone https://github.com/thesoulseizure/task-6.git
-   ```
-2. **Navigate to the Project Directory**:
-   ```bash
-   cd task-6
-   ```
-3. **Open the HTML Files**:
-   - Open each `QuestionX.html` file in a web browser to view the solution.
-   - For Q3 and Q7, ensure the corresponding CSS files (`styleQ3.css` and `styleQ7.css`) are in the same directory.
+---
 
-## Requirements
+### **Q11 – All Input Types Form**
+Includes:
+- text, password, radio, checkbox  
+- color, date, time, file  
+- range, number, search  
+- textarea, dropdowns
 
-- A web browser to view the HTML files.
-- No additional setup is required since these are static HTML and CSS files.
+📸 *Screenshot:*  
+![Q11](screenshots/11.a.png)
 
-## Screenshots
+---
+
+## 🖼 Screenshot Gallery (Grid View)
+
+### **Q1 & Q2**
+| Q1 | Q2 |
+|----|----|
+| ![](screenshots/1.png) | ![](screenshots/2.png) |
+
+### **Q3 – Q6**
+| Q3 | Q4 | Q5a | Q5b |
+|----|----|------|------|
+| ![](screenshots/3.png) | ![](screenshots/4.png) | ![](screenshots/5.a.png) | ![](screenshots/5.b.png) |
+
+| Q6 |
+|----|
+| ![](screenshots/6.png) |
+
+### **Q7 – Q11**
+| Q7 | Q8 | Q9 | Q10 |
+|----|----|-----|-----|
+| ![](screenshots/7.png) | ![](screenshots/8.png) | ![](screenshots/9.png) | ![](screenshots/10.png) |
+
+| Q11a | Q11b |
+|-------|--------|
+| ![](screenshots/11.a.png) | ![](screenshots/11.b.png) |
+
+---
+
+## ▶️ How to View the Tasks
+
+### 1️⃣ Clone the Repository
+```bash
+git clone https://github.com/TheComputationalCore/html-css-mini-tasks.git
+```
+
+### 2️⃣ Open in Browser
+Simply open any `QuestionX.html` file in a browser.
+
+### 3️⃣ For Q3 & Q7
+Ensure the CSS files `styleQ3.css` and `styleQ7.css` are in the same folder.
+
+---
+
+## 🛠 Tech Stack Used
+- **HTML5**
+- **CSS3**
+- **Semantic Elements**
+- **Form Validation**
+- **Table & List Structures**
+
+---
+
+## 🏷 Topics
+`html` • `css` • `forms` • `tables` • `lists` • `semantics` • `web-basics`
+
+---
+
+## 📜 License
+This project is licensed under the **MIT License**.
 
-The repository includes screenshots (1.png to 11.b.png) that show the code implementations for each task. Refer to these images to view the solutions visually.