web前端30个新手项目列表，学完即可上手做项目

男娘i 2023-06-25 10:22 17阅读 0赞

此篇文章推荐有想法学习前端，已经上路琢磨web前端的朋友们。

之前很多朋友跟我说，自学编程的时候，总是摸不清头脑，一大推问题需要解决，种种书籍需要去啃，字符、单词都需要去记。就感觉要费上很多时间，居然担忧青春饭是否能吃到？

![format_png][]

实际上，是实战过少项目，或者没有自己做过。凡事都是从0到1的过程，从1到100就非常简单了

小编为各位想加入程序猿大军，加入前端的朋友们整理了30个实战项目列表，有非常详细的教程。选择几个进行学习，或者发挥自己的想象去完成自己的项目

**还有属于小编收集精选的整套自学视频，获取方式在文末**

**欢迎大家装载+分享。给需要学习的朋友们**

项目列表：

1.【HTML5 canvas龙卷风动画制作】

2.【CSS3 七夕表白页面特效】

3.【CSS 20行代码见证七色花动画】

4.【HTML5 敲出一个牛逼的雪景】

5.【CSS3特效拉窗帘】

6.【HTML5游戏项目】

7.【英雄联盟官网特效】

8.【web动画形成原理-滚动】

9.【天猫官网必用技术——懒加载】

10.【CSS3炫酷的轮播特效】

11.【css实现点击图片切换】

12.【CSS3大型企业官网】

13【WEB烟雾梦幻特效】

14.【解析渲染原理-解析渲染原理】

15.【实现3d炫酷相册】

16.【纯html css 打造女神轮播图】

17.【植物大战僵尸网页版】：

![format_png 1][]

18.【阴阳师游戏角色动态展示卡】：

![format_png 2][]

19.【绝地求生官网页面制作】：

![format_png 3][]

20.【canvas喷泉效果】

21.【video音频效果】

22.【鬼畜奔跑吧小绵羊】

23.【网页精灵宠物】

24.【RequireJS来制图】

25.【网页制作贪吃蛇】

26.【vue动画】

27.【vue音乐播放器】

28.【React电影项目】

29.【H5实现一个微信小游戏】

30.【web安全技术】

![format_png 4][]

# 文末 #

资料视频教程领取方式：

原文：[https://zhuanlan.zhihu.com/p/100250058][https_zhuanlan.zhihu.com_p_100250058]

![format_png 5][]

![format_png 6][]

![format_png 5][]

![format_png 6][]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xODA5MDc0NC01ZTIwMzQ3MDEyZjUwZGI4?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xODA5MDc0NC01MDRhMDZlZGU1YzRmOGVj?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xODA5MDc0NC04MjUyYWNkNDY1NjdjZDRk?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xODA5MDc0NC02MTU4N2VkYzVkOTRlOTU1?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xODA5MDc0NC0zMGIyYjc5MDQ2OTQyMDhh?x-oss-process=image/format,png
[https_zhuanlan.zhihu.com_p_100250058]: https://zhuanlan.zhihu.com/p/100250058
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xODA5MDc0NC05YmUwNjU1MjNlZTI3Yzhl?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xODA5MDc0NC03ODg2ZTZkZmQ3MjNkMTdi?x-oss-process=image/format,png