Lesson 3
•
25 min
Free
Build Your First Webpage
Hands-on: Create a simple HTML page.
Build Your First Webpage 🚀
Let's put everything together and build a real webpage—a personal profile page!
The Complete Code
profile.html
<!DOCTYPE html>
<html>
<head>
<title>About Me</title>
<style>
body { font-family: Arial; max-width: 600px; margin: 50px auto; }
h1 { color: #4F46E5; }
.skills { background: #F3F4F6; padding: 20px; border-radius: 10px; }
</style>
</head>
<body>
<h1>Hi, I'm [Your Name]! 👋</h1>
<p>I'm learning web development and excited to build cool things!</p>
<h2>My Skills</h2>
<div class="skills">
<ul>
<li>HTML ✓</li>
<li>CSS (learning)</li>
<li>JavaScript (coming soon)</li>
</ul>
</div>
<h2>Contact Me</h2>
<p>Email: <a href="mailto:you@email.com">you@email.com</a></p>
</body>
</html>What We Used
✅ HTML Elements
Headings, paragraphs, lists, links
🎨 Basic CSS
Fonts, colors, spacing, borders
🎉 Congratulations!
You've built your first webpage! Save this file and open it in your browser to see the result.
🔓 Keep Learning
Upgrade to access 17 more lessons:
- • CSS Flexbox & Grid layouts
- • Responsive design for mobile
- • JavaScript fundamentals
- • DOM manipulation
- • Building interactive features