从零开始打造你的数字门面

`就是个万能容器，跟乐高的基础积木块似的。有次我非要用刚学的CSS动画做旋转菜单，结果整个页面转得比陀螺还欢实，最后只能哭着按Ctrl+Z。

二、审美比技术更难练

见过太多技术宅做出来的网页——功能强得像航天飞机，颜值却停留在拖拉机水平。这里分享个血泪教训：千万别相信自己的直男审美！当年我觉得荧光绿配玫红特赛博朋克，直到被学设计的表妹看到，她那个嫌弃的眼神我现在都记得。

现在我会强迫自己做两件事： 1. 每天抽20分钟刷设计网站，像追剧一样培养感觉 2. 偷师——啊不是，"参考"大厂作品时，用开发者工具扒开看人家配色代码 最近发现个有趣现象，越是简洁的网页越难做。就像做减法比做加法更需要功力，你们觉得呢？

三、移动端才是主战场

去年帮亲戚改婚纱摄影网站，在电脑上美得像杂志大片，结果用手机打开——好家伙，新郎的脸都被挤成马赛克了！这才痛定思痛研究响应式布局。现在我做网页都习惯"移动优先"，就像写文章先列提纲。

有个取巧的办法：用Chrome的设备模拟器边做边看，比做完再返工强十倍。说到这个，不得不提CSS的媒体查询，虽然写起来像在跟浏览器讨价还价："如果屏幕宽度小于768px，你就把导航栏改成汉堡菜单啊！"

四、那些没人告诉你的小秘密

1. 字体加载慢？试试`font-display: swap`，文字会先显示默认字体再优雅替换，就像化妆前后的渐进效果 2. 图片优化用WebP格式，体积能瘦身三分之二，但记得准备JPEG后备方案 3. 表单验证别全靠JavaScript，HTML5自带的`required`和`pattern`属性超好用

有次我熬夜改bug，发现页面抽搐是因为没写`meta viewport`标签，气得把咖啡都笑喷了。这些经验手册上可不会写，都是头发换来的啊！

五、工具链选择困难症

现在工具多得像火锅店的调料台，我的原则是：新手期就用最朴素的记事本+浏览器，等被虐够了再上VS Code这类神器。插件装太多反而容易分心，有段时间我的编辑器花哨得像圣诞树，结果代码没写几行，光折腾主题配色了。

调试工具F12按烂了都不丢人。我至今保持个习惯：看到有趣的网页就右键"查看源代码"，跟美食家偷师厨艺似的。最近迷上了某个开源项目的代码排版，人家连注释都写得像散文诗，果然高手都在细节里较劲。

写在最后

网页制作最迷人的地方，是能立即看到成果。哪怕只是给段落加个阴影效果，刷新浏览器那瞬间就像魔术师揭晓戏法。虽然现在有各种傻瓜式建站工具，但亲手编写代码的感觉，就像自己种菜和买超市蔬菜的区别——你知道每个像素是怎么长出来的。

最近在教邻居小孩做个人主页，看他笨拙地调整`padding`数值时，突然想起自己当年的样子。这行当就是这样，昨天还觉得Flex布局是天书，今天已经对着Grid布局摩拳擦掌了。对了，你们初学网页时闹过什么笑话？我第一个网页把`
`标签写了二十多个就为了撑开页面，现在想起来脚趾都能抠出三室一厅...