web前端第一次作业完整指南：从需求拆解到调试上线

去年帮不少同学看过他们交上来的web前端第一次作业，发现一个挺有意思的现象：很多人不是写不出来，而是拿到题目就开始写，写到一半发现布局乱了、图片不显示、浏览器白屏，最后熬夜赶工，草草交一个自己都看不下去的页面。如果你的情况也是这样，那这篇内容应该能帮到你。我不打算只讲“怎么写代码”，而是把一次web前端开发入门作业从题目分析、页面拆解、编码实现到本地运行、问题排查的完整链路走一遍。这套思路不止能应付一次作业，你后面做课程设计、写毕设前端、甚至去公司实习接到的第一个需求，逻辑都是一样的。

为了让这次拆解尽量具体，我拿一个出现频率很高的作业命题为例：“个人主页/个人官网首页”。它要求通常是这样：用HTML+CSS+JavaScript做一个静态网站首页，包含头部导航、内容区、底部信息，要求布局合理、样式美观、至少有一个操作事件。为什么选这个题目作为例子？因为它覆盖面广，几乎所有课程里第一次上机都会布置类似需求，而且一个个人主页能承载的知识点很完整——你后面去面试，说“我做过个人主页”不稀奇，但能说清楚主页里每个模块为什么这么写的人，才算把第一次作业吃透了。

1. 先别急着写代码，把作业需求拆清楚

1.1 第一次作业到底在考察什么

很多同学的误区是：第一次作业嘛，无非是把HTML标签背一背，再套点CSS上去，能显示就行。但老师或者布置方真正想看的，不是你“背了多少标签”，而是三件事：结构是否清晰、表现是否分离、交互是否有效。

“结构是否清晰”指的是HTML部分有没有按内容语义去分层。一个页面是个人主页，它的头部、导航、主体、侧边栏、底部，应该在HTML里就一目了然，而不是全部用<div>包到底。“表现是否分离”指的是CSS有没有统一放在样式文件里，行内样式能不用就不用，颜色、间距、字体这些能不能集中管理。“交互是否有效”更直接，JavaScript写的点击事件、表单校验、菜单切换，是不是真正能触发、能反馈。

这三点合在一起，其实就是前端开发最基本的工程观。有的同学第一次作业就拿了高分，不是因为页面花哨，而是老师打开代码一看，目录结构干净、文件分工明确、注释写得清楚。反过来，有些人把样式全写在HTML里，JavaScript堆了一整段在body最底下，虽然页面能看，但代码可维护性几乎为零。第一次作业在评分视角里，就是一块试金石。

1.2 技术栈应该怎么选：直接原生三件套

这里要回应一个很多新手都在纠结的问题：要不要在第一次作业里用Bootstrap、jQuery、或者直接上Vue？我自己带人做项目时，一直给的建议是：如果这是第一次交前端作业，老老实实用原生HTML + CSS + JavaScript。

原因有三：第一，作业本身就是调试你基础功的，原生方式能让你把盒子模型、浮动/弹性布局、事件流这些概念亲手跑一遍，哪怕出错了，错误信息也足够直观，方便你理解浏览器是怎么解析页面的；第二，很多学校的考核维度包含代码答辩，老师问“你这个轮播图原理是什么”，如果你用了Bootstrap，答不上来反而扣分，但用原生实现，至少你能说出setInterval和transform之间的关系；第三，第一次作业代码量都不大，原生三件套完全够用，引入框架反而增加本地运行环境复杂度，一不小心就碰到“项目运行起来白屏”“依赖装不上”这种额外麻烦，白白消耗精力。

那什么时候可以考虑加一层呢？如果你作业需求里明确要求“页面不少于五个、需要共用导航和底部”，那你手动复制五份头部代码确实很累，这时候可以简单地把公共部分抽出来，用JavaScript动态渲染，或者用模板字符串复用结构。但这也仅仅是“用原生JS模拟组件化”，而不是上框架的必要信号。至于公司项目里常用的Vue、React，等你把基础三件套跑顺了再上，效果会好很多。

1.3 以“个人官网首页”为例，先画一版需求清单

