Introduction to Web Design with HTML, CSS, and Photoshop Tasks: 1. HTML & CSS: - Create an HTML file for your personal portfolio webpage. - Structure your webpage with the following sectio

Introduction to Web Design with HTML, CSS, and Photoshop

Tasks:

1. HTML & CSS:   - Create an HTML file for your personal portfolio webpage.   - Structure your webpage with the following sections:     - Header     - About section (with a brief bio)     - Portfolio Gallery (List your 3 Favorite Books table):

            The table must contain the following columns: Book Title, Author, and Publication Year

            Example Table Structure:

Book Title                                             Author                         Publication Year                                                                                                     Book 1                                                  Author 1                       YYYY                                                                                                                       Book 2                                                 Author 2                        YYYY                                                                                                                       Book 3                                                 Author 3                        YYYY

     - Contact form     - Footer   - Apply CSS styling to:     - Format text     - Adjust margins     - Set background colors   - Utilize the box model to control padding and margins effectively.   - Experiment with CSS properties like `display` and `position` to arrange elements within the layout.

2. Photoshop Task:   - Select an image that relates to your interests or portfolio theme.   - Use basic Photoshop tools to:     - Crop the image     - Resize it to an appropriate dimension     - Enhance its visual quality (e.g., adjusting brightness/contrast)   - Save the optimized image in a suitable format (JPEG or PNG).   - Create a visual comparison by showcasing the "before" and "after" images side by side.

3. Integration:   - Integrate the optimized (Photoshopped) image into your portfolio webpage.   - Use CSS to align the image within the portfolio gallery section.   - Display the "before" and "after" images side by side on your webpage.

4. Forms:   - Design a user-friendly contact form in HTML, including the following interactive elements:     - Name (text input)     - Email (text input)     - Message (textarea)     - Dropdown list (with options such as inquiry, collaboration, feedback)     - Checkbox (for receiving updates)     - Radio buttons (for contact method: email, phone)     - Submit button   - Apply CSS to style the form elements, ensuring an appealing layout.   - Implement basic input validation using HTML form validation attributes