NPA Web Design_{Website Design and Development Practice Assignment 1}

• Create a new folder on your computer called Portfolio.
• Inside this folder, create two files: index.html and styles.css.
• Create a subfolder named images where you will store images for the project.

Begin by setting up a basic HTML structure. Your page should include the following sections:

• A header with a title and navigation links.
• An "About Me" section with a short description and an image of yourself.
• A "Projects" section with links to at least three projects.
• A "Contact" section containing a form that collects the user's name, email, and a message.

Apply CSS to style your webpage. Ensure the following:

• The header has a distinct background colour, and the text is easy to read.
• The navigation links are clearly visible and have some spacing between them.
• The image in the "About Me" section is styled appropriately (e.g., rounded corners).
• The form fields are neatly aligned and have adequate spacing and padding.

• Add content with your actual information.
• Find or take a photo of yourself and save it in the images folder with the name my-photo.jpg.
• Add real links to your projects, or use placeholders if you don’t have actual projects yet (although you will have a lot of example webpages you'll have worked on through the duration of this course).

• Open the index.html file in a web browser to preview your page.
• Verify that all links work, images display correctly, and the form is functioning as expected.

• Save all your work and ensure your files are correctly named.
• Compress the entire Portfolio folder into a .zip file.
• Submit the .zip file as your completed task.

• HTML Structure: Proper use of HTML tags, structure, and hierarchy.
• CSS Styling: Effective use of CSS to create a visually appealing layout.
• Links and Images: Proper implementation of images and functional links.
• Form: Correctly structured form with validation attributes (e.g., required).
• Overall Presentation: Clean, organized, and professional-looking webpage.