web前端还是很有趣的，可以较快的上手然后自己开发一些好玩的项目来练手，网上也可以一抓一大把关于前端开发的小项目，可是还是有新手在学习的时候不知道可以做什么，以及怎么做，因此，实验楼就整理了一些前端项目教程，希望可以帮助正在学习前端的小伙伴。

为了方便阅读，大概把前端可以做的项目分为三类：

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

然后依次推荐一些项目教程，想要学习的小伙伴可以看看~

web前端实战项目案例 获取方式：转发关注+私信菜菜 “ 教程 ”

游戏类

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

网页版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~

web前端学习资料 获取方式：转发关注+私信菜菜 “ 教程 ”