Your About Me page should not reveal anything personal about yourself that you would not want all of the internet to know. Only share what you feel comfortable sharing. I am not responsible for any personally identifying information (PII) you choose to include on this page.

This page represents the first assignment in your multi-page website project. Your goal is to demonstrate that you can build a properly structured, styled, and mobile-responsive webpage.

Required Features

• Images: Include at least two (2) images on this page. Each image must include meaningful alt text.
  
• Semantic HTML5: Your page must use <header>, <nav>, <main>, <section>, <article>, and <footer>.
  
• Navigation: Include a proper <nav> menu that is consistent across pages and is sticky while scrolling.
  
• Rollover styling: Use CSS pseudo-classes such as :hover and :focus to style navigation links when the user interacts with them.
  
• Mobile viewport: Include the viewport meta tag on this page and every page: <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
• Mobile responsiveness: Use exactly one CSS media query to adjust the desktop layout so it fits properly on mobile (no horizontal scrolling, readable text, images resize correctly, nav remains usable).
  
• Footer contact links (every page): Include an email link using mailto: and a phone link using tel:.
  

Your page should include basic CSS decoration (spacing, typography, borders, background colors, etc.) to make the layout clean and readable.

This page should describe where you expect to see yourself in five years. Keep in mind that you will have been graduated from SOWELA for quite some time by then. Consider the type of job or career you want to have and the accomplishments you hope to complete within the next five years.

Only include information you are comfortable sharing publicly. I am not responsible for any personally identifying information (PII) you choose to include on this page.

• Write at least 300 words describing where you expect to be in life in five years (job, education, family, goals, location, etc.).
• Include at least two (2) images on this page. Each image must include meaningful alt text.
• Include at least one HTML list on this page using <ul>, <ol>, or <dl>.
• Include at least one external link that leaves your website.
• Your page must use proper HTML5 semantic elements, including <header>, <nav>, <main>, <section>, <article>, and <footer>.
• Navigation must be placed inside a <nav> element and must be sticky while scrolling. Navigation links must include rollover styling using CSS.
• Include the mobile viewport meta tag on this page and all other pages: <meta name="viewport" content="width=device-width, initial-scale=1.0">.
• Use exactly one CSS media query to adjust the desktop layout so the page fits properly on mobile devices.
• Your footer must include an email link using mailto: and a phone link using tel:. These contact links must appear on every page of the website.

This page should describe where you expect to see yourself in ten years. Consider the global economic and political climate, and how changes in technology, society, or industry may impact your career and personal life. Will you still have the same job you had five years earlier? What major accomplishments do you hope to complete within the next ten years?

Only include information you are comfortable sharing publicly. I am not responsible for any personally identifying information (PII) you choose to include on this page.

• Write at least 300 words describing where you expect to be in life in ten years (career, education, family, goals, location, lifestyle, etc.).
• Include at least two (2) images on this page. Each image must include meaningful alt text.
• Include at least one HTML description list on this page using <dl>.
• Include at least one external link that leaves your website.
• Your page must use proper HTML5 semantic elements, including <header>, <nav>, <main>, <section>, <article>, and <footer>.
• Navigation must be placed inside a <nav> element and must be sticky while scrolling. Navigation links must include rollover styling using CSS.
• Include the mobile viewport meta tag on this page and all other pages: <meta name="viewport" content="width=device-width, initial-scale=1.0">.
• Use exactly one CSS media query to adjust the desktop layout so the page fits properly on mobile devices.
• Your footer must include an email link using mailto: and a phone link using tel:. These contact links must appear on every page of the website.

The contact page is, for most small websites, the most important page on the site. If the purpose of building the website is to generate interest in a product or in yourself, you will not know if it is successful unless visitors can easily contact you.

Only include information you are comfortable sharing publicly. I am not responsible for any personally identifying information (PII) you choose to include on this page.

• Create a working web form that uses HTML5 input validation (examples: type="email", type="tel", required, minlength, maxlength, pattern) instead of JavaScript validation.
• The form must send data using POST to a PHP processing page (example: contact_process.php).
• Your PHP processing page must receive the submitted form values, perform basic sanitization (so user input is stored safely), and then store the submission on the server. You may store submissions in either a simple text file (CSV) or a database (optional).
• You must create a page on your server (example: thankyou.php) that reads in and processes the form data, displays it in a clean format (table or list), writes it to a file (newfile.txt), and provides a link to the file so that I can verify that your form processing and file writing worked.
• Your page must use proper HTML5 semantic elements, including <header>, <nav>, <main>, <section>, <article>, and <footer>.
• Navigation must be placed inside a <nav> element and must be sticky while scrolling. Navigation links must include rollover styling using CSS.
• Include the mobile viewport meta tag on this page and all other pages: <meta name="viewport" content="width=device-width, initial-scale=1.0">.
• Use exactly one CSS media query to adjust the desktop layout so the page fits properly on mobile devices.
• Your footer must include an email link using mailto: and a phone link using tel:. These contact links must appear on every page of the website.

The home page of your website is likely the first page you started on when beginning this project. However, it is the last page that will be scored/graded because it needs to contain elements from the prior pages you have created. Additionally, the tools you discover in HTML, CSS, and JavaScript on the other pages can be used more gracefully after you have had time to practice with them.

Your home page should act as an overview of your website. It must include snippets of information from each page and provide clear navigation and working links to all pages on your site.

• Include snippets/preview sections from each of the main pages of your website (About Me, 5 Years, 10 Years, Contact). Each snippet must include a clear link that takes the visitor to the full page.
• Include at least two (2) images on this page. Each image must include meaningful alt text.
• Your page must use proper HTML5 semantic elements, including <header>, <nav>, <main>, <section>, <article>, and <footer>.
• Navigation must be placed inside a <nav> element and must be sticky while scrolling. Navigation links must include rollover styling using CSS.
• Include the mobile viewport meta tag on this page and all other pages: <meta name="viewport" content="width=device-width, initial-scale=1.0">.
• Use exactly one CSS media query to adjust the desktop layout so the page fits properly on mobile devices.
• Your footer must include contact information with an email link using mailto: and a phone link using tel:. These contact links must appear on every page of the website.
• Add a favicon so the browser tab shows your website icon.
• Wow me with your home page. If you go above and beyond with design, organization, or extra features, you may earn bonus points.

This is the Contraband Coding website where I have our hosting space. It is located on DreamHost and is our web server. This link will bring you to the homepage where ALL of your website domains can be accessed easily to check the progress of other students.