拿到题目之后最忌讳直接开编辑器。哪怕再简单的页面，也建议先拿一张纸或在文档里列一下：这个页面包含哪些模块、每个模块大概放什么内容、模块之间什么关系。以个人主页为例，一个合格的首页至少包含：

• 顶部导航栏：Logo/姓名 + 菜单项（首页、关于、技能、作品、联系）
• Hero区（首屏横幅）：一句话介绍 + 主要行动按钮
• 关于我区域：个人简介 + 基本信息列表
• 技能展示区域：用进度条或卡片展示技能掌握程度
• 作品案例区域：几个代表性项目卡片
• 联系区域：表单或者联系方式
• 页脚：版权信息与社交链接

这不是让你每个区域都做得很复杂，而是说需求要覆盖到。第一次作业容易犯的毛病是只有一个超长页面从头滑到尾，没有明显的模块边界，最后老师看的时候不知道你“设计”了什么。有了模块清单之后，你写HTML时会自然地使用header、section、footer这类标签，结构出一来就清晰了。更重要的是，答辩时你能够对着自己的模块清单讲：这里设计的初衷是什么、为什么要用这种布局，而不是支支吾吾说“我照着模板改的”。

2. 核心细节解析与实操要点

2.1 页面结构分层：先用“骨架图”搭HTML

我把个人主页的页面结构画成一个简单的层次关系给你看：

text复制body
├── header（导航栏）
│   ├── .logo <小张同学>
│   └── nav.menu
│       ├── a[href="#about"]
│       └── ...
├── main
│   ├── section#home（Hero）
│   ├── section#about（关于我）
│   ├── section#skills（技能）
│   └── section#work（作品）
└── footer
    ├── 版权文案
    └── 社交链接

实操时按照这个结构去写HTML会非常顺手。先别管视觉效果，把内容语义写对，用最简单的标签把文本、图片放进去，等结构出来了再写CSS。很多初学者喜欢边写HTML边调样式，结果就是HTML里夹杂一堆class，后边想改布局还得回去翻结构，特别浪费时间。

HTML标签怎么选也有讲究。顶部栏用header而不用div，不是显得“高级”，而是对屏幕阅读器、搜索引擎更友好；导航用nav，主要内容用main，底部用footer，这些都是HTML5的语义化标签。第一次作业如果能写出语义清晰的HTML，技术印象分会高很多。

还有个小细节容易忽略：一个HTML文件只能有一个main标签，页面不要写重复了；section里面最好配合一个标题标签（h1~h3）说明这块区域的主题，不能清一色只有p和div。如果老师看了你的HTML结构，不用CSS都能大概猜出页面长什么样，那结构这一项就满分了。

2.2 CSS布局思路：从“盒子”到“一排”再到“一列”

CSS是新手花时间最多、又最容易崩溃的部分。我总结了一句话帮助理解：页面里任何内容都是一层一层的盒子，CSS干的事就是控制盒子的位置和长相。

第一次个人主页，最核心的布局无非三种：上下排列、左右排列、左右加上下混合排列。左右排列首选Flexbox，因为它在处理导航菜单、卡片并排、文字+图片并排时都非常直观。

举个例子，导航栏的左右分布，很多人会这样写：

css复制.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
}

这段代码的意思是：让navbar里的子元素水平排成一行，两端对齐，垂直居中。你不需要通过浮动或者计算百分比去对齐，一行flex属性就解决了。

Hero区域如果想要背景图和文字居中，那就在主容器里再套一层小的content盒子。样式思路是：

css复制.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80vh;
  background: url("bg.jpg") center/cover no-repeat;
}

这里注意单位选择。页面宽度大的模块建议用vh、百分比、px混合控制，比如min-height: 80vh是让Hero区域占当前屏幕80%的高度，即使不同电脑分辨率不同，观感也不会差异太大。文字间距、内边距这类精细控制可以用px或者rem，不要一个页面里全部用死尺寸，否则换一台电脑或者缩小浏览器窗口，页面就会歪一边。

卡片式作品区域可以再用CSS Grid去做等分排列。这里我不打算铺开太多Grid语法，只说一个心得：当你在做“一行很多个、数量固定”的栅格时，Grid非常顺手；当你做页面某个局部的“几个元素不管多少都要排在一行”时，用flex更轻松。两者不要互相替代，第一次作业把它们都用一次，你的布局基础就扎实了。

