昨晚凌晨三点，我盯着屏幕上那个怎么都对不齐的div，眼泪差点掉下来。真的，不是矫情，是那种被代码支配的恐惧。
这次实训，说实话，一开始我觉得就是做个静态页面，拖拖拽拽，两三天搞定。结果呢？现实给了我一记响亮的耳光。
先说选题吧。我想做个极简风格的个人博客，听起来很高级对吧？结果打开Figma，发现连配色都搞不定。选了个莫兰迪色系，结果背景灰得像是没擦干净的玻璃，文字白得像是没加阴影，读起来费劲得要死。这时候我才明白，好看真的不是随便选个颜色就行，那是审美在打架。
然后是技术选型。老师建议用Vue，但我怕麻烦，想试试原生JS加HTML5。心想着，能跑就行。结果写到响应式布局的时候，傻眼了。手机上看好好的，电脑上一打开，导航栏直接掉到屏幕底下去了。为了调那个Media Query，我查了百度，又去Stack Overflow翻英文，眼睛都快看瞎了。
记得有个下午，我在改一个列表页的间距。明明CSS里写了margin: 10px，但浏览器里就是显示20px。我怀疑是浏览器缓存，清了缓存，没用。怀疑是父元素有padding，检查了，没有。最后发现，是我在另一个文件里引用了重置样式的库，那个库把默认margin设成了0，但我没覆盖对。那一刻，我真的想砸键盘。
这就是网站建设实训过程报告里不会写的部分：那些崩溃的瞬间。
还有交互效果。我想加个鼠标悬停变色的效果，写了hover，结果在Safari上没反应。查了半天，发现是伪类顺序写错了，:link, :visited, :hover, :active，顺序不能乱。这种细节，书本上写得清清楚楚，但真到自己动手，脑子就像浆糊一样，完全记不住。
最痛苦的是图片优化。为了追求高清，我导出了几张4MB的PNG。页面加载速度直接崩了，打开要好几秒。老师说要压缩，我用了好几个在线工具，结果图片糊得像马赛克。最后没办法，只好去学WebP格式，又得装插件，又得改代码。这一套下来，半天没了。
不过，当最后那个页面在手机上完美展示，导航栏稳稳地吸顶，图片加载飞快，那种成就感，真的没法形容。就像自己亲手搭积木，虽然过程全是裂缝，但最后拼成了一座城堡。
这次实训让我明白，网站建设不是写代码那么简单。它涉及到用户体验、性能优化、视觉设计，甚至还要懂一点SEO。每一个像素的调整，每一行代码的优化，都是在和用户对话。
我也发现了自己的不足。比如对浏览器兼容性了解太少，比如对CSS Grid和Flexbox的理解还停留在表面。以后得多练，不能只满足于“能跑”，要追求“跑得漂亮”。
如果你也在做网站建设实训过程报告，别只盯着代码看。多看看用户视角，多想想如果我是访客，我会不会觉得难用。技术是骨架，体验才是灵魂。
最后，给同样在坑里的同学们一点建议：别怕报错，报错信息其实是在帮你。别怕慢，慢工出细活。还有，记得备份代码，别像我一样，改错了没保存，哭都没地方哭。
这趟实训，累是真累，但成长也是真快。希望我的这些踩坑经历，能帮你们少走点弯路。毕竟，头发已经够少了，别再因为低级错误掉光了。
加油吧，未来的前端大佬们。虽然路很难走，但风景真的不错。
