Students build their first complete webpage
Enhance your 'About Me' page with more content, add at least 10 different HTML elements, and write comments explaining each section.
Recognition:
Outstanding HTML structure and excellent use of semantic elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Me - John Doe</title>
</head>
<body>
<!-- Header Section -->
<header>
<h1>Welcome to My Personal Page</h1>
<nav>
<a href="#about">About</a>
<a href="#skills">Skills</a>
<a href="#contact">Contact</a>
</nav>
</header>
<!-- Main Content -->
<main>
<section id="about">
<h2>About Me</h2>
<p>Hello! I'm <strong>John Doe</strong>, a passionate web developer learning to build amazing websites.</p>
<p>I enjoy <em>coding</em>, reading, and exploring new technologies.</p>
</section>
<section id="skills">
<h2>My Skills</h2>
<ul>
<li>HTML5</li>
<li>Problem Solving</li>
<li>Communication</li>
</ul>
</section>
</main>
<!-- Footer -->
<footer>
<p>© 2024 John Doe. All rights reserved.</p>
</footer>
</body>
</html>A clean, semantic HTML page with proper structure, headings hierarchy, and essential elements like header, main, sections, and footer.
Try different device sizes using the buttons above. Click maximize for full-screen preview.
Pro tip: Copy the code above and practice building it yourself! Check out the GitHub repo for the complete project files and additional resources.