入土系列 | 前端入门项目实战 (一)

之前很多学习前端的小伙伴和小鹿反馈说有没有实战项目练手，跟着视频看了很多项目看了一遍感觉作用不是很大，而且平常学习中只看一些理论知识看一遍就忘一遍。

在前期前端学习中，我也是很苦恼呀，但是后来自己逐渐的找一些或者仿照一些项目去做，虽然这个过程遇到很多困难，只能硬着头皮去解决，但是在这个过程中，逐渐提高了解决问题的能力，以及一个项目如何去规划，你的编程思想和编程思维也得到了极大的锻炼，这也是我后期学习编程不再去追求看视频教程。

所以借助周末的时间，和群里的小伙伴商量了下，准备从最基础的页面布局，找了几个经典的项目去练手，所有的素材，页面设计，以及参数小鹿都给标注清楚，直接拿来根据设计图直接上手，看你脱离了视频，能否独立完成这十个项目，难度系数逐渐增加。

打算一天更新一个或者两个更新一个实战项目，平均这种项目对新手来说，90 分钟为标准，熟练的开发人员几分钟就搞定，有什么问题欢迎来小鹿前端群和大伙一起交流。

实战项目一：个人站点制作

设计图和素材，都放在公众号后台回复：【QDSZ1】即可获取！

小鹿把原型设计图上的都标注好了，如下：

适宜人群

如果你是个前端大佬，就不必继续往下看。如果你是一个前端新手，前期想通过实战项目巩固一下自己基础，或者通过本次实战进行学习，都是可以的。

由于不同小伙伴水平不同，可以使用 div+css 布局，也可以使用 Flex 进行布局，使用 vue 进行组件化开发也是可以的，虽然有点多余和大材小用，毕竟是个个人实践，通过本次实战，能够学到技术是最终目标。

也欢迎后台小伙伴练习一下，毕竟不会前端的后台不是一个好后台，很多公司都不配有前端，后台开发人员前后端一把嗦，是时候让你展现真正的技术了。

设计要求

1、建立网站根目录和相应的文件夹，所有文件、文件夹命名及目录结构符合网站建设规范。

2、制作 index.html 网页，效果如上图所示，网页的标题为：你的姓名+的个人网站。如：张三的 index.html 网页的标题应该为：张三的个人网站。

3、设置网页中默认字体大小为12px，行高为 200%。

4、布局形式无限制，div + css 或者 flex 或者其他布局都是可以的，根据自己情况而定。

5、导航栏菜单做成空链接（链接到#），导航菜单超级链接的状态（a:link和a:visited）：字体大小为16px 加粗，没有下划线，当鼠标移动到上面时的状态（a:hover）：颜色变为#F00 ，没有下划线。

6、站长介绍 、站长相册 字体大小为16px，粗体。Introduce、Photo 字体颜色为 #900， 字体大小为16px。

7、一下边框为1px,实线，颜色为#CCC，

8、底部版权区域表格上边框线为1px,实线，颜色为#CCC，背景颜色为#e8e8e8。

小结

完成任务的小伙伴可以在留言区打卡，监督一些自己能不能完成十天难度逐渐递增的实战项目。

项目中遇到什么问题，欢迎加入小鹿大大前端技术切磋群和 200 名小伙伴一起切磋，切磋，看谁更硬核。