GitHub 上有什么好玩又有挑战的前端项目？【转】

3位淘系技术前端工程师，精心筛选出 26 个难度层层递进，好玩且实用的前端项目，比如动画制作、文字识别、可视化图表、H5制作等等，甚至还能把云音乐灰色歌曲解锁播放（嘘！）

本篇内容按难度分为【初级篇：8个】、【中级篇：9个】、【高级篇：9个】项目，不同水平不同学习瓶颈的同学可按需选择~

（点击头像关注我们账号，别错过更多阿里工程师一线技术干货）

—————————————————————————————————————

初级篇

这里一般适用于刚入门前端的同学，一般入门前端都是从html和css开始的，应该让这些同学提起对前端的兴趣，因此初级篇选用几个比较有趣的css库来让同学入门前端。

animate

animate是一个css动画库，动画内容一般也是我们所熟悉的，例如渐入、渐出、弹跳、旋转、抖动等特效。ppt里面的许多特效在animate都能找到。而且使用简单，只需引入库并添加相关css即可。

image.png

演示地址：https://animate.style/
GitHub地址：https://github.com/animate-css/animate.css

CSS-Inspiration

CSS-Inspiration涵盖了css的许多常见的特效，例如布局方式、border、伪元素、滤镜、背景3d等。这些都是css里面十分重要的知识点，当我们学习完css基础之后，可以利用此项目来制作一些常用的特效，也可以巩固基础知识。

image.png

演示地址：https://chokcoco.github.io/CSS-Inspiration/#/
GitHub地址：https://github.com/chokcoco/CSS-Inspiration

Bootstrap

Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap是可以直接应用到我们平常的项目里的，而且非常方便、功能特别多，也是我们常用的前端UI框架。

image.png

官网：https://getbootstrap.com/
GitHub地址：https://github.com/twbs/bootstrap

tesseract.js

一个js ocr识别库，支持包括中英文等许多语言的图片和视频文字识别，底层封装了Tesseract OCR引擎来实现。

image.png

视频实时ocr：

image.png

demo: http://tesseract.projectnaptha.com
github: https://github.com/naptha/tesseract.js

vanillawebprojects

这里一共包含20+个项目，包括表单验证、音视频播放器、打字等小应用，有趣且方便学习。

image.png

github: https://github.com/bradtraversy/vanillawebprojects

Ant Design

基于 Ant Design 设计体系的 React UI 组件库, 提供了丰富的组件，基本满足各种开发使用需求。大部分前端项目都会涉及到React / Vue的组件开发，如何开发封装一个组件是成为一个合格前端的第一步，可以通过模仿Ant Design的写法去学习如何开发一个组件，同时学到框架(React / Vue) + HTML + CSS。

image.png

github: https://github.com/ant-design/ant-design/ （React版本）
https://github.com/vueComponent/ant-design-vue/ (Vue版本)

Echarts

基于 JavaScript 的开源可视化图表库。Echarts使用数据配置的方式轻松的实现可视化，如果想学习数据可视化，不如从学习Echarts的实现开始。

image.png

github: https://github.com/apache/echarts

JavaScript的学习

ECMAScript是JavaScript的语言标准，描述了JS的能力，API，基本实现步骤。目前比较通用的标准是ES6，从最初的版本：June 1997，最新的标准已经到了Edition 12 (June 2021)。每个版本都添加 / 修改了新的语法和API，作为一个前端开发者，应该关注JS的变化，可以查看最新的ECMAScript提案，即将发生的变化。