不要再说找不到前端项目练手了！

前端学习仍是颇有趣的，能够较快的上手而后本身开发一些好玩的项目来练手，网上也能够一抓一大把关于前端开发的小项目，但是仍是有新手在学习的时候不知道能够作什么，以及怎么作，所以，实验楼就整理了一些前端项目教程，但愿能够帮助正在学习前端的小伙伴。

为了方便阅读，大概把前端能够作的项目分为三类：

• 游戏类
• 实用类
• 好玩类

而后依次推荐一些项目教程，想要学习的小伙伴能够看看~

游戏类

其实不少常见的小游戏都是纯前端开发出来的，好比曾经风靡的204八、别踩白块啊等等，简单有趣，对于初学者来讲，这些小游戏是很是不错的练手项目。

网页版2048

项目经过搭建一个网页版的 2048 ，让你们学习 web 应用程序的开发流程、以及如何让应用在移动端自适应处理以应对各类大小的屏幕，布局和初始化，编写游戏的逻辑、实现让它能移动，断定结果。

是否是和咱们玩的2048如出一辙呀，O(∩_∩)O~

HTML5两步实现拼图游戏

项目使用HTML5和css3实现的九宫格拼图游戏。只要两步既能够实现炫酷的效果和动画。详细的讲解，让你清楚地知道每一句代码的做用。

本身开发完以后还能够玩玩，告诉你，你能够开发它，可是玩可不必定行哦~

网页版扫雷

项目实现一个Web版本的扫雷游戏，经过该项目将学习并实践 JavaScript 和 CSS 等基本的Web开发知识。

看着就有想玩的冲动啊，有木有~

网页版-别踩白块游戏

项目用最基础的html，css，以及原生的JavaScript实现一个网页版本的“别踩白块”游戏。

作完后能够试着玩玩，看看速度如何，太快或者太慢均可以随时调整。

HTML5实现抓怪物小游戏

项目利用 HTML5 的 Canvas 特性，结合 js 来开发一个抓小怪物的小游戏。从中咱们能够学习到如何用 HTML5 来构建一个 WebApp。

JavaScript打地鼠游戏

项目为打地鼠，是你们耳熟能详的一款经典的小游戏，用前端技术来实现这个游戏，简单有趣。

JavaScript按键控制坦克移动

项目使用javascript按键控制坦克在网页上移动，经过使用很简单的，清晰明了的代码使坦克在页面上平滑的移动，经过学习，能够掌握javascript的按键操做，从而让页面更好的与用户互动。

看效果图很简单，可是只要稍微发挥你的想象力，把坦克改为其余的物体，就能够变成其余的小游戏了，好比加一个迷宫，就是走出迷宫游戏了。

实用类

前面介绍了前端开发游戏的项目教程，固然前端还能够开发一些很是实用的功能，好比小到网站的导航条啊，一个抽奖页面啊等等，这些在网页上常常看到的页面展现功能，基本都是前端开发出来的，所以，下面介绍一些比较实用的前端项目教程。

CSS与JavaScript实现选项卡

这个项目实现前端网页常常用到的 Tab 选项卡效果。主要用到 HTML、CSS 和 JavaScript 技术，比较适合前端入门练习。

一块儿来抽奖吧

一到各类节假日就各类的抽奖活动数不胜数，大奖很丰厚，可是，你懂得。这个项目教你们使用CSS3来制做一个抽奖转盘，一窥抽奖转盘的秘密。

Java和WebSocket开发网页聊天室

WebSocket是HTML5一种新的协议，它实现了浏览器与服务器全双工通讯，这个项目使用WebSocket来开发网页聊天室，前端框架会使用AmazeUI，后台使用Java，编辑器使用UMEditor。

瀑布流加载图片墙

项目经过瀑布流加载图片墙，实现无限图片展现的效果，相似百度图片同样的加载方式，体现图片的交错排列。从中学习在没有后端开发者提供数据的背景下，由咱们前端本身模拟数据及数据接口，本身就能给本身提供任何本身想要的数据。

canvas实现放大镜效果

项目由 HTML5 的 canvas 实现放大镜效果，和淘宝图片放大器相似的效果，主要依靠 canvas 中的 drawImage() 函数，但愿能经过实现这个简单的项目来让你们初步认识 canvas ，学会基本的 canvas 操做。

用CSS和jQuery打造一个简单的图片编辑器

项目利用 CSS 的 filter 和简单的 Jquery 代码来实现一个简单的图片编辑器包括对图片的透明度，黑白，图片亮度等调节。

120行代码实现简单的即时搜索

项目利用 Meteor 和 MongoDB 实现一个简单的即时搜索服务。经过本项目将学习到 Mongodb 数据库的操做，Meteor 快速制做 Web App。

纯前端打造实时markdown编辑器

项目经过纯前端打造一个实时 markdown 编辑器，用到的库或框架主要有 marked，Ace，highlight.js，Bootstrap。经过本实验学习如何编写一个 web 应用程序的相关知识。

HTML5 本地裁剪图片

项目利用HTML5的canvas技术，结合HTML5的File API来实现图片的本地裁剪。经过本实验将学习到如何用 HTML5编写网络应用。

CSS3实现“红包照片”模糊效果

微信朋友圈里的红包照片，还有 ios7 带来的“毛玻璃”菜单效果都很吸引眼球，该项目就尝试用熟悉的 CSS3 来实现这个效果。

使用 Electron 编写跨平台桌面应用

该项目主要学习如何用 Electron 配合 JavaScript 等 web 技术建立跨 Linux/Windows/macOS 平台的桌面应用。

好玩类

前端还能够用比较简单的方式实现一些可爱的东西，好比暖男-大白，萌宠-小黄人等等，只要你能想到的，几乎均可以用前端来实现，下面就介绍几个项目教程。

打造网页版「大白」

该项目利用 HTML 和 CSS 来打造《超能陆战队》里的 “暖男” -「大白」。学习如何用 HTML 结合 CSS 来设计高端大气上档次的图，并了解 HTML 布局，CSS 构建对象的样式。

JavaScript实现玫瑰花

项目学习如何在网页中如何使用JavaScript语言实现一朵漂亮的玫瑰花。其中会用到html，css，javascript等技术。

这个玫瑰花的最后效果是慢慢开放和显现出来的，很浪漫的赶脚啊~

SCSS（SASS）画小黄人

项目经过 SCSS（SASS）画一个会眨眼睛的小黄人，主要学习 CSS3。其中将涉及 SASS 安装，代码的编写，以及绘制小黄人的相关结构逻辑。

看完以上3个项目，你能想象都是用前端来实现的么，O(∩_∩)O~

最后

以上呢，实验楼介绍了那么多、辣么多的前端开发项目，若是你还说你找不到项目，不知道作什么，没有完整的教程，那么就是你的不对了，因此，挑选一个感兴趣的项目开始学习吧！