239 K star，这项目居 Github 榜首！

客官°小女子只卖身不卖艺 2022-09-08 00:26 133阅读 0赞

![a76e3fadd05d586b618d6d1f361ae8bc.png][]

哈喽，大家好，我是开源君，一个**资深的互联网玩家**，致力于为大家分享各领域优质开源项目。

今天给大家推荐的项目是`freeCodeCamp`。star 数高居 github 所有仓库的第一名，有 `329 K` 的收藏数。既然这么受开发者依赖，那么一定有它突出的优点。

### 项目介绍 ###

freeCodeCamp 由 freeCodeCamp.org 组织维护，该项目有 4287 名贡献者。前端开发比较熟悉前端框架的 React 有 1499 名，Python 开发者熟悉的 Tensorflow 则有 3051 名。单从贡献者数量上看，freeCodeCamp 占有挺大的优势。里面全栈 web 开发和机器学习课程是完全免费和自定进度的，并有数以千计的交互式编码挑战，可以帮助扩展开发者的技能。

这个项目的主要课程资源有如下这些：

*  响应式 web 开发：包括了 HTML 基础，CSS 基础，应用视觉设计，应用无障碍，响应式网页设计原则等等。
 *  JavaScript 算法和数据结构：JavaScript 基础，ES6，正则表达式，调试，基础数据结构，基础算法，面向对象编程，函数式编程等。
 *  数据可视化：用 D3 实现数据可视化，JSON APIs 和 AJax，数据可视化项目等。
 *  APIs 和 微服务：NPM 包管理，Node 和 Express 基础，MongoDB 和 Mongose，API 和 微服务项目。
 *  质量保证（测试）：Chai 进行自动化测试等。
 *  还有更多

### 项目特点 ###

开源君觉得这个项目最大的特点在于交互式编码。

以 debug 调试为例：（官方示例图）

![2e20c9e6c2f4332d8da58d03ea8f2693.png][]

debug 是开发中很有力的一个技能，可以增加寻找 bug 的效率，作为一个新手我怎么来学习它呢？

![a78f69e877ebb5322733d802cba67985.png][]项目给出了 12 个课程，我们进入其中一个查看，网页左边官方给出了描述，经过阅读我们知道谷歌和火狐的开发者工具有调试工具，打开 console 面板可以在里面输入指令 console.log('Hello World'); 得到传递进里面的值。网页右边是我们需要的挑战，需要我们打印出 a 的值。在补充 console.log(a); 之后，点击运行测试即可通过第一个课程，过程是不是很简单，但是对于单纯的看知识，这是一种即时互动的方式，记忆更加深刻。

![cc52d41617392cc086f86037ee7f0f37.png][] ![253e649e8c0b6440022bcaab79391882.png][] ![2b07cc245a46ac58286a6b2c1c941852.png][] ![fe1010640b3a249ccca69f979062c662.png][]

并且在 JavaScript 算法和数据结构 这种比较大的课程完成之后还可以领取证书，满满的成就感。

最后，为了鼓励鼓励开源君 **点赞 + 在****看** 不来一下吗，祝各位程序员开发无 Bug，发大财，行大运。

更多 Github 项目使用方式与玩法，点击下方卡片，回复 20210818 获取开源项目地址

[a76e3fadd05d586b618d6d1f361ae8bc.png]: /images/20220829/91ed9371132645ce8f22a470a3d1ef18.png
[2e20c9e6c2f4332d8da58d03ea8f2693.png]: /images/20220829/9dc51bd6c85f42f1853a881893f84bfe.png
[a78f69e877ebb5322733d802cba67985.png]: /images/20220829/660c6548535e47a68f244016e2addcd2.png
[cc52d41617392cc086f86037ee7f0f37.png]: https://img-blog.csdnimg.cn/img_convert/cc52d41617392cc086f86037ee7f0f37.png
[253e649e8c0b6440022bcaab79391882.png]: https://img-blog.csdnimg.cn/img_convert/253e649e8c0b6440022bcaab79391882.png
[2b07cc245a46ac58286a6b2c1c941852.png]: https://img-blog.csdnimg.cn/img_convert/2b07cc245a46ac58286a6b2c1c941852.png
[fe1010640b3a249ccca69f979062c662.png]: /images/20220829/76b21eb45d4246a0906e68448c8208b9.png