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
