去年帮一个做插画的完善网站朋友改个人网站，打开首页加载了7秒。个人图片全是教学3MB以上的PNG原图，轮播图自动播放，设计背景还有一段循环视频。完善网站她跟我说“访客平均停留不到20秒”。个人这不是教学设计问题，是设计根本没想清楚网站给谁看。

个人网站教学最容易掉进的完善网站坑，是个人把“好看”当成第一目标。我见过太多教程一上来就讲配色、教学字体、设计动效，完善网站结果学员做出来的个人页面像模板套壳，内容却空得能跑马。教学教学设计应该反过来：先逼学员回答三个问题——谁来看？他们想找什么？你希望他们看完做什么？插画师的网站，访客八成是潜在客户或编辑，他们要找的是作品风格、报价范围、联系方式。那首页就该直接放三组代表作，尺寸控制在200KB以内，联系方式固定在侧边栏。

技术选型上，别让学员从零手写CSS。我教人做个人网站，第一步永远是打开VS Code装Live Server，然后扔一个现成的HTML骨架过去。让他们先改文字、换图片、调颜色，看到浏览器里实时变化。有个学员是摄影师，之前用某建站平台拖拽了三天，照片顺序都调不明白。换成手改代码后，两小时就上线了第一版。为什么？因为代码给了确定性的反馈——改哪个标签，页面就变哪块。这种掌控感比任何可视化编辑器都直接。

响应式设计要教，但别一上来就讲媒体查询。先让学员把浏览器窗口从宽拖到窄，看自己的页面怎么崩的。有人会发现导航栏挤成两行，有人发现图片溢出屏幕。这时候再引入max-width: 100%和flex-wrap，他们才记得住。我自己的博客用了三年才加上暗色模式，因为最初教学设计里根本没考虑“用户可能晚上看”。后来加了个简单的CSS变量切换，代码不到20行，体验提升却很明显。

性能优化是个人网站教学里最被低估的部分。很多教程教完HTML/CSS就结束了，学员传上去发现打开慢，又不知道从哪查。我要求每个学员必须做三件事：图片转WebP格式、用loading="lazy"延迟加载、把字体文件从Google Fonts换成本地woff2。有个做播客的学员，首页原来加载了6个字体文件，改完之后首屏时间从4.2秒降到1.1秒。他跟我说“原来不是服务器慢，是我自己塞了太多东西”。

教学设计里还得留一块“维护”环节。个人网站不是做完就扔那儿的。我让学员每季度检查一次：死链有没有、联系表单还能不能发邮件、SSL证书过期没。有个学员的网站上线八个月后，留言板被垃圾评论灌了几百条，因为他忘了关匿名提交。这种事教程不会写，但真实世界里一定会发生。

最后说个反直觉的观察：个人网站做得越“完整”，更新频率越低。我见过太多人花两周打磨首页动效，结果三个月不写一篇新文章。教学设计应该鼓励“最小可用版本”——先上线一个能看的页面，哪怕只有一页，哪怕样式粗糙。有个学员用纯文本加几个链接做了个极简站，每周更新读书笔记，半年后反而积累了稳定读者。他的原话是“网站丑没关系，内容在动就行”。这话糙，但比任何设计原则都管用。