About Me
I'm a passionate web developer with 5 years of experience. I love building clean, responsive websites and teaching others.
Projects
Portfolio
A personal portfolio site.
Weather App
Real‑time weather data.
Quest 1 • Lesson 10
🚀 Personal Bio Page (Capstone Project)
Congratulations! You've reached the final lesson of Quest 1. Now you'll build a complete Personal Bio Page – a real‑world project that combines everything you've learned.
"This is your chance to showcase your skills. A personal bio page is often the first thing employers and clients see."
📋 Project Requirements
- Semantic HTML – use
<header>,<nav>,<main>,<section>,<article>,<aside>,<footer>. - Navigation – a simple nav with links (Home, About, Projects, Contact).
- About section – a heading, paragraph, and an image (use a placeholder like
https://placehold.co/150). ;
- Skills list – use an unordered or ordered list to show your skills.
- Projects section – display 2–3 project cards using flexbox or grid.
- Contact form – name, email, message, and submit button.
- CSS styling – custom colours, padding, margin, border, box‑shadow.
- Responsive – use a media query for mobile.
🔍 Live Preview (Example)
👤 MAK
This is a fully functional example – your page should be even more personalised!
bio.html
<body> <header> <h1>Your Name</h1> <nav> <a href="#">Home</a> <a href="#">About</a> <a href="#">Projects</a> <a href="#">Contact</a> </nav> </header> <main> <section> <h2>About Me</h2> <p>...</p> <img src="profile.jpg" alt="Profile photo"> </section> <section> <h2>Skills</h2> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </section> <section> <h2>Projects</h2> <div style="display:flex; gap:1rem; flex-wrap:wrap;"> <div style="background:#1e293b; padding:1rem; border-radius:0.5rem;"> <h3>Project 1</h3> <p>Description</p> </div> <!-- more cards --> </div> </section> <section> <h2>Contact</h2> <form> <label>Name:</label> <input type="text" name="name"> <label>Email:</label> <input type="email" name="email"> <label>Message:</label> <textarea name="message"></textarea> <button type="submit">Send</button> </form> </section> </main> <footer> <p>© 2026 Your Name</p> </footer> </body>
✨ Challenge: Build Your Own Bio Page
Now it's your turn. Create a personal bio page using the requirements above. Customise the colours, fonts, and layout. Make it yours.
Extra credit:
- Add a dark/light mode toggle using CSS variables.
- Use CSS Grid for the project cards.
- Add a favicon.
❤️ Support Free Education
This course is 100% free. If it helps you, consider buying me a coffee.
☕ Buy Me a Coffee🎉 You've Completed Quest 1!
You've built 10 lessons in HTML. Next: Quest 2 – Intermediate HTML & CSS.
Start Quest 2 →(Coming soon – check back or buy Pro Pack for early access)