学习前提
完成HTML语义结构、相对路径和CSS响应式布局；准备有权使用的个人介绍与素材。
本课完成后你能做什么
独立完成有简介、技能与作品入口的响应式页面，并解释每个布局决定。
先理解机制
第一阶段先定义内容：一句定位、一段真实简介、三项学习技能、一个作品入口。使用header、main、section和footer组织；一个主要h1描述页面身份，section标题使用h2。不要用虚构客户、评价或数字填充页面。
第二阶段建立视觉规则：内容宽度、字号层级、间距和主色。先使320像素页面自然排列，再在宽屏扩大留白。示例使用受约束的容器而不是绝对坐标；内容增加时页面应自然变高。
第三阶段处理真实交互：作品链接必须有目的地，联系入口应使用你愿意公开的方式。没有后端就不要显示假装能提交的联系表单。第四阶段逐项验证标题、语言声明、键盘路径、链接和移动端。
示例是可以直接保存为index.html的完整文档。先运行原版，再替换内容；每次只改一类因素，例如先改文字再改间距。这样出现问题时可以判断是结构、样式还是资源路径造成。
可运行示例
<!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>推演与验证
验收：320和1280像素宽度无横向滚动；200%缩放时文本不被裁掉；仅用Tab可访问所有链接；所有片段链接有对应id；页面不依赖本机绝对文件路径。把简介增长三倍后重测，验证布局由内容驱动。
常见错误与边界
示例中的人物与链接是练习数据，发布前应替换。favicon、头像和字体都不是上线的必要条件，先保证内容和目的地址正确。免费静态页面不能自动接收邮件或隐藏前端秘密。
动手练习
新增作品区，至少包含两件真实练习，各说明目标、技术点和一个遇到的问题。给外链加明确名称。
参考解法与理由
将作品组织为article列表，每项h3标题、说明与链接。没有上线地址时可先链接到同目录练习文件，不能使用无意义的#占位。记录一次小屏测试结果作为完成证据。