2.3 JavaScript交互的边界：加什么效果才不显得“凑数”

第一次作业的交互最常出现两个极端：一种是什么交互都没有，页面纯静态，除了能滚动和点链接之外没有任何反馈；另一种是天花乱坠地加了七八个特效，弹窗、雪花、鼠标跟随、自动轮播，结果代码是网上东拼西凑的，连自己都不知道哪儿报错。

我的建议是大而全不如小而精。一次个人主页作业，有两到三个拿得出手的交互就够了。最经典又适合新手的组合是：

导航点击平滑滚动 + 表单非空校验 + 菜单按钮移动端展开收起。这三个交互覆盖了JavaScript里非常核心的事件绑定、DOM操作、条件判断和字符串处理，也能支撑你回答老师提问。

导航平滑滚动最简单的实现方式不是自己写动画循环，而是监听点击事件后调用scrollIntoView：

javascript复制document.querySelectorAll('.menu a').forEach(function(link) {
  link.addEventListener('click', function(e) {
    e.preventDefault();
    var targetId = this.getAttribute('href');
    var targetElement = document.querySelector(targetId);
    if (targetElement) {
      targetElement.scrollIntoView({ behavior: 'smooth' });
    }
  });
});

一个小提醒：href属性里的值如果是#about，对应的目标元素必须有id="about"，不然取不到元素，点击也就没反应。这个“锚点和id对应”的关系，是很多同学排查半天都想不到的问题点。

移动端适配如果前端时间紧张，可以先不管完美适配，但至少要保证菜单在手机屏幕上不会挤成一团。常见的方案是加一个汉堡按钮，点击之后切换导航菜单的显示状态。原理也很简单，用JavaScript添加移除某个类名，CSS里去控制这个类名下的显示与隐藏。等你以后学了Vue，你会发现v-if、v-show这些指令说到底也是在做类似的类名切换。把第一次作业里这个交互亲手写了，后面框架学习会顺很多。

3. 实操落地：从空文件夹到一个能运行的项目

3.1 目录结构与准备工作

不要直接在桌面上新建一个index.html就开始写。先规划目录，我习惯的个人主页项目目录如下：

text复制personal-homepage/
├── index.html
├── css/
│   └── style.css
├── js/
│   └── main.js
└── images/
    ├── avatar.jpg
    └── project-1.png

有几点建议你重视：

• 文件名全部用小写英文字母，不要带空格。My Page.html这种命名在本地打开能行，但一旦部署到服务器或者被别人下载，浏览器解析经常出问题，推荐用my-page.html或直接index.html。
• 图片资源统一放到images/目录，并且记得压缩一下，图片单张超过300KB对个人主页这种项目来说都算大。
• 在HTML头部用相对路径引入CSS和JS，比如<link rel="stylesheet" href="css/style.css">，不要用C:/Users/...这种绝对路径，不然项目拷给别人就跑不动了。

3.2 写HTML主体：先有内容再谈样式

我直接给出一份适合第一次作业的index.html参考，你不需要一字不差照抄，重点是看它怎么组织模块：

html复制<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小张的个人主页</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header class="navbar">
        <div class="logo">小张同学</div>
        <nav class="menu">
            <ul>
                <li><a href="#home">首页</a></li>
                <li><a href="#about">关于</a></li>
                <li><a href="#skills">技能</a></li>
                <li><a href="#work">作品</a></li>
                <li><a href="#contact">联系</a></li>
            </ul>
        </nav>
        <button class="menu-toggle" id="menuToggle">菜单</button>
    </header>

    <main>
        <section class="hero" id="home">
            <div class="hero-content">
                <h1>你好，我是小张</h1>
                <p>一个正在学习前端开发的大学生</p>
                <a href="#work" class="btn">看看我的作品</a>
            </div>
        </section>

        <section class="about" id="about">
            <h2>关于我</h2>
            <p>这里写一段关于你的介绍，比如专业方向、兴趣点、目前正在学习什么。</p>
        </section>

        <section class="skills" id="skills">
            <h2>技能掌握</h2>
            <ul>
                <li>HTML / CSS：熟悉页面结构与常见布局</li>
                <li>JavaScript：基础语法与DOM操作</li>
                <li>Java Web：能够配合后端完成简单项目</li>
            </ul>
        </section>

        <section class="work" id="work">
            <h2>个人作品</h2>
            <div class="work-grid">
                <div class="work-card">
                    <h3>作品A</h3>
                    <p>简单介绍这个作品使用的技术。</p>
                </div>
                <div class="work-card">
                    <h3>作品B</h3>
                    <p>简单介绍这个作品解决的问题。</p>
                </div>
            </div>
        </section>

        <section class="contact" id="contact">
            <h2>联系我</h2>
            <form id="contactForm">
                <label for="name">姓名</label>
                <input type="text" id="name" placeholder="请输入你的姓名">
                <label for="email">邮箱</label>
                <input type="email" id="email" placeholder="请输入你的邮箱">
                <button type="submit">发送</button>
            </form>
        </section>
    </main>

    <footer>
        <p>© 2024 小张的博客</p>
    </footer>

    <script src="js/main.js"></script>
