前端新手的第一份作业：3天做出一个响应式个人主页

前端新手的第一份作业：3天做出一个响应式个人主页

不管你用了多少时间学HTML和CSS，真正的学习都是从开始做一个页面开始的。以下是3天做一个个人主页的计划。

第1天：HTML骨架

用语义化标签搭建页面结构：header放个人简介和导航，main分三块区域——作品展示、技能清单、联系方式，footer放版权和社交链接。

核心就两个原则：用对的标签做对的事（nav是导航，不是div），保持层级清晰。

第2天：CSS布局与美化

先用Flexbox和Grid把页面布局搭好。Flex适合一维排列（导航栏），Grid适合二维布局（作品展示网格）。

然后上样式：配色不超过3种主色，字体用系统默认栈（system-ui），间距保持一致性。

做完这步，你的页面应该已经能看了。

第3天：响应式与部署

加一个媒体查询断点：在768px以下切换成单列布局。让图片在手机上自动缩放。

最后部署到Vercel——连上GitHub仓库，点一下导入，3分钟上线。

进阶建议

做完个人主页后，给它加一个暗色模式切换（用CSS变量实现），再加一个平滑滚动导航。这些看似简单的功能正好覆盖了前端最核心的技能点。

写在最后

前端入门最难的不是技术，而是做完第一个页面之前的那段黑暗期。3天做一个页面，你就能看到自己在浏览器里创造出来的东西——这种成就感会让接下来的学习轻松很多。