看到wed前段第一次作业这个标题我第一反应是——又是web前端新人入坑的第一课。标题里的wed应该是web的笔误前段是前端的笔误这种小错误恰恰说明你正处于最开始接触的阶段还没被各种报错折磨到怀疑人生。作为带过不少新人、也看过无数前端入门作业的人我可以负责任地告诉你第一次作业的核心目的从来不是做出多惊艳的页面而是帮你把开发链路跑通——从新建文件、写代码、浏览器预览到提交作业这一整套流程顺畅了后面学什么都快。这篇文章就是给正在做第一次作业的你准备的无论你是计算机专业学生、培训班学员还是自学党只要任务是做一个网页都可以直接照着下面的思路和代码来。我会从需求拆解、环境准备、实操实现到常见问题排查完整走一遍最后再聊聊作业做完之后该往哪个方向继续走。内容偏基础但每一步我都会解释为什么这么做而不是光甩一段代码让你抄。1. 内容整体设计与思路拆解1.1 第一次作业到底在考察什么很多同学拿到第一次作业这个题目时第一反应是慌做什么主题做多复杂做到什么程度算合格其实你完全不用焦虑。老师或课程设计者布置第一次前端作业目标非常明确就是检验四件事。第一你有没有把开发环境跑起来。编辑器能不能正常写代码浏览器能不能打开本地HTML文件文件后缀名是不是.html而不是.txt这些听起来很基础但恰恰是新手第一个卡点。我见过太多人写了半天代码结果保存的文件是index.html.txt浏览器打开全是源代码乱码。第二你对HTML基础标签有没有概念。h1、p、a、img、ul、li、div、span这些最常用的标签能不能用对页面结构是不是清晰而不是一坨东西堆在那里完全不分块。很多第一次作业是制作一个个人介绍页面本质就是让你练习这些标签的排列组合。第三你对CSS基本样式有没有感觉。颜色、字体、间距、边框、背景能不能把页面调整得至少不难看。第一次作业对CSS的要求一般不高但你至少要会用类选择器或标签选择器给元素加样式能理解什么是盒模型和块级元素。第四你有没有基本的上网搜索与排错能力。作业要求可能没说得很细遇到问题能不能自己查。这个能力说实话比前面三点都重要前端这东西变化快谁也没法把所有细节记在脑子里会查会试才是核心技能。1.2 作业方向选什么比较好第一次作业的题目五花八门但归类下来大概有三类。一类是个人介绍页或名片页这是最常见的。要求通常包括姓名、一句话简介、兴趣爱好、联系方式再配一张图或背景。这类题目很友好素材全在你自己脑子里不用找资料而且做出来的页面天然有真实感适合练手。一类是模仿页面比如让你照着某个网站的布局做一个静态页面。这类题目的坑在于新手容易眼高手低选了那种设计感极强的网站结果做了两天连个头部导航都搞不定。我的建议是如果遇到这种题选一个结构简单的页面比如某个旧版门户网站的头部加两栏布局或者一个简单的文章详情页。还有一类是表单页比如做一个用户注册页或留言板页面。这类主要是练表单标签input、textarea、button以及简单的表单布局。表单页对CSS要求不高但对标签属性理解有要求也是很好的选择。不管题目是哪一类第一次作业的核心原则是控制范围、做完整而不是做复杂。做一个只有导航栏但导航栏样式精致的页面好过做一个有十几个毫无章法的模块但每个都半吊子的页面。1.3 技术栈老老实实用原生三件套关于技术栈这里我要多啰嗦几句。最近几年前端圈子热词很多比如热搜里动不动就是Vue、React、微前端、组件库很多同学看了这些名词心里痒做第一次作业时就想要不要上Vue要不要用Element UI我的建议非常明确第一次作业不要用框架不要用构建工具不要用任何npm包。就用HTML CSS 原生JavaScript最多加一个本地图片。原因有三个。第一第一次作业不是项目上线它考的是基础。老师批作业时想看的是你对HTML结构、CSS布局、JS基本交互的掌握程度你用一个Vue脚手架生成一个模板页面然后改两行字本质上什么都没练到作业也失去了意义。第二框架和构建工具自带复杂性。Vue需要Node环境、npm依赖、打包配置任何一个环节出错都会打断你的学习节奏。我见过不止一个同学作业本身没写几行代码光是折腾node版本和环境变量就花了两天。第三先懂原理再学工具这个顺序不能颠倒。你直接用组件库确实能快速拖出一个好看的表单但你不理解那些样式和逻辑是怎么来的后面一旦遇到组件库不满足需求的场景就会陷入只会用不会改的尴尬。先把原生三件套啃下来后面学框架会轻松得多。2. 开发环境与基础准备2.1 编辑器VsCode依然是新人的最佳选择工欲善其事必先利其器。前端开发说白了就是写代码、看效果、改代码的循环一个顺手的编辑器能让这个过程顺畅很多。我的建议是直接用Visual Studio Code也就是VSCode。它免费、跨平台、插件生态丰富基本是前端开发的事实标准。相比记事本、sublime这类轻量编辑器它自带语法高亮、智能提示、格式化对新手极其友好。安装完之后建议装几个基础插件Auto Rename Tag改标签时自动改闭合标签、Live Server本地起一个自动刷新的服务器改完代码浏览器立刻更新、Prettier - Code formatter代码格式化统一风格。这三个插件能让你少掉不少头发。装好插件后做一个小测试新建一个文件夹命名为你的作业项目名在VSCode里打开这个文件夹在里面新建一个index.html输入英文感叹号后按Tab键如果自动生成了一整个HTML骨架说明编辑器环境OK了。2.2 浏览器与开发者工具Chrome和F12浏览器方面推荐用Chrome或Edge。它们的内核一样开发者工具也差不多选哪个都行。这里要特别强调一个能力右下角打开开发者工具快捷键F12这是前端开发必备技能新手务必养成习惯。F12能干的事太多了你做第一次作业时最需要关注这几个Elements面板可以查看和临时修改HTML元素和CSS样式你能直接在页面上试试改个颜色、调个字体大小满意了再回到编辑器里改代码Console面板会显示JS报错信息当你点击按钮没反应的时候第一件事就是来这里看有没有红色报错Network面板可以看到页面加载了哪些资源这对排查图片不显示、CSS文件没加载这类问题很有帮助。很多新手最怕报错看到红色英文就直接慌。我想说的是报错是你的朋友它至少帮你定位了问题。报错信息里通常带着文件名、行号、错误类型照着排查基本都能解决。越怕报错你越学不会前端这个心态要尽早调整过来。2.3 文件目录结构从一开始就分好类第一次作业的文件不多但我强烈建议从一开始就养成分类存放的习惯别把CSS和JS一股脑全塞进HTML文件里。推荐的最小可用项目结构是这样的my-first-web/ ├── index.html ├── css/ │ └── style.css ├── js/ │ └── main.js └── images/ └── avatar.jpg或png这个结构非常简单但它有三个好处。一是逻辑清晰HTML管结构CSS管样式JS管交互各司其职。二是为以后学习模块化和工程化做铺垫你早晚要面对复杂的项目结构现在就习惯分类以后上手不会乱。三是如果作业要求提交压缩包老师看起来也舒服印象分自然会高。需要特别注意的是HTML里引用CSS和JS文件时路径要写对。css/style.css表示style.css在css文件夹里js/main.js同理。很多人第一次作业栽在这上面文件夹结构没问题但引用路径写错了导致样式加载不进来。2.4 本地预览与Live Server做完前面这些准备工作你就可以开始写代码了。在写代码之前先搞清楚怎么在浏览器里看到效果。最简单的预览方式是直接双击index.html文件浏览器会通过file协议把它打开。这种方式适合最开始简单看看效果但有一个问题如果你的网页里用了JavaScript模块import/export语法file协议下会报跨域错误无法正常运行。而且它不能自动刷新每改一次代码都要手动刷新一次页面。更好的方案是用Live Server。在VSCode里安装好Live Server插件后右键你的index.html选择Open with Live Server它会自动起一个本地服务并在浏览器里打开页面。之后你每次保存代码浏览器都会自动刷新体验好很多。这个方式也更能模拟真实的生产环境以后你开发复杂项目时基本都是这个模式。3. 实操过程与核心环节实现3.1 搭建HTML结构骨架现在进入正题。我以一个典型的第一作业——个人介绍页为例带大家完整做一遍。这不是唯一答案但你可以完全套用这个思路去做自己的题目。打开VSCode在index.html里输入英文感叹号并按Tab会生成一个标准的HTML5模板。我来逐段解释一下模板里的内容因为这决定了你页面能不能正常显示中文、能不能在手机上有合理的显示效果。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title张三的个人介绍页/title link relstylesheet hrefcss/style.css /head body !-- 页面内容写在这里 -- /body /htmlDOCTYPE html声明这是HTML5文档没有它浏览器可能进入怪异模式导致样式和你预期的不一致。html标签上的langzh-CN告诉浏览器页面语言是简体中文对读屏工具和浏览器翻译都友好。head里的meta charsetUTF-8必须保留不然中文可能显示成乱码这是新手最容易忽略的坑。viewport那行meta是让页面在移动端正常缩放的先记住要写就行。link那行引用了外部样式表href指向css/style.css这是第一步真正把HTML和CSS连起来的地方。顺便说一句CSS文件放在head里用link引入而JS文件一般放在body最底部或使用defer属性这是由浏览器的加载顺序决定的CSS要尽早加载避免页面闪烁JS晚点加载确保DOM已经就绪。3.2 写出信息清晰、结构合理的页面内容接下来在body里写实际内容。我第一次作业的核心是展示个人信息包括一个头像区域、一个名字和简介、几个兴趣爱好、一段自我介绍。怎么用HTML来表达这个结构呢关键是要有语义化意识。语义化可以这样理解不同的HTML标签不只是样式不同的盒子它们还有语义含义。header表示页头nav表示导航main表示主体内容footer表示页脚section表示一个区块article表示一篇独立文章。你用合适的标签浏览器、搜索引擎和屏幕阅读器才能正确理解你的页面。这对第一次作业来说属于加分项但值得养成习惯。下面我给出一个参考实现header classpage-header h1张三/h1 p classsubtitle一名正在学习Web前端开发的在校学生/p /header main classcontainer section classprofile img srcimages/avatar.jpg alt张三的头像 classavatar div classprofile-info h2关于我/h2 p你好我是张三目前就读于某某大学计算机专业。我对前端开发很感兴趣正在系统学习HTML、CSS和JavaScript。/p /div /section section classhobbies h2我的兴趣爱好/h2 ul li阅读/li li羽毛球/li li摄影/li /ul /section section classcontact h2联系方式/h2 p邮箱a hrefmailto:zhangsanexample.comzhangsanexample.com/a/p /section /main footer classpage-footer p这是我的第一个Web前端作业/p /footer这个结构体现了几个要点header和footer分别负责页头和页脚main里用三个section切分了三个独立内容块img标签的alt属性很重要图片加载不出来时会显示替代文本也对无障碍友好ul和li用来表示列表比直接用一堆p标签更语义化。这里要注意一个常见错误很多人习惯把整个页面都用div包起来div之间层层嵌套。div本身没有语义是一个通用容器能用section、header、footer等语义化标签表达的地方尽量别都用div。否则代码会变成div地狱后面改样式和做项目时难以维护。3.3 用CSS让页面好看又清晰写完HTML之后页面在浏览器里就是一堆按浏览器默认样式排列的纯文本不好看是正常的接下来就是CSS发挥作用的时候。CSS的核心逻辑是通过选择器选中HTML元素再给它们设置样式。初次接触时不用急着把所有属性都背下来先把最常见的几类弄懂文字类color、font-size、font-family、盒模型width、height、padding、margin、border、背景类background-color、background-image、布局类display、flex相关。我建议先从整体布局入手。页面应该有一个合适的最大宽度避免在超宽屏幕上文字横向拉得太长。一个常见的做法是给内容包裹容器设置max-width然后用margin: 0 auto让它在水平方向居中这样页面在宽屏上不会显得过于散乱。下面是一份基础CSS参考注意我加了不少注释方便你理解每一段的作用/* 全局样式统一字体、背景色、文字色 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Microsoft YaHei, PingFang SC, sans-serif; background-color: #f5f7fa; color: #333; line-height: 1.6; } /* 页头样式 */ .page-header { background-color: #2c3e50; color: #fff; text-align: center; padding: 60px 20px; } .page-header .subtitle { font-size: 18px; color: #bdc3c7; margin-top: 10px; } /* 主体容器在页面中居中并限制宽度 */ .container { max-width: 900px; margin: 40px auto; padding: 0 20px; } /* 每个内容区块统一设置为卡片样式 */ .profile, .hobbies, .contact { background-color: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); padding: 24px; margin-bottom: 24px; } /* 头像展示 */ .avatar { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; display: block; } /* 兴趣爱好列表把默认的小圆点去掉换成间距更自然的样式 */ .hobbies ul { list-style: none; padding-left: 0; } .hobbies li { background-color: #ecf0f1; display: inline-block; padding: 6px 14px; border-radius: 20px; margin-right: 8px; } /* 页脚 */ .page-footer { text-align: center; padding: 20px; color: #999; font-size: 14px; }这个CSS里有几个地方值得重点理解。第一开头的*通配符选择器把margin和padding清零能消除浏览器默认边距带来的不一致这是前端初始化的常见手法可以理解为先把画布擦干净再作画。第二box-sizing: border-box会让width包含padding和border的宽度避免你明明设置了宽度但又因为多了padding而导致元素溢出容器这一点对新手尤其重要。第三border-radius: 50%配合固定的宽高可以把正方形图片变成圆形头像object-fit: cover和height搭配保证图片填满而不变形。这些细节点如果不太懂也没关系第一次作业阶段先照着写知道效果是什么等后面学到盒模型、flex和响应式布局时再回头看你会豁然开朗。3.4 给页面加一点JavaScript交互如果作业只要求静态页面到上一步就完成了。但如果你的作业要求是包含交互效果或者你想多拿一点分那就需要引入JavaScript。第一次作业的JS不需要复杂一个简单的交互就够了比如点击按钮切换一段文字或者鼠标悬停某个元素时改变样式。我推荐一个非常经典的入门交互点击按钮把页面上的一段内容替换成预设的另一段。实现思路非常简单先在HTML里加一个按钮和一个用于显示内容的元素然后在main.js里通过DOM操作选中它们再用addEventListener绑定点击事件事件触发时修改元素的文本或样式。对应的HTML增加部分section classinteractive h2一个小交互/h2 p iddemo-text这是一段原始文字。/p button idchange-btn点击换内容/button /section对应的main.js// 获取页面上的按钮和文本元素 var changeBtn document.getElementById(change-btn); var demoText document.getElementById(demo-text); // 给按钮绑定点击事件 changeBtn.addEventListener(click, function () { if (demoText.textContent 这是一段原始文字。) { demoText.textContent 你已经成功触发了第一次JavaScript交互; demoText.style.color #2c3e50; } else { demoText.textContent 这是一段原始文字。; demoText.style.color #333; } });这个例子虽然短但包含了JavaScript操作网页的三个核心步骤找元素、绑事件、改内容。document.getElementById是找元素addEventListener是绑事件textContent和style是改内容。这三个步骤是以后所有前端交互的基础第一次做就把它理解透后面学jQuery、学Vue都会觉得顺。一个重要的操作习惯提醒如果JS代码放在head里直接执行getElementById会找不到元素因为页面还没解析到body。最简单的解决方案是把script标签放在body结束标签之前确保执行时页面DOM已经构建完成。这也是为什么我在前面推荐的项目结构里把JS文件引用放在HTML末尾的原因。你还可以用defer属性加载外部脚本也能达到类似效果。3.5 完整的页面最终效果与提交前自测把上面的HTML、CSS、JS合在一起如果你没有本地图片用一张占位图或者干脆用文字替代img区域页面就已经是一个完成度还算不错的个人介绍页了。它包含页头、关于我、兴趣列表、联系方式、一个可交互的按钮、一个页脚布局清晰样式简洁基本达到了第一次作业应有的水准。提交作业前我强烈建议你按下面这份清单逐项自测一遍这能避免很多低级的丢分项。首先直接双击index.html再右键选择Live Server打开两种方式都确认页面能正常显示。有些老师会在不同环境下打开你的文件如果只有Live Server下能用可能存在一定的风险。其次检查图片能不能加载。如果图片放在images文件夹里但是路径写成了images/avatar.jpg而实际文件名是avatar.png图片就显示不出来所以文件名和后缀一定要对。再次确认中文字符没有乱码页面标题、正文、按钮文字都正常。最后把浏览器窗口拉宽拉窄试试页面至少要保持不出现横向滚动条、文字不重叠。如果出现横向滚动条通常是某个元素的width设置过大检查有没有元素宽度超出了容器。还要记得检查控制台有没有报错。按F12打开开发者工具切到Console面板如果没有任何红色错误那说明JS和资源引用基本没问题。如果报错了把报错信息里的文件名和行号读出来去代码里对应位置检查。4. 常见问题与排查技巧实录4.1 页面打开一片空白或乱码这是第一次作业遇到最多的问题。页面空白通常有几个原因文件后缀名不是.html而是.html.txtWindows系统默认隐藏了文件的扩展名导致你实际创建的是文本文件Windows下一定要把查看 - 文件扩展名勾选打开确认文件名后缀正确文件编码不对HTML文件应该保存为UTF-8格式如果你从Word或某些默认编辑器复制粘贴过内容编码可能变成其他格式然后用记事本另存为UTF-8即可引用的CSS或JS文件路径写错了导致样式没加载、JS没执行但页面本身HTML结构还在不至于完全空白。乱码问题几乎总是由charset设置错误或文件本身存储为非UTF-8编码引起的。确保head里有meta charsetUTF-8并且文件确实以UTF-8编码保存。如果你在VSCode右下角看到的是GBK或GB2312单击它并在弹出菜单中选择通过编码保存选UTF-8即可。4.2 CSS样式完全不生效或部分不生效样式不生效第一件事是检查link标签的href路径。路径可以这样理解你在哪个页面引用文件就从哪个页面所在位置出发找目标文件。index.html在项目根目录css文件夹在根目录下要引用css/style.css才能找到。如果你用了/css/style.css这种以斜杠开头的绝对路径写法在本地file协议下有时会失效所以新手阶段最稳妥的就是相对路径。部分样式不生效常见原因是选择器优先级问题。比如你同时用了标签选择器p设置color: red又用了类选择器.text设置color: blue而这个p元素上恰好classtext那么最终显示的颜色是blue因为类选择器的优先级高于标签选择器。这个机制叫CSS优先级优先级从低到高大致是标签选择器、类选择器、ID选择器、内联样式。理解了这个你就知道为什么有些样式覆盖不掉了。还有一个非常容易被忽略的问题CSS属性写错了或浏览器不支持。比如background-color写成了background-color 后面没有值或者写成backgroundcolour这类拼写错误浏览器不会报错只会直接忽略这一条。所以如果样式没生效先把这条属性单独拎出来检查拼写和写法。4.3 JavaScript不执行或点击无效果JS最常见的坑是执行时机问题。前面说过如果script放在head里且没有defer页面还没渲染完就执行代码document.getElementById会返回null然后后面的代码全部报错。解决方式就是把script标签放到body结束标签之前。如果你用了Live Server却还是点击按钮没反应打开F12看Console如果看到类似Uncaught TypeError: Cannot read property addEventListener of null的报错通常就是这个问题。另一个常见问题是绑定了事件但元素被后续页面内容覆盖导致点击不生效。这在初学阶段反而很少见更常见的是你绑定的元素ID写错了。比如HTML里按钮的id是change-btn但JS里写成了document.getElementById(change_btn)一字之差就会找不到元素。养成习惯HTML里的id和class、CSS和JS里的引用命名要保持完全一致不要前后混用下划线和连字符。最后还有一个小细节如果你在本地双击打开文件file协议时JS正常但部署上线后不工作很可能和跨域有关。不过第一次作业阶段基本碰不到上线部署知道有这个坑就行提前了解以后用fetch和API时会用到。4.4 常见问题速查表问题现象可能原因解决方法浏览器打开显示源代码文件后缀是.txt开启系统显示扩展名重命名为.html页面中文乱码文件编码非UTF-8或charset缺失用编辑器重新保存为UTF-8确保meta存在图片不显示路径错误或文件名/后缀不匹配检查相对路径确认images里文件名和代码一致CSS一点效果都没有link路径错或CSS文件为空F12看Network里style.css是否404部分CSS样式被覆盖选择器优先级冲突用更具体的选择器或加!important临时测试JS一直报null错误脚本执行时DOM未加载把script放到body末尾或加defer属性点击按钮没有反应事件绑定失败或资源路径问题F12看Console报错逐行检查页面有横向滚动条元素宽度超出视口检查width和box-sizing避免内容溢出这张表你可以存下来以后做别的页面遇到类似问题也能直接套用。5. 作业提交与后续进阶方向5.1 提交前再检查一遍刚才说的是功能自测提交前还有几件事要单独确认一下。第一整个项目文件夹是不是干净整洁的不要随手把几个临时文件放进去。如果作业要求提交压缩包压缩之前请先双击index.html确认能正常展示不要一边压缩一边担心自己漏了什么文件。第二如果你用了图片最好确认图片版权没问题比如用自己拍的照片或者从免费图库下载的别随便从网上复制别人的图片这既是版权意识也避免图片链接失效导致页面变丑。第三代码格式化。在VSCode里按快捷键Windows是ShiftAltFMac是ShiftOptionF可以自动格式化代码让缩进和换行变得整齐。提交前格式化一次老师打开你的代码时印象分完全不同。这是一个非常低成本但很加分的好习惯从第一次作业就可以开始养成。第四也是我一直强调的在代码关键处加一点注释。注释不是给机器看的是给人看的本质上是为了让阅读你代码的人包括未来的自己快速理解你的思路。第一次作业不需要每行都注释但至少在HTML的大区块、CSS的主要模块、JS的事件绑定处写上简短说明这能体现你确实理解了这段代码的作用。5.2 完成第一次作业后接下来学什么到这里第一次作业已经完成了你的web前端之路也算正式起步了。但坦白讲这只是一个非常小的起点。第一次作业做完后你会自然地遇到一个问题接下来学什么我在热搜词里看到不少前端学习路线、前端面试题、前端项目相关的内容这里给你一个比较务实的路线建议。如果你当前还在打基础阶段下一步应该把CSS布局练熟。flex布局和grid布局是现代CSS最核心的布局方式你第一次作业里可能只用到了简单的上下排列但实际页面的复杂布局基本都是靠flex和grid来完成的。建议你去freeCodeCamp或MDN上系统的过一遍连做十几个小练习把水平和垂直居中、flex的justify-content和align-items各种取值都彻底搞清楚。JavaScript方面学到了刚才那种点击事件之后你应该继续学数组和对象的操作学习怎么遍历数据并动态生成页面内容这叫DOM动态渲染。学到这里你就可以做一个小的待办事项列表、一个简单的计算器、一个随机抽奖页这些练习比第一次作业稍复杂但已经能让你真正体会到用数据驱动页面是怎么回事。等你对原生三件套有了比较扎实的基本功再考虑接触框架。如果到那时候你还记得第一次作业时我说别用框架你就能理解这句话的分量和用意了。到时候学Vue也好、React也好你会有更清晰的判断力因为你对底层的工作方式已经有了直观感受学框架就是原来是把这个过程封装好了。另外热词里还有nginx部署web项目、web项目国际化、企业级web开发之类的进阶方向这些暂时不用急等你把基础打好、能独立做出几个像样的页面之后再去了解这些概念会更容易理解。前端这个领域焦虑来源永远是知识太多学不完但只要你按着基础 - 布局 - 交互 - 框架 - 工程化这个顺序一步一个脚印走你会发现在第三个阶段左右你已经能自己判断该学什么了。6. 从第一次作业里学到的三件最重要的事做完第一次作业我个人觉得比页面本身更值钱的是你开始建立起来的三层认知。第一层是调试意识。你不再是写代码 - 祈祷它能跑而是开始有方法地排查先看控制台报错再检查路径再看优先级最后查文档。这个能力比任何一门具体技术都值钱因为前端技术更新换代太快三年前的框架可能今年就过时了但调试能力永远适用。第二层是工程意识。你可能第一次意识到项目不只是代码还有文件夹的整理、文件命名、代码格式化、注释习惯这些看不见的工作。这些习惯越早建立你后面做复杂项目时就越省力。第一次作业就养成这些习惯成本是最低的。第三层是不迷信工具和热词的定力。第一次作业阶段你看到别人说AI生成的网页、微前端、组件库这些名词心里可能会痒。但你知道自己当前最重要的事情是什么——把最基础的HTML结构、CSS样式、JS交互亲手写出来。这个定力会伴随你整个职业周期让你任何时候都不会被花花绿绿的新技术名词带偏。最后再分享一个我实际带新人时经常用的检查方法做完一个页面后把它缩小到50%再放大到200%看看页面在不同缩放级别下是否还能保持正常浏览。这个简单的动作能暴露很多用F12查不出来的视觉问题。这个小技巧我从大学用到现在也算是我个人一直保留的一个习惯。你的第一次作业不追求完美但追求完整——完整的流程、完整的理解、完整的交付。能做到这点你已经比很多还没开始动笔的同学往前迈了一大步了。