项目指南阶段 01 · 基础时长 · 1–2 周

优秀的网页始于结构，而不是装饰。

基础阶段培养构建清晰、响应式且无障碍网页所需的习惯：有意义的 HTML、经过设计的 CSS，以及恰当使用 JavaScript。

从内容含义与结构开始

HTML 不只是把文字放到屏幕上。标题、区域、链接、列表和表单会向用户与浏览器说明页面如何组织。经过思考的文档结构能够让浏览、维护和后续扩展更加容易。

让布局适应各种屏幕

CSS 将结构转化为视觉体验。你将练习间距、层级和响应式布局，让页面在手机和大屏上都清晰易读。目标不是缩小桌面设计，而是让内容自然适应屏幕。

在保持清晰的同时加入交互

JavaScript 基础会带你了解交互：响应输入、更新界面，并将行为与页面内容联系起来。无障碍设计和 SEO 则成为实际检查：用户能否顺利浏览，搜索系统能否理解页面结构？本阶段将这些基础融入整洁、响应式的网页。

从概念到可运行的代码

这些代码片段展示了各阶段知识在真实项目中的应用。请将它们作为阅读、分析、修改和测试的起点，而不是不理解就复制的代码。

赋予内容清晰的结构

页面使用主区域、清晰的标题层级和真正的列表。CSS 网格组合 minmax() 与 auto-fit，让卡片根据空间自动换行，而不是固定为桌面布局。

<main class="program-page">
  <section class="intro" aria-labelledby="page-title">
    <p class="eyebrow">Community learning</p>
    <h1 id="page-title">Build your first web project</h1>
    <p>Learn by making a page people can actually use.</p>
    <a class="button" href="#apply">Explore the program</a>
  </section>

  <section aria-labelledby="outcomes-title">
    <h2 id="outcomes-title">What you will practise</h2>
    <ul class="outcomes">
      <li>Structure content with HTML</li>
      <li>Shape a responsive layout with CSS</li>
      <li>Add useful behavior with JavaScript</li>
    </ul>
  </section>
</main>

<style>
  .outcomes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem;
  }
</style>

加入无障碍交互

按钮控制答案并通过 aria-expanded 暴露当前状态。原生按钮支持键盘操作；JavaScript 同时更新可见答案与辅助技术读取的状态。

const questions = document.querySelectorAll("[data-faq]");

questions.forEach((question) => {
  const button = question.querySelector("button");
  const answer = question.querySelector("[data-answer]");

  button.addEventListener("click", () => {
    const isOpen = button.getAttribute("aria-expanded") === "true";
    button.setAttribute("aria-expanded", String(!isOpen));
    answer.hidden = isOpen;
  });
});

阅读后动手修改
改变一项要求，先预测结果，再运行代码验证。在评审时，说明你的取舍以及下一步会做的一项改进。