web前端学习部落22群分享给需要前端练手项目
前端学习还是很有趣的,可以较快的上手然后自己开发一些好玩的项目来练手,网上也可以一抓一大把关于前端开发的小项目,可是还是有新手在学习的时候不知道可以做什么,以及怎么做,因此,就整理了一些前端项目教程,希望可以帮助正在学习前端的小伙伴。为了方便阅读,大概把前端可以做的项目分为三类:
- 游戏类
- 实用类
- 好玩类
然后依次推荐一些项目教程,想要学习的小伙伴可以看看~
游戏类
其实很多常见的小游戏都是纯前端开发出来的,比如曾经风靡的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 应用程序的相关知识。
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前端学习部落22群分享给需要前端练手项目的更多相关文章
- 【web前端学习部落22群】分享 碰撞的小球开源小案例
对于课程中的疑问,大家可以加 web前端学习部落22群 120342833和其他老师还有众多的小伙伴们进行沟通交流哦,群里还有不少技术大拿.行业大牛 可以一起探讨问题,我们也会安排专业的技术老师为大家 ...
- web前端学习部落22群开源分享 左边菜单导航
有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 <!DOCTYPE html> <html lang ...
- 立方体旋转 【web前端学习部落22群120342833】
效果: HTML部分: <body class="body"> <div class="rect-wrap"> <!-- // ...
- web前端学习部落22群 明白何谓Margin Collapse
明白何谓Margin Collapse 不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较 ...
- Python之路【第二十四篇】:Python学习路径及练手项目合集
Python学习路径及练手项目合集 Wayne Shi· 2 个月前 参照:https://zhuanlan.zhihu.com/p/23561159 更多文章欢迎关注专栏:学习编程. 本系列Py ...
- Python学习路径及练手项目合集
Python学习路径及练手项目合集 https://zhuanlan.zhihu.com/p/23561159
- Java学习路径及练手项目合集
Java 在编程语言排行榜中一直位列前排,可知 Java 语言的受欢迎程度了. 实验楼上的[Java 学习路径]中将首先完成 Java基础.JDK.JDBC.正则表达式等基础实验,然后进阶到 J2SE ...
- (转)Python学习路径及练手项目合集
转载自知乎 Wayne Shi,仅仅为了方便收藏查看,侵权删. 阶段1:入门知识 零编程基础的可以先从下面几个教程了解编程及环境入门知识.(已有编程基础直接从阶段2起步) 1. 编程新手指南2. Li ...
- PHP学习路径及练手项目合集
PHP 技术路径中包含入门知识.PHP 编程基础.PHP Web 框架.项目实战和项目进阶五个模块.模块中的课程将带着你逐步深入,学会如何使用 PHP 实现项目一个博客,聊天室,MVC框架及搜索系统等 ...
随机推荐
- Sunny-ngrok 解决外网访问内网问题
该博文已过时 请参考官网 http://www.ngrok.cc/ 一 .进入 网址 往下拉找到: 下载不同的版本. 二. 平台登陆地址:http://www.ngrok. ...
- Function构造函数
使用Function构造函数, 也能够创建函数, 和使用关键字function定义函数有几点区别: 使用function关键字这样定义函数: var f = function(x,y) {return ...
- [webpack] webpack-dev-server介绍及配置
webpack-dev-server是webpack官方提供的一个小型Express服务器.使用它可以为webpack打包生成的资源文件提供web服务.webpack-dev-server官方文档 w ...
- JavaScript数组的方法
push() :将参数加载到数组的最后,返回数组的长度 pop() :删除数组的最后一个元素,返回删除的值 shift() :删除数组的第一个元素,返回删除的值 unshift ...
- BZOJ 1503: [NOI2004]郁闷的出纳员
1503: [NOI2004]郁闷的出纳员 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 10526 Solved: 3685[Submit][Stat ...
- css-css权威指南学习笔记4
第三章 1.继承的值没有特殊性,甚至连0的特殊性都没有.所以改变超链接的样式一般需要独立声明,无法通过继承改变. 2.层叠--冲突的声明通过这个层叠的过程排序,并由此确定最终的文档表示.这个过程的核心 ...
- 将DataTable中的数据导出到Excel
public static void Export(System.Data.DataTable dt,NPOI.HSSF.UserModel.HSSFWorkbook workbook,string ...
- React Native 开发之 (01) 配置开发环境
一 React Native React Native 是由Facebook发布的开源框架,着力于提高多平台开发的开发效率 —— 仅需学习一次,编写任何平台.(Learn once, write an ...
- Js对map的操作
var map = {}; // 赋值 var key = "key1"; var value = "value1"; map[key] = value; // ...
- centos6 install mcrypt
Download the latest epel-release rpm from http://dl.fedoraproject.org/pub/epel/6/x86_64/ Install epe ...