Python Capstone: Building Your First Web Profile Page
Congratulations on reaching the final capstone lesson! In this project, you will unite everything you learned—semantic landmarks (<header>, <main>, <footer>), headings, paragraphs, lists, links, images, and contact forms—into a complete, standalone developer profile page.
"You now possess all the individual Lego bricks: the walls (headers), windows (images), doors (links), and mailbox (forms). Now let's build the entire house!"
Deep Dive: How It Works
Document Architecture: Standard <!DOCTYPE html> wrapping <head> and <body>.
Hero Section: <header> with your name <h1>, a professional subtitle, and navigation links.
About & Skills: <section> with a descriptive <p> and a bulleted <ul> list of programming skills.
Projects Matrix: An <article> card with project title, live link, and description.
Contact Gateway: A working <form> with name input, email input, message <textarea>, and submit button.
Syntax Blueprint
<!DOCTYPE html>
<html>
<head><title>Portfolio</title></head>
<body>
<header><h1>Alex Rivers</h1></header>
<main>
<section><h2>Skills</h2><ul><li>HTML</li></ul></section>
<section><form><button>Contact</button></form></section>
</main>
<footer><p>© 2026</p></footer>
</body>
</html>A fully assembled semantic developer portfolio web document.
Core Rules to Remember
Common Beginner Traps & How to Fix Them
Skipping semantic tags on final projectsWhy it happens: Rushing and wrapping everything in generic divs.
How to fix: Take pride in clean semantic architecture with <header>, <main>, <section>, and <footer>.
Live Interactive Example
Hit Run Code to see it liveYour Turn: Micro Challenge
No pressure! Edit the starter code below and test your solution with instant feedback.
Assemble a mini developer page
- Create a <header> with an <h1> containing "My Portfolio"
- Create a <main> with a <ul> containing an <li> with "HTML"
- Create a <footer> with a <p> containing "© 2026"
Finished reading and practicing?
Mark this lesson as completed to update your course progress.