|
1 | | -# Web-Tech-Lab-Task-1-registrationForm |
| 1 | +# Web Tech Lab Task 1 |
| 2 | + |
| 3 | +This repository contains the solution for the first Web Technologies lab task. The goal is to practice core HTML tags by recreating the layout of a donation/registration form. |
| 4 | + |
| 5 | +## Project Structure |
| 6 | + |
| 7 | +- `registration.html` – main submission replicating the multi-section donation form with donor, honorarium, and additional information panels. |
| 8 | +- `LAB TASK 1.pdf` – original lab brief with the reference layout. |
| 9 | + |
| 10 | +## Getting Started |
| 11 | + |
| 12 | +1. Ensure you have a local web server set up (for example, XAMPP as used during the lab). |
| 13 | +2. Place the project folder inside your server root (`htdocs` for XAMPP). |
| 14 | +3. Open the form in a browser: |
| 15 | + - `http://localhost/PATH/registration.html` |
| 16 | + |
| 17 | +You can open the file directly in a browser as well, but hosting it locally provides a closer match to how course submissions are typically reviewed. |
| 18 | + |
| 19 | +## Features Implemented |
| 20 | + |
| 21 | +- Semantic HTML structure with separate sections for donor information, memorial details, and additional preferences. |
| 22 | +- Input controls covering text fields, select elements, radio buttons, and checkboxes. |
| 23 | +- Layout styling with CSS to mirror the reference screenshot, including inline option groups and responsive spacing. |
| 24 | +- Required field indicators aligned with the brief. |
| 25 | + |
| 26 | +## Customization Tips |
| 27 | + |
| 28 | +- Update select options or placeholder text to match your institution or organization. |
| 29 | +- Adjust styling in the `<style>` block within `registration.html` to fit alternate branding or color themes. |
| 30 | +- Split the CSS into an external stylesheet if you plan to expand the project beyond the basic exercise. |
| 31 | + |
| 32 | +## Validation and Testing |
| 33 | + |
| 34 | +- Open `registration.html` in modern browsers (Chrome, Firefox, Edge) to confirm layout consistency. |
| 35 | +- Use the browser developer tools or the [W3C Markup Validation Service](https://validator.w3.org/) to verify HTML compliance. |
| 36 | +- Toggle each control to ensure alignment and spacing remain intact when checked or filled. |
| 37 | + |
| 38 | +## License |
| 39 | + |
| 40 | +This lab submission is provided for educational purposes. Adapt or extend it to fit your coursework requirements. |
0 commit comments