Before this lesson
Complete semantic HTML, relative paths and responsive CSS. Prepare introduction text and assets you have permission to use.
What you will be able to do
Build a responsive profile with biography, skills and project links, explaining each layout decision.
Understand the mechanism
First define content: a short identity statement, an authentic biography, three learning skills and one project link. Organize with header, main, section and footer, using a primary h1 and section h2 headings. Do not fill gaps with invented clients or statistics.
Next establish content width, typography, spacing and a primary color. Make the page work naturally at 320 pixels before expanding whitespace on larger screens. Use a constrained container instead of absolute coordinates so added content increases height naturally.
Then provide real destinations for project and contact links. Do not present a functioning contact form without a submission system. Finally verify document title, language, keyboard path, links and small-screen layout.
Save the complete example as index.html. Run it unchanged, then replace content. Change one category at a time, such as text before spacing, to isolate structural, styling and resource-path problems.
Runnable example
<!doctype html>
<html lang="en"><head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Alex — learning the web</title>
<style>
body{margin:0;background:#f6f7f2;color:#20382d;font:18px/1.7 system-ui}
main{max-width:700px;margin:auto;padding:70px 24px}
h1{font-size:clamp(36px,7vw,64px);line-height:1.1}
a{color:#176b4b}section{margin-top:40px}
</style></head><body><main>
<p>HELLO, I AM ALEX</p><h1>Learning by building.</h1>
<p>I am learning HTML, CSS and JavaScript, one small project at a time.</p>
<section><h2>My projects</h2><ul>
<li>A personal page</li><li>A responsive card layout</li>
</ul></section>
<section><h2>My learning goal</h2><p>Make useful and accessible websites.</p></section>
<a href="https://developer.mozilla.org/en-US/docs/Learn_web_development">My learning resource</a>
</main></body></html>Trace and verify
Acceptance: no horizontal overflow at 320 or 1280 pixels; no clipped text at 200% zoom; all links keyboard-accessible; fragment targets exist; no machine-specific file paths. Triple the biography length and repeat the checks.
Common mistakes and boundaries
Example identities and links are practice data to replace. Icons, portraits and custom fonts are optional; prioritize accurate content and destinations. A static page cannot automatically receive mail or conceal frontend secrets.
Practice challenge
Add two real exercises with goals, techniques and one challenge encountered. Give external links descriptive names.
Reference solution and reasoning
Use article entries with h3 headings, descriptions and links. Local exercise files are acceptable before deployment; meaningless # placeholders are not. Record one narrow-screen check as completion evidence.