★ FEATURED ARTICLE “第一次作业”这四个字往前看是压力往后看是起点。我到现在还记得我的第一次作业就一句话——用 HTML 和 CSS 写一个个人简历页面。没有模板没有参考图老师甚至没规定文件叫什么都让你自己看着办把班上大部分人都当场整不会了。我之所以选这个题说事是因为它在各类编程培训、计算机课程里简直太典型了。第一次作业十有八九长这样功能要少知识点要全看起来简单一上手全是坑。你现在看到的这篇不是那种“一天学会网页开发”的速成文而是一个已经做完作业、交完作业、回头去复盘的人写的经验。我想跟你聊的是从拿到题目到最终提交一个完全没写过完整页面的人到底该按什么顺序走完这整个过程中间哪些地方最容易翻车以及翻车之后怎么处理。1. 读题三遍之后我才把这一句作业拆成能动手做的清单第一次作业最大的陷阱不是技术难点而是题目太短。人一看到简单题目就会下意识马上动手结果做到一半才发现理解错了返工成本极高。我拿到“写一个个人简历页面”之后老实说前面十几分钟基本都在发呆满脑子只有三个问题写什么内容用什么结构做到什么程度算完成后来我强迫自己坐住把那句话来回读了三遍然后把每一个能想到的模糊点全部列出来挨个问自己。这个步骤看起来像废话但走过一遍之后你就知道它的价值它能把一个含糊的“写个页面”变得完全可执行。1.1 从一句话里拆出明确的需求清单我当时拆出来的需求大概是这样的页面必须有且只有一个主题既然说是个人简历那就不能东拉西扯。内容至少包含姓名、联系方式、一段自我介绍、技能列表最好再带一个表单方便陌生人联系你。样式必须用 CSS 统一控制不能用一堆标签内联样式糊上去。页面里至少要有一张图片并且得保证图片在换一台电脑打开时仍然能显示。HTML 结构要语义化让人一看代码就知道哪部分是头部、哪部分是正文、哪部分是页脚。拆完这些之后我突然就踏实了因为“写一个快递页面”变成了一长串具体的小任务而小任务是可以逐项测试的。今天完成哪一项完成到什么标准我脑子里都有数。这就是我第一次体会到什么叫“把需求翻译成任务”。1.2 把任务继续拆成可验收的技术点需求只告诉你做什么技术点才告诉你怎么做。我对照需求反向推了一遍把这个作业必须用到的知识点列了出来HTML 骨架结构是什么、标题和段落各用什么标签、列表是选中 ul 还是 ol、图片的 alt 属性要不要写、链接的 target 属性有什么用途、CSS 怎么从外部文件引进来、盒模型里的 padding 和 margin 区别在哪、Flex 布局怎么让元素横着排。列完我才发现看起来只有一句话的作业背后牵扯的技术点少说也有十五六个。但好消息是只要你把大框架弄明白这些小点都是往框架里面填的零件不用一次全部背熟用到哪个查哪个。建议你动手之前把时间也规划一下我当时给别人拟了一个很粗的时间表第一小时结构第二小时样式第三小时调兼容和细节最后一个小时提交。这叫“给自己一个截止时间”。没有截止时间你就会像我同桌一样在圆角边框和卡片阴影上面调了一整个下午最后连响应式都没来得及做。2. 新手最容易交上去的四种“半成品作业”我都见过训练营完工后老师会把所有人的作业收上去逐个点评。那一次我的作业被当成了“比较容易理解”的参考样本但其他同学的作业里暴露出的问题几乎完美涵盖了第一次作业会踩的所有坑。我把它们归成四大类你在做自己那份作业之前最好先扫一遍这些教训。2.1 到处都是代码 style 属性一行 CSS 都不写有个同学交上来的页面效果确实华丽以后每个标签都写了一段 style差不多把代码写成了这样p stylecolor: red; font-size: 18px; margin-top: 20px;这段介绍文字是我自己写的/p这么做最直接的问题是什么重复。你如果有二十段文字都要红色就得复制二十遍同样的属性。一旦你想把红色调整成蓝色就只能一个一个去改漏掉一个你就会看到一个红蓝交错的灾难现场。说句实在话像这样把样式写进标签也并没有比写 CSS 省事他只是获得了“我现在把效果调出来了”的表面满足感失去的却是对样式整体结构的掌控力。正确做法是全部写进一个独立的样式表。头一次做作业就养成这个习惯后面写任何一个项目都会轻松很多。第一次作业强调的不该是炫技而应该是规范和可持续。2.2 图片路径写成了“默认打开可以换台电脑就崩”我自己差一点在这个问题上翻车。当时我在 index.html 的同一级目录放了一张照片并写码为img srcme.jpg alt我的照片在本地双击打开时一切正常后来我把它传到一个临时的演示服务器上结果页面上出现了一个破图图标。老师看到就问我你图片是放在根目录还是 images 目录里的我说放在根目录啊。那目录结构是什么我说就一个 index.html 加一张图。问题出在路径上。演示服务器上可能多了一层访问路径纯文件名就会找不准而正确做法通常是把图片放进专门目录然后写相对路径比如img srcimages/me.jpg alt我的照片第一次作业是最适合搞明白相对路径和绝对路径区别的时候。简单说相对路径是相对于当前文件所在位置推导出来的项目文件夹搬到哪里都能用绝对路径是把从根开始那条路写死项目一旦挪了位置就失效。你在本机双击 HTML 文件时浏览器会自动帮你在文件系统里找到资源感觉不到问题一旦真正部署到服务器上路径问题才会全暴露出来。所以第一次作业就老老实实用相对路径并且专门建一个 images 目录这个习惯会让你后面省掉大量怪问题。2.3 桌面端看起来没问题窗口一缩就露馅还有一位同学做得很好用一大把固定像素宽度把布局撑得死死的桌面浏览器打开的确“高大上”。但我用 CtrlShiftM 切换到手机宽度模拟时整个页面像被捏扁了一样文字挤成一条细线图片直接溢出屏幕。这个问题的根源很简单他没有写 viewport 元标签也没有考虑过宽度自适应。其实只需要两处小改动就能救回来meta nameviewport contentwidthdevice-width, initial-scale1.0还有不要在布局上用固定宽度比如不要一直写width: 960px而是写成max-width: 960px加margin: 0 auto。后者意味着“最大宽度不超过 960小于这个值就跟着浏览器收缩”前者是“我死也要躺在 960 像素上”。第一次作业不用你真正精通响应式布局但至少得把 viewport 标签加上并且避免把整个页面宽度焊死。以后再学媒体查询时你会发现当初这个习惯帮你省下了大量重构时间。2.4 代码只有自己能看懂别人看十天也理不出头绪这是最隐性的半成品。有些同学代码能跑、页面也不错但一个 class 命名为box1、box2、box3整段不但没有注释而且标签嵌套混乱头部区域还用一个 div 去糊。我第一次作业刚开始也有这个毛病。大概做到一半我突然想如果两周之后的自己回来看这段代码能马上搞清楚这里在做什么吗我当时停下来做了两件事一是重新规划了 class 命名让它真正反映元素的职责比如site-header、about-section、skill-list二是把代码按区域用注释做了分隔。页面视觉没有任何变化但代码可读性完全不一样了。老师评作业的时候讲了一句让我记到现在的话第一次作业你写的不是页面你写的是你思维过程的截图。你的代码有多乱你的思路就有多乱。这句话听起来像鸡汤但在你工作后被人拉去协作时就会变成血泪教训。3. 我这份“第一次作业”的完整搭建过程与选型理由前两章说了那么多反面案例现在讲讲我那份作业是怎么一步步搭起来的。整个过程其实可以用一条线串起来先搭结构再上样式最后检查和交付。3.1 动手前先把文件夹结构想清楚我见过有人把所有文件都堆在桌面上页面也能打开但那种结构很难维护。我当时只花了两分钟建了下面这个结构后来才发现它让我少走了很多弯路my-resume/ index.html css/ style.css images/ photo.jpgindex.html 放在根目录样式全放在 css 目录图片全放在 images 目录。这个习惯不像后端工程那么复杂但对“第一次作业”来说它逼你从一开始就养成“文件和资源按职责分类”的意识。而且这类结构也是各种前端项目最基本的雏形。以后你用框架时无非是在这个基础上再多加几个目录而已。路径问题也因为目录清晰而少了很多比如 stylesheets 路径就不会随手写成style.css而会写成css/style.css。3.2 HTML 骨架先有语义再有美观在设计任何视觉前我先用纯语义标签把页面结构定下来了。那种什么都不管、直接甩一堆div的做法确实能出效果但那等于把房子盖成了一个大通间完全没有分隔。使用语义化标签的好处归纳起来有三点对搜索引擎友好对屏幕阅读器友好对人读代码友好。所以我的 HTML 大致长这样html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的个人简历/title link relstylesheet hrefcss/style.css /head body header classsite-header h1你好我是林小满/h1 p classsubtitle前端学习路上的第 1 份作业/p /header main classcontainer section classabout h2关于我/h2 p去年开始自学前端熟悉 HTML 和 CSS 的基础语法正在学习 JavaScript。/p /section section classskills h2技能清单/h2 ul liHTML 基础语义化/li liCSS 盒模型与 Flex 布局/li liGit 的基本提交流程/li /ul /section section classcontact h2联系我/h2 form action# methodpost label foremail你的邮箱/label input typeemail idemail nameemail placeholderyouexample.com required button typesubmit发送/button /form /section /main footer classsite-footer p© 2024 · 第一次作业的像素级复盘/p /footer /body /html每个区块都是一个section每个 section 里都有一个h2告诉读者这一块讲的是什么。header、main、footer 各司其职。我第一次写完整骨架的时间是二十分钟写完后视觉上还是一片白但我心里已经清楚这页最终的边界在哪。3.3 CSS 为什么要重置默认样式写 CSS 的第一行我干了一件事把所有标签的默认内外边距清掉。为什么要这样因为不同浏览器的默认样式不同。比如 body 默认有 8px 的外边距Chrome 和旧版 Safari 显示就不一样。如果你不主动重置就会出现“同一个页面换个浏览器就歪掉一堆”的经典问题。我当时用的重置代码是这个现在新项目里依然有人在用类似的东西* { margin: 0; padding: 0; box-sizing: border-box; }box-sizing: border-box很多人一开始不看不起它但它直接决定了你写宽度时的计算方式。默认content-box情况下你设定一个元素宽度 200px再加 padding 20px 和 border 2px它真实占据的宽度是 244px。而用border-box后这 200px 已经把 padding 和 border 算进去了它实际占用就是 200px。第一次作业频繁出现“明明宽度设了怎么还是溢出”的怪问题八成就是没理解盒模型。建议你把这个属性设为 border-box能大幅降低第一天的沮丧感。3.4 布局选择我为什么先用 Flex 而不是 Grid做技能清单时我一开始想到的是让四个技能项横着排。其实对新手来说最稳的布局方式就是 Flexbox。你得先理解它的设计场景让一组元素沿着主轴排列在空间不足时自动换行需要居中的时候垂直水平居中一行代码搞定。对第一次作业这种卡片式页面来说Flex 几乎完美匹配。Grid 当然更强大当你需要同时控制行和列两个方向时Grid 是碾压级的。但第一次作业的页面通常没有复杂到那种程度强行用 Grid 反而增加理解成本。我当时的做法是整个页面的主体结构用正常文档流往下排左右分栏的部分用 Flex技能项用 flex-wrap 自动折行。CSS 代码如下body { font-family: system-ui, -apple-system, Segoe UI, PingFang SC, Microsoft YaHei, sans-serif; line-height: 1.6; color: #333; background-color: #f7f7f7; } .container { max-width: 960px; margin: 0 auto; padding: 20px; } .skills ul { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; }flex-wrap 特别关键意思是“主轴排不下时换到下一行”。如果没有它技能项会在屏幕上挤成一排甚至溢出容器。你用flex-wrap: wrap加gap: 12px每个技能项之间自然有空隙干净利落。3.5 卡片效果背后的 CSS 样式细节为了让第一次作业看起来不是“白底黑字的纯文档”我给每个 section 加了个卡片质感白色背景、圆角、一点阴影。这不是什么高深东西但很多人第一次做时会把阴影调得很脏。原因是阴影的透明度太大颜色太深。我当时反复试了几下最后稳定在类似box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08)这种非常轻的阴影上视觉上更像“纸片稍微浮起来一点”而不是“影子重重叠叠”。圆角我也只给了 12px 或 8px太大会看起来像块水果糖。还有一点小技巧颜色尽量统一不要全页出现七八种颜色我当时从设计稿里挑了一个主色和一个强调色其他全靠黑白灰视觉一下就干净了。4. 提交之前二十分钟我把这份作业当成“产品”来验收你可能会觉得“我第一次做一个作业能跑不就行了吗”其实第一次作业的意义恰恰在于从此刻开始你不是在“写个小练习”而是在“交付一个作品”。哪怕只有一个页面也应该用一个像样的验收流程去对待。我当时在提交前严查了以下几个点每一条都在后来的实战中出现过。4.1 换三个窗口尺寸打开页面我不会只看桌面端那个默认宽度。我会按 F12 打开开发者工具把模拟宽度依次切换到 375px、768px 和 1280px。375px 对应手机竖屏768px 对应平板1280 以上我们叫桌面。第一次作业不要求你在所有尺寸下都完美但至少要求内容不溢出、文字不重叠、图片不破版。如果页面里有横向滚动条的出现那就是典型溢出标志。学会用overflow-x: hidden去掩盖问题是不对的你要做的是找出哪里超出了宽度该缩小的缩小该换行的换行。这时候 Flex 布局和 max-width 会帮你挡掉大部分问题。4.2 打开浏览器控制台看有没有红色报错提交前请在 F12 的 Console 面板里看一眼。很多新手的作业看着正常但控制台落满了一堆 404图片资源加载失败或者 CSS 文件路径写错。这类错误你自己可能察觉不到但网站在加载时会向控制台报错。我那次作业交上去之前特意把控制台的 Error 数量清了零。路径错误是这段里最常见的。我有一个检查技巧右键点击页面选择“查看源文件”然后逐个点击 CSS 和图片链接看它们到底能不能被浏览器打开。如果这里打不开说明路径有问题得回去改。4.3 验证一下键盘能不能走通整个页面这是我后来在一个无障碍测试里学到的第一次作业就可以用上。操作很简单打开页面后按 Tab 键在页面里来回切换焦点。你要确认三点焦点是否按顺序经过了每个链接和按钮焦点经过时有没有明显的视觉高亮表单里的输入框点了之后能不能正常打字。这个检查花不了两分钟却能让你的作业从“视觉上能看”升级成“实际可用”。哪怕导师没有要求无障碍这个习惯也会被别人高看一眼因为大多数第一次作业的人根本不会想到这一点。4.4 删除无效代码和临时内容交作业之前我删掉了所有没用的 class、临时的测试段落、调试时加的 console.log。你看代码的时候可能会觉得无所谓但这些杂物就是噪声它会干扰阅读的人对代码的整体感受。把自己代入批改作业的老师来看对面是几百份代码相同的页面你一眼扫过去一份结构清爽、命名统一、注释到位的作业和一份到处是冗余 div、乱糟糟命名的作业你会更愿意认真看哪份我后来练成一个习惯是每次提交前都会做一次“代码清扫”就像写完一篇稿子后读一遍修改一遍把可有可无的内容全拿走。这不是洁癖这是对自己思维产物的整理。4.5 提交前过一遍的统一自查表格我在做第一次作业最后一步前给自己列了一个简易验收清单这里直接贴出来给你参考检查项为什么重要最快自检方法HTML 里有没有忘加 lang 和 viewport影响字符编码与移动端缩放查看 head 的前四行图片路径是不是相对路径换机器换服务器不破图点开图片链接验证CSS 是否全部放在了外部文件便于维护与复用搜索 style 字符有没有横向滚动条代表布局有溢出拖动浏览器左右滚动条控制台有没有报错资源缺失或语法问题会反映在这F12 看 Console表单能否正常输入并按 Tab 跳转保证页面可用性手动走一遍删光无关临时代码提高代码可读性全局搜索 TODO 或 console.log文件名不用中文或空格避免服务器端意外路径问题检查文件列表你不需要像我一样一条不落但至少要有“提交前页面必须经过自己一轮完整测试”这个意识。第一次作业真正要建立的能力不是写代码而是对自己交付物的掌控感。5. 交完这份作业之后我才发现自己真正学会的是什么批改结果回来后我的作业拿到了一个不错的分数但说句实话真正让我觉得值回付出的不是分数而是交完作业之后那几天我发现的一些变化。最明显的感受是我不再害怕“从零开始”。以前看教程时我都是顺着别人的按钮一路点下去看完就忘动手就懵。老师永远喜欢讲那个“眼睛会了手不会”的玩笑。而第一次作业那句极简的题目等于把我从“看视频就能懂”的幻觉里扯了出来逼着我用自己的大脑去走一遍完整的流程拆解需求、建立结构、填充内容、迭代样式、检查交付。这个过程走完一遍之后你再去看别的教程你会发现每一个步骤都有了落点因为你已经知道它用在哪、为什么用。其次是查文档的心态变了。以前遇到问题第一反应是“再找个视频看看”做完第一次作业后变得很自然打开官方文档或者搜 MDN从“说明书”里找答案。你亲手做过一个页面之后你才能看懂文档里那些概念到底对应什么。比如flex-direction这个词一看只是列了 row、column 几个值但因为你真的把一排技能项调成竖排过所以你看到 row 就知道那是“横向主轴”column 就知道那是“纵向主轴”。没有实践做底查文档就像查一个你从未去过城市的地图每个地名都很陌生。我还想说的是第一次作业最容易被忽视的价值是它让你体验了一次完整的项目闭环而这个闭环在未来不管你是做网页、做 APP、写小程序还是去写后端接口都是同一个套路理解需求拆解任务做出方案实现自测提交。对我来说第一份作业等于在最安全的场景里预演了一遍这个流程没有任何线上风险没有团队等着你只有你自己和一句非常简单的题目。你可能第一次作业做得一团糟也可能直到提交前还在临时调整样式。都正常。我见过不少同学第一次作业做完后恨不得把页面删了重来但反而是这种“不甘心”让他们在第二次作业时脱胎换骨。所以如果你现在正面对着属于自己的那一个“第一次作业”别急着求一个好看的成果先把那短短的一句话拆成你能掌控的一件件小事再逐件去做。做完那一刻你收获的不只是一个页面而是以后自己单飞时最底层的自信。
阅读完成 · 觉得有帮助？
