20 个前端练手项目合集

2022年05月10日 阅读数:4
这篇文章主要向大家介绍20 个前端练手项目合集,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

最近有不少小伙伴反应 ——前端

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

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

若是你尚未前端基础,推荐从这 3 门课开始学起 ——算法

基础阶段:canvas

1. HTML5 简明教程微信

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

课程地址:cookie

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

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