Build a Personal Profile Page with HTML5

Assignment: Build a Personal Profile Page

Objective: Create an HTML document that serves as a personal profile page. This page will include sections for personal information, a biography, educational background, skills, and a contact form. Each section should utilize the HTML elements you’ve been taught.

Detailed Instructions:

Header with Navigation:

Use <div> tags to create a container for the header.
Inside the header, use <h1> for your name. eg: Jayanth
Below your name, use <ul> to create a navigation menu with <li> items. Each item should contain an <a> tag - that would hypothetically link to different sections of your profile (e.g., "#biography", "#education", "#skills", "#contact").

Biography Section:

Start this section with an <h2> tag titled “Biography”.
Include a paragraph <p> describing yourself. Within this paragraph, use <strong>, <b>, and <i> to emphasize key words or phrases. Use <br> to create line breaks as needed.

Educational Background:

Title this section with an <h2> tag titled “Education”.
Use <ol> or <ul> to list the schools you’ve attended or courses you’ve completed. Use <li> for each item.

Skills Section:

Use an <h2> tag for the section title as “Skills”. List your skills using <ul>. Within each <li>, you might want to emphasize certain skills using <strong> or <b>, and describe your proficiency level in a <span>. Gallery Section:

Title this section with `<h2>` as Image Gallery.

Use <div> tags to create a container for your images and use h2 tag for section title as Image gallery.
Inside the container, insert several <img> tags to display images that are meaningful to you (e.g., hobbies, achievements). Use alt attributes to describe each image.

Contact Form:

Use <h2> for the section title as Contact Form.

The form should include the following elements:

Name –> Input type text
Email –> Input type email
Message –> Input type text

Create a “Send me a message” button using the <button> tag. Since form handling is not covered, the button does not need to perform any action.

Use a <div> to create a footer at the bottom of the page. Inside the footer, include a <p> tag with copyright information. Use the <span> tag to emphasize the year.