What you will build
A one-page personal profile that uses everything from this course. You can later style it with CSS and publish it for free on GitHub Pages or Netlify.
Plan the structure
- Header with your name and navigation links
- About section with a photo and a short paragraph
- Skills list
- Education table
- Contact form
- Footer
Starter code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Priya Sharma - Profile</title>
<meta name="description" content="Profile of Priya Sharma, a BCA student.">
</head>
<body>
<header>
<h1>Priya Sharma</h1>
<nav>
<a href="#about">About</a>
<a href="#education">Education</a>
<a href="#contact">Contact</a>
</nav>
</header>
<main>
<section id="about">
<h2>About Me</h2>
<p>I am a BCA student who enjoys building websites.</p>
<h3>Skills</h3>
<ul><li>HTML</li><li>CSS</li><li>Basic JavaScript</li></ul>
</section>
<section id="education">
<h2>Education</h2>
<table border="1">
<tr><th>Course</th><th>Year</th></tr>
<tr><td>BCA</td><td>2023 - 2026</td></tr>
</table>
</section>
<section id="contact">
<h2>Contact</h2>
<form>
<label for="n">Name</label> <input id="n" type="text">
<label for="m">Message</label> <textarea id="m"></textarea>
<button type="submit">Send</button>
</form>
</section>
</main>
<footer><p>Made with HTML</p></footer>
</body>
</html>Checklist before you finish
- One
<h1>and headings in order - Every image has alt text
- Every input has a label
- The page works when you resize the browser to a phone width
Next steps
Continue to the CSS course to make this page beautiful.