20-个前端练手项目合集
20 个前端练手项目合集
最近有很多小伙伴反应 ——
“ 刚学前端，学完了 HTML、 、JS 三大件就没事干了，有没有适合刚入门小白的练手项目呀？”
今天就给大家带来 20 个适合新手的前端练手项目，由浅入深、层层递进，内容也非常有趣（以游戏为主），具体项目如下：
如果你还没有前端基础，推荐从这 3 门课开始学起 ——
基础阶段：
1. HTML5 简明教程
课程将从网站的基础概念开始，带你了解其运行机制。然后，我们会学习 HTML 基础知识，了解各种常用标签的意义以及基本用法。此外，课程还会涉及 HTML5 的内容，这是 HTML 的最新标准，它添加了一些新的语法特征。
课程地址：
2. CSS3 简明教程
CSS 层叠样式表用来描述 HTML 文档的呈现，是前端开发过程中一项重要的知识技能。课程从最基本的 CSS 概念开始，逐步深入，教你学会如何使用 CSS 同时控制多重网页的样式和布局。同时，课程还会涉及最新版本 CSS3 的内容，带你掌握新的标准化组件。
课程地址：
3. JavaScript 基础入门
课程从什么是 JavaScript 开始，一步步讲解 JavaScript 基础语法、关键特性、JSON、WebAPI 等知识点。内容将会涉及网页窗口交互的方法以及通过 DOM 进行网页元素的相关操作。
课程地址：
基础项目：
1. 纯 CSS 打造网页版「大白」
本课程利用 HTML 和 CSS 来打造 《超能陆战队》里的 “暖男”— 大白。通过本实验可学习如何用 HTML 结合 CSS 来设计高端大气上档次的图，并了解 HTML 布局，CSS 构建对象样式。
课程地址：
2. HTML5 实现 2048 游戏
本课程基于 HTML+CSS+JS+jQuery 实验网页版 2048，你能学到 Web 应用程序的开发流程，从布局，初始化到编写游戏逻辑，以及如何让应用在移动端自适应以应对各种大小的屏幕。
课程地址：
3. HTML5 实现拼图游戏
本课程基于 HTML5 实现网页版的拼图游戏。实现过程中将涉及到 HTML5，CSS3 及 JavaScript 相关知识。完成这个项目，可以进一步扎实前端基础知识。
课程地址：
4. 网页版别踩白块游戏
本课程使用最基础的 HTML+CSS+JavaScript 实现网页版别踩白块游戏，通过完成这个简单有趣的游戏，可以实践你的前端技能。
课程地址：
5. HTML 实现扫雷游戏
本课程带领大家实现经典小游戏扫雷，你可以通过实践 JavaScript 和 CSS 等基本的 Web 开发知识，学习如何对游戏中的对象进行抽象和封装。
课程地址：
6. HTML5 实现刮刮乐游戏
本课程使用 HTML5 来完成 “刮刮乐” 的刮奖效果。HTML5 是 HTML 的第 5 代版本，也是目前最新的版本，同时本课程还用到 JavaScript 相关技术来完成。学习本课程有助于巩固前端知识。
课程地址：
7. 基于 CSS3 实现抽奖大转盘
每到节日，各种的抽奖活动数不胜数，大奖很丰厚，但是，获奖的概率总是很小。我们可以制作一个属于自己的抽奖转盘，探寻抽奖过程的奥秘。本项目课将会教大家如何使用 CSS3 来制作抽奖转盘，也会用到 HTML 及 jQuery 的一些基础知识。
课程地址：
8. HTML5 Canvas 实现放大镜效果
本课程基于 HTML5 的 canvas 实现了放大镜效果。主要依靠 canvas 中的 drawImage () 函数，这节课也主要讲解这个函数的具体用法，希望能通过实现这个简单的项目来让大家初步认识 canvas ，学会基本的 canvas 操作。
课程地址：
9. jQuery 实现购物车功能
本课程使用 jQuery 实现在购物车中添加删除商品，合计商品总价的功能。完成学习，你可以熟练操作 jQuery 实现更多的功能。
课程地址：
10. CSS 实现红包模糊效果
微信朋友圈里的红包照片，还有 iOS 带来的「毛玻璃」菜单效果都很吸引眼球，这次我们就尝试用熟悉的 CSS3 来实现这个效果。
课程地址：
11. HTML5 Canvas 实现小游戏
本课程基于 HTML5 的 canvas 实现了一个小游戏，着重介绍了 HTML5 游戏开发的流程及游戏开发中需要处理的东西。对 Web 游戏开发感兴趣的同学可以通过这个项目实践 HTML5 及 JavaScript 基础知识。
课程地址：
12. jQuery 实现图片瀑布流效果
本课程基于 jQuery 实现近几年很流行的瀑布流图片无限加载，另外我们会学到如何模拟后台提供 JSON 格式数据。本课程较为简单，适合刚入门前端的同学作为练手项目。
课程地址：
13. HTML5 实现本地图片裁剪
本期实验意在实现利用 HTML5 的 canvas 技术，结合 HTML5 的 File AP I 来实现图片的本地裁剪。通过本实验将学习到如何结合 HTML5 与 JavaScript 编写简单的单页应用。本课程难度一般，适合刚入门前端的同学，需要了解 cavas 并且有 JavaScript 基础。
课程地址：
14. JavaScript 实现代码压缩成圣诞树
课程主要通过 JavaScript 实现了一个工具包，运行工具包，可以将你的 JS 代码压缩成圣诞树，压缩后的代码还可以正常运行！通过课程，你的 JS 的将掌握的更加熟练。
课程地址：
- PHP 实现校花评比排名项目
本课程实现一个校花评比项目，在项目中使用到了埃洛等级分系统算法。用户在前端页面每次点击随机排列的两张美女图片，选出颜值较高者，共十次选择，最后由后台计算出各个图片的颜值，得出评比结果。课程使用了 PHP 实现评比算法，cookie 记录用户点击次数，jQuery 的简单使用。
课程地址：
16. jQuery 实现图片轮播效果
轮播图是在各大网站中经常见到的图片展示形式，本课程基于 HTML+CSS+JavaScript+jQuery 实现图片轮播，这是一个很容易上手的前端入门练习项目。
课程地址：
17. Flask 实现简单聊天室
Web 2.0 时代，即时通信已经成为必不可少的网站功能，那实现 Web 即时通信的机制有哪些呢？在这门项目课中我们将一一介绍。最后我们将会实现一个基于 Server-Sent Event 和 Flask 简单的在线聊天室。本课程难度中等，属于 python 中等的项目课程，需要有 Flask 和 Python 基础。可以在完成一系列简单的项目课之后，尝试突破本课程中的一些难点。
课程地址：
18. HTML 实现 Markdown 编辑器
本课程将通过纯前端打造一个实时 markdown 编辑器，用到的库或框架主要有 marked，Ace，highlight.js 及 Bootstrap。通过本完成本项目，将实践 web 应用程序开发的相关知识。
课程地址：
19. Node.js 实现私人笔记本
本实验将教大家使用 Node.js 技术完成一个私人笔记本项目，每个注册用户可在自己的私密空间中书写自己的心情和感悟。通过 Express 学习 Node.js Web 开发基础。本课程难度一般，属于初级课程，适合具有 Node.js 基础的用户，学习 Node.js Web 开发。
课程地址：
20. jQuery 实现特效导航菜单
本课程中我们将完成一个完整的网站导航栏，项目很简单，但是非常具有实用性，适合刚入门的小白练手。项目主要用到了 CSS 和 jQuery 的动画方法。
课程地址：
???? ???? ???? 点击 阅读原文，获取「前端项目合集」