</body>
</html>

看到这个结构你会发现，所有内容其实都是“用嘴说出来”之后直接变成标签的，不需要多少想象力。正文里没放图片，是因为等你想好放哪张图再放也不迟，结构不依赖内容。唯一的建议是文字内容要真实一点，老师如果让你现场改文字，你也得知道自己那里写了什么。

3.3 CSS写样式：让页面从“默认排版”变成“设计页面”

没有样式的情况下，上面的页面大概就是白底黑字、一竖条下来，谈不上不好看，但离“用心设计”还差很远。写CSS时我的步骤是：

先做“清理”，把浏览器默认的内外边距去掉：在style.css最顶部加：

css复制* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

box-sizing: border-box是比较关键的一行。它让元素的width属性包含边框和内边距，也就是你写宽度300px的时候，整个盒子就是300px，不会因为加了10px内边距又变成320px。这个知识点面试经常问，第一次作业直接写上去，就把它练到了。

整体文字用系统字体族，不建议在第一次作业里用整段图片代替文字。然后可以顺手设置：

css复制body {
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  line-height: 1.6;
  color: #333;
}

接下来写导航栏，使它固定在页面顶部，并且在页面往下滚的时候仍然能看到菜单：

css复制.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 64px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  z-index: 100;
}

用position: fixed之后，导航脱离普通的文档流了，所以后面的main内容需要往上挪一点，否则页面最顶部会被导航盖住。解决方式是在main上面加一个padding-top，或者给hero加一个margin-top，注意这里不是硬编码死值，而是结合导航高度64px来算。很多同学在这块栽坑：用了fixed导航，没给主体留出空间，结果首页标题被盖了一半。

Hero区我建议用渐变色背景，减少对图片依赖，也加快加载速度：

css复制.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  color: #fff;
  text-align: center;
}

作品卡片区和联系表单区的样式，尽量以简洁为准，避免花哨的投影和大圆角堆叠。一个页面里大圆角颜色不要超过两三种，不然视觉会杂乱。

3.4 JavaScript交互逻辑：表单校验务必自己写

我在main.js里准备两个交互：端口导航平滑滚动和表单校验。导航上方的代码已经给过，这里补全表单校验的写法：

javascript复制var form = document.getElementById('contactForm');
if (form) {
  form.addEventListener('submit', function(e) {
    e.preventDefault();
    var name = document.getElementById('name');
    var email = document.getElementById('email');
    var nameValue = name.value.trim();
    var emailValue = email.value.trim();

    if (nameValue === '') {
      alert('请输入姓名');
      name.focus();
      return;
    }
    if (emailValue === '' || emailValue.indexOf('@') === -1) {
      alert('请输入正确的邮箱');
      email.focus();
      return;
    }
    alert('提交成功，我会尽快回复你！');
    form.reset();
  });
}

这段代码值得逐行理解。e.preventDefault()阻止了表单真正的跳转提交行为，因为这里没有后端，如果不阻止，页面会刷新或跳转到一个空白地址，看起来就像“报错了”。trim()去掉字符串首尾空格，避免用户只输入空格也能通过校验。

