精华内容
下载资源
问答
  • 前端练手项目

    2019-03-26 21:06:34
    不要再说找不到前端项目练手了! 前端学习还是很有趣的,可以较快的上手然后自己开发一些好玩的项目练手,网上也可以一抓一大把关于前端开发的小项目,可是还是有新手在学习的时候不知道可以做什么,以及怎么做,...

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

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

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

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

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

    游戏类

    其实很多常见的小游戏都是纯前端开发出来的,比如曾经风靡的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~

    最后

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

     

    原文地址:https://www.cnblogs.com/shiyanlou/p/6069704.html

    展开全文
  • web-practice:前端练手项目
  • 20 个前端练手项目合集,个个都“吊炸天”!

    万次阅读 多人点赞 2020-05-15 19:16:40
    最近有很多小伙伴反应 ——“ 刚学前端,学完了 HTML、CSS、JS 三大件就没事干了,有没有适合刚入门小白的练手项目呀?”今天就给大家带来 20 个适合新手的前端练手项目,由浅入深、...

    最近有很多小伙伴反应 ——

    “ 刚学前端,学完了 HTML、CSS、JS 三大件就没事干了,有没有适合刚入门小白的练手项目呀?”

    今天就给大家带来 20 个适合新手的前端练手项目,由浅入深、层层递进,内容也非常有趣(以游戏为主),具体项目如下:

    如果你还没有前端基础,推荐从这 3 门课开始学起 ——

    基础阶段:

    1. HTML5 简明教程

    课程将从网站的基础概念开始,带你了解其运行机制。然后,我们会学习 HTML 基础知识,了解各种常用标签的意义以及基本用法。此外,课程还会涉及 HTML5 的内容,这是 HTML 的最新标准,它添加了一些新的语法特征。

    课程地址:

    https://www.shiyanlou.com/courses/43

    2. CSS3 简明教程

    CSS 层叠样式表用来描述 HTML 文档的呈现,是前端开发过程中一项重要的知识技能。课程从最基本的 CSS 概念开始,逐步深入,教你学会如何使用 CSS 同时控制多重网页的样式和布局。同时,课程还会涉及最新版本 CSS3 的内容,带你掌握新的标准化组件。

    课程地址:

    https://www.shiyanlou.com/courses/1237

    3. JavaScript 基础入门

    课程从什么是 JavaScript 开始,一步步讲解 JavaScript 基础语法、关键特性、JSON、WebAPI 等知识点。内容将会涉及网页窗口交互的方法以及通过 DOM 进行网页元素的相关操作。

    课程地址:

    https://www.shiyanlou.com/courses/1238

    基础项目:

    1. 纯 CSS 打造网页版「大白」

    本课程利用 HTML 和 CSS 来打造 《超能陆战队》里的 “暖男”— 大白。通过本实验可学习如何用 HTML 结合 CSS 来设计高端大气上档次的图,并了解 HTML 布局,CSS 构建对象样式。

    课程地址:

    https://www.shiyanlou.com/courses/328

    2. HTML5 实现 2048 游戏

    本课程基于 HTML+CSS+JS+jQuery 实验网页版 2048,你能学到 Web 应用程序的开发流程,从布局,初始化到编写游戏逻辑,以及如何让应用在移动端自适应以应对各种大小的屏幕。

    课程地址:

    https://www.shiyanlou.com/courses/62

    3. HTML5 实现拼图游戏

    本课程基于 HTML5 实现网页版的拼图游戏。实现过程中将涉及到 HTML5,CSS3 及 JavaScript 相关知识。完成这个项目,可以进一步扎实前端基础知识。

    课程地址:

    https://www.shiyanlou.com/courses/161

    4. 网页版别踩白块游戏

    本课程使用最基础的 HTML+CSS+JavaScript 实现网页版别踩白块游戏,通过完成这个简单有趣的游戏,可以实践你的前端技能。

    课程地址:

    https://www.shiyanlou.com/courses/306

    5. HTML 实现扫雷游戏

    本课程带领大家实现经典小游戏扫雷,你可以通过实践 JavaScript 和 CSS 等基本的 Web 开发知识,学习如何对游戏中的对象进行抽象和封装。

    课程地址:

    https://www.shiyanlou.com/courses/144

    6. HTML5 实现刮刮乐游戏

    本课程使用 HTML5 来完成 “刮刮乐” 的刮奖效果。HTML5 是 HTML 的第 5 代版本,也是目前最新的版本,同时本课程还用到 JavaScript 相关技术来完成。学习本课程有助于巩固前端知识。

    课程地址:

    https://www.shiyanlou.com/courses/133

    7. 基于 CSS3 实现抽奖大转盘

    每到节日,各种的抽奖活动数不胜数,大奖很丰厚,但是,获奖的概率总是很小。我们可以制作一个属于自己的抽奖转盘,探寻抽奖过程的奥秘。本项目课将会教大家如何使用 CSS3 来制作抽奖转盘,也会用到 HTML 及 jQuery 的一些基础知识。

    课程地址:

    https://www.shiyanlou.com/courses/82

    8. HTML5 Canvas 实现放大镜效果

    本课程基于 HTML5 的 canvas 实现了放大镜效果。主要依靠 canvas 中的 drawImage () 函数,这节课也主要讲解这个函数的具体用法,希望能通过实现这个简单的项目来让大家初步认识 canvas ,学会基本的 canvas 操作。

    课程地址:

    https://www.shiyanlou.com/courses/59

    9. jQuery 实现购物车功能

    本课程使用 jQuery 实现在购物车中添加删除商品,合计商品总价的功能。完成学习,你可以熟练操作 jQuery 实现更多的功能。

    课程地址:

    https://www.shiyanlou.com/courses/666

    10. CSS 实现红包模糊效果

    微信朋友圈里的红包照片,还有 iOS 带来的「毛玻璃」菜单效果都很吸引眼球,这次我们就尝试用熟悉的 CSS3 来实现这个效果。

    课程地址:

    https://www.shiyanlou.com/courses/497

    11. HTML5 Canvas 实现小游戏

    本课程基于 HTML5 的 canvas 实现了一个小游戏,着重介绍了 HTML5 游戏开发的流程及游戏开发中需要处理的东西。对 Web 游戏开发感兴趣的同学可以通过这个项目实践 HTML5 及 JavaScript 基础知识。

    课程地址:

    https://www.shiyanlou.com/courses/361

    12. jQuery 实现图片瀑布流效果

    本课程基于 jQuery 实现近几年很流行的瀑布流图片无限加载,另外我们会学到如何模拟后台提供 JSON 格式数据。本课程较为简单,适合刚入门前端的同学作为练手项目。

    课程地址:

    https://www.shiyanlou.com/courses/67

    13. HTML5 实现本地图片裁剪

    本期实验意在实现利用 HTML5 的 canvas 技术,结合 HTML5 的 File AP I 来实现图片的本地裁剪。通过本实验将学习到如何结合 HTML5 与 JavaScript 编写简单的单页应用。本课程难度一般,适合刚入门前端的同学,需要了解 cavas 并且有 JavaScript 基础。

    课程地址:

    https://www.shiyanlou.com/courses/363

    14. JavaScript 实现代码压缩成圣诞树

    课程主要通过 JavaScript 实现了一个工具包,运行工具包,可以将你的 JS 代码压缩成圣诞树,压缩后的代码还可以正常运行!通过课程,你的 JS 的将掌握的更加熟练。

    课程地址:

    https://www.shiyanlou.com/courses/1326

    15. PHP 实现校花评比排名项目

    本课程实现一个校花评比项目,在项目中使用到了埃洛等级分系统算法。用户在前端页面每次点击随机排列的两张美女图片,选出颜值较高者,共十次选择,最后由后台计算出各个图片的颜值,得出评比结果。课程使用了 PHP 实现评比算法,cookie 记录用户点击次数,jQuery 的简单使用。

    课程地址:

    https://www.shiyanlou.com/courses/321

    16. jQuery 实现图片轮播效果

    轮播图是在各大网站中经常见到的图片展示形式,本课程基于 HTML+CSS+JavaScript+jQuery 实现图片轮播,这是一个很容易上手的前端入门练习项目。

    课程地址:

    https://www.shiyanlou.com/courses/80

    17. Flask 实现简单聊天室

    Web 2.0 时代,即时通信已经成为必不可少的网站功能,那实现 Web 即时通信的机制有哪些呢?在这门项目课中我们将一一介绍。最后我们将会实现一个基于 Server-Sent Event 和 Flask 简单的在线聊天室。本课程难度中等,属于 python 中等的项目课程,需要有 Flask 和 Python 基础。可以在完成一系列简单的项目课之后,尝试突破本课程中的一些难点。

    课程地址:

    https://www.shiyanlou.com/courses/81

    18. HTML 实现 Markdown 编辑器

    本课程将通过纯前端打造一个实时 markdown 编辑器,用到的库或框架主要有 marked,Ace,highlight.js 及 Bootstrap。通过本完成本项目,将实践 web 应用程序开发的相关知识。

    课程地址:

    https://www.shiyanlou.com/courses/460

    19. Node.js 实现私人笔记本

    本实验将教大家使用 Node.js 技术完成一个私人笔记本项目,每个注册用户可在自己的私密空间中书写自己的心情和感悟。通过 Express 学习 Node.js Web 开发基础。本课程难度一般,属于初级课程,适合具有 Node.js 基础的用户,学习 Node.js Web 开发。

    课程地址:

    https://www.shiyanlou.com/courses/446

    20. jQuery 实现特效导航菜单

    本课程中我们将完成一个完整的网站导航栏,项目很简单,但是非常具有实用性,适合刚入门的小白练手。项目主要用到了 CSS 和 jQuery 的动画方法。

    课程地址:

    https://www.shiyanlou.com/courses/72

    ???????????? 点击阅读原文,获取「前端项目合集」

    展开全文
  • 前端练手项目,用于记录个人工作学习日常积累的demo。 Name Source Code Angular英雄教程 HTML5 Audio标签 code HTML5 Video标签 code 数据结构-JS操作二叉树 code Leetcode解题思路 code Node使用protobuf code Vue...
  • 零基础上手前端?没项目练手?亲测这个网站从零基础到项目实践,对入门和编程初学者有实实在在的上手和进阶帮助。无论是想系统学习编程,还是想通过项目为导向学习技术,贵在练习,贵在实践——>...

    零基础上手前端?没项目练手?亲测这个网站从零基础到项目实践,对入门和编程初学者有实实在在的上手和进阶帮助。无论是想系统学习编程,还是想通过项目为导向学习技术,贵在练习,贵在实践——>https://how2j.cn/k/tmall-front/tmall-front-790/790.html?p=134736

    展开全文
  • 不少刚入门前端的小伙伴都觉得理论知识很枯燥,做小项目练手又一筹莫展,别着急!慕课网来给大家送福利啦!给大家带来jquery的项目案例、以及MVVM项目演练,让你在60分钟内体验从原生到主...

    不少刚入门前端的小伙伴都觉得理论知识很枯燥,做小项目练手又一筹莫展,别着急!慕课网来给大家送福利啦!

    给大家带来jquery的项目案例、以及MVVM项目演练,让你在60分钟内体验从原生到主流框架开发,如何快速提升编码的效率。本次分享将采用直播形式,即学即用,对新手简直相当友好了!

    重点!本次直播免费

    无套路,扫码加小姐姐微信即可获取↓↓↓

    仅限前 200名免费,先到先得!

    前端技术专场,满满干货,保证让需要的同学学得过瘾!关于直播精彩内容的提前大曝光,请往下看!





    大谷老师:高级前端开发工程师

    多年互联网领域研发经验,包括商务网站、管理系统等研发经验。项目涉及电子政务、计生委的项目,长期从事IT类开发和教学工作。对dom开发,vue等前端技术有一定研究。





    60分钟学会京东购物车的计算功能




    1、体验从原生到主流框架开发,提升编码效率

    2、MVVM项目演练,了解vue脚手架的项目开发

    3、以购物车为例,掌握前端开发的不同方法与技巧

    4、快速熟知前端工程师必会技术点

           dom、   vue、    react

     

    5月25日(周一)晚8点




    1、直播群·不定时下红包雨

    2、金职位·前端就业班【重磅升级】100元、200元优惠券

    3、慕课网·最新专栏/微课·免费领取

    4、慕课网·实物周边奖品(抱枕、颈枕、T恤)




    1、想从事前端工作的大学生

    2、想转岗前端行业的小白同学

    3、刚入行,处于打基础阶段的前端新人

    4、需要提升实际开发经验的同学




    添加喵喵小姐姐微信:xiaomiaomkw2;回复【直播】即可提前预约名额,仅限前500名先到先得!火速占位!

    快快扫码免费预约吧↓↓↓

    来吧,一起来慕课网,参与这场高质量,强内容的免费公开课,同时也欢迎大家共享给你身边的小伙伴,一起来学习!

    慕课网介绍


    慕课网—程序员的梦工厂,一家IT技能在线学习平台。以BAT等一线技术大牛为讲师,涵盖前端、Java、Python等60多类技术方向,通过“视频课程+在线编程”,带你轻松积累项目开发经验,更有就业为导向的“金职位”课程,满足学员从入门到就业10年各个阶段的系统学习需求。

    END


     

    ???? ???? ???? - 点击原文阅读,高质量免费公开课等你来看>

    展开全文
  • 前端项目,包含源码获取方式。 在线预览地址 [http://mk567.gitee.io/css-html/20210326/index.html#/lczGradesMain/lczIndexMain] 项目截图 资源获取方式: 点击项目在线预览地址,主页显示源代码获取方式。 ...
  • 为大二前端练手项目. 采用渐变质背景 异步搜索歌曲链接并添加播放(原生态js异步调用网易云根据关键字匹配歌曲链接的接口)目前该接口因版权部分歌曲链接失效 网易云音乐接口: 如曹操这首歌的链接为 返回的json ...
  • 前端入门练手项目

    千次阅读 2017-09-13 17:40:20
    分享一些自己做的一些前端练手项目,此项目会持续更新 我的github地址:https://github.com/endlessmy/gitskills
  • web前端布局练手项目

    千次阅读 2017-02-26 12:06:13
    web前端布局练手
  • 前端项目练手-模仿天猫官网前端
  • 前端小白入门学习javascript练手项目合集

    万次阅读 多人点赞 2017-06-07 08:13:23
    前端小白入门学习javascript练手项目全集
  • 大部分是静态页面,使用的js知识只有一点点 实现的效果: 实现的html代码: <!DOCTYPE html> <html lang="en"> ...meta name="viewport" content="width=device-width, initi...
  • 实现的效果图: 计分规则:每合并一次增加两个分 游戏涉及到的文件: 实现的html代码: <!DOCTYPE html> <html lang="en">...meta name="viewport" content="width=device-...
  • 然后我们需要在项目目录中放入实验要用到的地雷和旗帜的图片, 通过下面的命令下载图片: $ wget http://labfile.oss.aliyuncs.com/courses/144/mine.png $ wget ...
  • learn_tornado_bootstrap 学习python和Tornado后端web框架和Bootstrap前端框架的练手项目
  • 不要再说找不到前端项目练手了!

    千次阅读 2019-10-05 16:00:04
    前端学习还是很有趣的,可以较快的上手然后自己开发一些好玩的项目练手,网上也可以一抓一大把关于前端开发的小项目,可是还是有新手在学习的时候不知道可以做什么,以及怎么做,因此,实验楼就整理了一些前端项目...
  • 这篇文章是我推荐给大家有想法学习前端,...小编为各位想加入程序员大军,加入前端的朋友们整理了三十个实战项目列表,有非常详细的教程。选择几个进行学习,或者发挥自己的想象去完成自己的项目 还有属于小编收集精
  • 适合练手的10个前端实战项目(附视频+源码)

    千次阅读 多人点赞 2020-08-28 17:35:22
    当下前端开发可以说是一个比较火的职业,所以学习的人比较多,不管是培训还是自学都是希望通过前端可以找到一份好的工作,但是很多自学的朋友在...下面小编整理了几个我们的学员项目,在学习前端的新人可以拿去练练手
  • 前端练手项目,模仿天猫前端 https://how2j.cn/k/tmall-front/tmall-front-790/790.html JAVA WEB J2EE 练手项目,模仿天猫整站 https://how2j.cn/k/tmall-j2ee/tmall-j2ee-894/894.html JAVA 桌面软件练手项目,一...
  • 从今天开始利用晚上时间多做一些前端练习,因为发现自己手写代码能力太差,如果给我api,再加上我保存的以前两个项目的工程代码,自己能完成很多任务。 但如果只有一个notepad++ 让我完全手写前端代码,漏洞百出啊...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 656
精华内容 262
关键字:

前端练手项目