web课程

第一次打开 Chrome 开发者工具，我以为自己误入了什么黑客界面。密密麻麻的 <div> 套 <div>，像俄罗斯套娃，也像一锅没搅开的芝麻糊。那门 web 课程的第一周，作业是“用 HTML 和 CSS 还原一个静态页面”。我盯着老师给的截图——一个灰底白字的卡片，圆角、阴影、居中。心想这有什么难。结果调了三个小时，那个卡片要么在屏幕左边倔强地贴边，要么阴影浓得像煤灰。

后来才明白，web 课程最值钱的地方，不是教会你写标签，而是逼你面对一个残酷事实：浏览器根本不关心你的“预期”。你写 margin: 0 auto; 以为它能居中，它偏不——除非你先把父容器的宽度或者 display 属性捋清楚。这种“代码和视觉不同步”的挫败感，贯穿了整个学期。但也正是它，让我开始用另一种方式思考：页面不是画出来的，是“流”出来的。

老师没直接给答案，而是在群里丢了一句：“去查一下 body 的默认 margin。” 我一试，果然。浏览器给 body 加了 8px 边距，整个卡片被挤歪了。那种“原来如此”的瞬间，比任何教程都管用。后来我养成了一个习惯：遇到布局问题，先打开 Elements 面板，看看到底是谁在捣乱。这比死记硬背 CSS 属性有用得多。

课程中段开始碰 JavaScript。之前写 HTML 像摆积木，写 CSS 像化妆，到了 JS 直接变成“给积木装大脑”。第一个小项目是做待办清单。我兴冲冲地写了个 addEventListener，结果点击按钮没反应。控制台报错：Cannot read property 'value' of null。查了半天，发现 querySelector 写错了类名——我把 .todo-input 写成了 .todo-imput。一个字母，卡了一晚上。这种错误在 web 开发里太常见了，常见到后来我学会自嘲：写代码就是不断给自己挖坑，再哭着填上。

“你觉得你是在写代码，其实你是在和浏览器的默认行为谈判。”

课程后半段涉及响应式设计。老师要求我们不用框架，手写媒体查询。我一开始很不屑，觉得 @media 不就是换个宽度吗。直到我把一个三栏布局在手机上挤成一条缝，文字竖着排，图片被裁得只剩半张脸。那一刻才意识到，web 课程真正教的是“约束下的表达”。屏幕就那么大，用户手指就那么粗，你得在有限的空间里把信息说清楚。这跟写文章有点像——字数越少，越难写。

结课作业我做了一个小型的个人书签管理器。功能很简单：添加链接、分类、删除。但为了让它“不那么丑”，我花了两天调间距、调字体、调 hover 效果。最后交上去，老师回了一句：“交互逻辑没问题，但你的删除按钮为什么放在左上角？” 我愣了一下，才发现自己一直用 Mac 的触控板，习惯从左上角开始扫视，却忘了大多数用户右手拿手机。这个细节没人教，是踩过坑才记住的。

现在回头看，那门 web 课程没让我成为什么前端高手。我依然会写错选择器，依然会被 flex 和 grid 搞混。但它给了我一个底层的视角：任何一个网页，拆开来看都是盒子、文字、图片和事件。你看到的漂亮界面，背后都是无数个 display: flex; 和 position: relative; 堆出来的。这种“看穿”的感觉，比学会某个框架更让人踏实。

如果你也在学 web，别急着追新东西。先把一个静态页面写到自己满意，再把一个按钮的点击事件调通。那些最基础的东西，往往藏着最多的坑，也藏着最多的“原来如此”。