这里提前解释一下你在浏览器真正提交以后会发生什么：目前这只是一个静态页面，没有后端服务，所以即便校验通过，也只是弹窗提示一下，不会真正把数据发给任何人。但你可以在控制台用console.log(nameValue, emailValue)看看收集的数据长什么样，这是在为以后对接真实后端接口做铺垫。以后你学了Ajax/fetch，只要把这里替换成网络请求，就能把数据提交到服务器了。

关于热搜里提到的“java web + jsp项目中前端使用js+jquery如何实现设置审批流”这类需求，我多说一句。审批流听上去复杂，但它的前端交互本质通常就是：提交按钮触发事件，收集当前表单状态，请求后端接口，然后根据返回结果修改流程状态的展示。没有后端接口时，你可以在前端做一个模拟的“步骤条”组件，用数组存流程节点，通过某个按钮的控制把当前节点往后推进。掌握第一次作业里的“事件绑定+状态判断”，将来做审批流你面对的就只是逻辑分支多了一些，而不是新的“法术”。

4. 本地运行、浏览器调试和问题排查

4.1 项目跑起来却一片空白？先看文件路径

第一次作业最常见的运行问题，是在浏览器双击index.html后页面白屏，或者局部图片裂开、CSS完全没生效。这里90%的原因是路径写错。比方说HTML文件在项目根目录，而CSS自检路径是css/style.css，如果你的HTML文件本身在html/子目录下，那么引用路径要改成../css/style.css，相对路径是基于当前文件所在位置计算的。

有一个快速验证方法：按F12打开开发者工具，切到Console或者Network面板，如果看到Failed to load resource: net::ERR_FILE_NOT_FOUND或者HTTP 404，基本可以确定路径不对。Network面板会直接显示是谁加载失败，双击那个失败记录，可以看到浏览器实际请求的路径，你对照一下就能找到差异。

4.2 关于Network Unavailable：不是所有“报错”都是写错代码

热搜词里有人问“web前端项目运行显示network unavailable怎么解决”，这个问题其实有两种场景。第一种是浏览器地址栏没有打开本地文件，而是你把项目放在一个编辑器内置服务器里，但编辑器没启动服务，就去访问http://localhost:5500/，那当然会拿到network unavailable。第二种是开发者工具网络面板提示网络不可用，那多半是代理或者离线模式的问题，跟你的项目代码无关。

如果你用的是VS Code，建议安装“Live Server”扩展，然后右键index.html选择“Open with Live Server”，这样项目会跑在一个本地HTTP服务上，不仅路径更稳定，而且修改代码保存后浏览器能自动刷新，做第一次作业会舒服很多。需要说明的是，这一步不涉及任何复杂代理或网络配置，它只是在你的电脑内部提供一个本地服务端口，跟访问外部网络没关系。

运行显示network unavailable时，按以下几步排查：

排查顺序如下：

1. 看地址是file://开头还是http://开头。纯静态作业用file://双击打开也完全没问题。
2. 如果用Live Server还不行，看IDE右下角有没有启动成功的提示，端口冲突也会导致打不开。
3. 打开Windows任务管理器或者Mac的活动监视器，看看有没有多个开发服务器在抢端口，把之前开着的进程关掉。
4. 实在不行重启一下IDE，很多本地服务问题重启一次就好了。

4.3 控制台报错逐年排查：语法错误是最容易发现的

JavaScript报错在Console面板中会显示红色，点开后会提示出错的文件和行号。第一次写JS最容易犯的错包括：写了中文分号、少写了括号、变量名拼写不一致、引用了DOM中不存在的id。

这里分享一个个人的排查小技巧：看到报错后不要急着改，先看浏览器提示的“文件名：行号”，到代码对应行检查一遍。如果提示是xxx is not defined，那基本就是变量名拼写出了问题；如果提示Cannot read property 'addEventListener' of null，那说明你用getElementById得到的元素不存在，多半是HTML的id和JS里的字符串不一致，或者你把JS文件放在了DOM渲染之前执行但没有做DOMContentLoaded包裹。

第一次作业的JS建议放在</body>标签之前引入，这是最简单有效的防错办法。因为此时DOM树已经构建完成，你写document.getElementById一定能拿到元素。如果放在<head>里，则要额外写DOMContentLoaded监听，对新手不太友好。

