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