4.4 常见问题速查表

我把带新生做作业期间遇到的高频问题整理成了一张表，你可以直接对照：

这些错误不犯一遍其实是学不扎实的。如果第一次作业就碰到其中几个，反而是好事，因为你解决后会形成肌肉记忆，以后面试聊“遇到过的坑”时，也能有真实素材可说。

5. 第一次作业也是作品集起点：这样写能加分

5.1 五步自查：交作业之前过一遍

写完代码不代表任务完成。我会建议所有准备交前端作业的同学在提交之前，按下面几个维度把自己的项目完整过一遍：

• 换一台设备或一个浏览器再打开页面。能看到同样效果，说明你的代码没有依赖特定设备或特定浏览器特性。尤其是CSS里用了旧版-webkit-前缀、或者使用了比较新的属性，要考虑浏览器兼容。
• 缩放窗口看布局会不会乱。快速拉拽浏览器宽度，如果布局乱七八糟，要么补媒体查询，要么把你布局里的宽度改成更灵活的单位。第一次作业不要求适配手机，但至少要能在常见的窄窗口下保持可读。
• 用无痕模式打开页面。这样避免浏览器缓存导致你看到的是旧版页面，保证自己测试的是最新代码。
• 认真阅读一遍自己的代码。有没有能删除的冗余类名？有没有明显重复的CSS？JS里的变量命名是否一看就懂？不需要改到完美，但至少让两周后的自己还能看懂。
• 准备一个3分钟的讲解稿。从“我做了什么页面、用了什么技术、模块怎么分布、交互怎么实现、遇到什么困难怎么排查”五个角度讲一遍。我相信，能把第一次作业讲清楚的人，就已经比很多只会“贴代码交差”的人强很多了。

5.2 UI设计和Web前端开发怎么选：别被“哪个好学”带偏

热搜里也有个新人在问“UI和web前端开发哪个好学”，我顺带给个判断维度。UI设计更偏视觉、交互原型和审美表达，核心产出是设计稿；web前端开发更偏把设计稿或者想法在浏览器里真正呈现出来，核心产出是页面工程。两者都需要学习，但知识路径不一样，UI对色彩、版式、创意工具依赖更强，前端对HTML/CSS/JavaScript这些技术依赖更强。

如果你的第一次作业做的是个人主页，其实你同时碰了两块：写出来的页面样式就是初级UI的体现，结构逻辑又是前端开发。有些人觉得UI“不需要看懂代码”所以好学，但其实UI的审美积累和工具熟练度也不轻松。与其纠结哪个好学，不如用这次作业来判断自己更喜欢哪种过程：你是更喜欢调像素、配颜色、研究排版，还是更喜欢写逻辑、做交互、解决报错？第一次作业刚好给你一次低成本的试错机会，感受一下再决定后续投入。这个决定比你看到的热搜经验更有参考价值。

5.3 以后再扩展的方向

这次做的个人主页，后续有很多演进路径。比如学会了React/Vue之后，可以把纯静态页面改成组件化代码；学会了Node.js或者Java后端之后，可以给联系表单真正接一个接口，提交数据到数据库；学会了构建工具之后，可以把代码整理成工程级目录，引入打包流程。如果走Java Web方向，用JSP作为后端模板，前端也可以把现在写的HTML和CSS拆成JSP的公共部分，在每个页面里复用它，这就是一个完整的 Java Web 项目雏形了。

从“第一次作业”到“一个拿得出手的完整项目”，中间差的往往不是更多特效，而是你是否愿意回头把基础页面做干净、做成体系。第一次作业最重要的价值在于给你建立一套可复用的完成流程：先分析需求，再搭结构，再写样式，再加交互，最后做检查。以后拿到任何需求，你都可以把这次经验复制过去。

我第一次做页面的时候也犯过低级错误，比如整整一个下午发现图片不显示，最后才意识到文件名是中文路径。现在踩得坑多了，反而会感谢那次作业：如果没有那时候把错误犯一遍，后面正式做项目时不一定会对路径检查这么敏感。所以，不要只为了交差而写作业。把这个项目当成你前端路上的第一个“作品”，哪怕它简单，但也值得你用心打磨和复盘。