作者：HelloGitHub-小鱼干
这里是HelloGitHub的《GitHub上适合新手的开源项目》系列的最后一篇，系列文章：
C++篇Python篇Go篇Java篇JavaScript篇Java篇中老荀说到当今互联网份额最大的编程语言是Java，作为后辈我对此话是没有异议的。但，要说到国内互联网最火、最热闹的编程语言是什么？应该没人对JavaScript当选有异议吧。相对C++、Java这些老前辈，JS可谓门槛之低，连Python都自叹不如。那作为一个新手要学习系统化地学习JS。
[手动狗头]有更快捷的方法吗？有！在本篇文章中你将从基础招式学习，了解HTML、CSS、JS等基础概念之后，实践一把吃豆人游戏制作，再开启性能调优之旅，最后闯荡前端江湖。
出发，前进
成神第一式：打好根基
1.1前端成长之路：Web
HG#vol.Web是一个前端入门的图文教程，记录了作者从0-1学习前端的过程。作为一个入门的图文教程，Web遵循了事无巨细原则，在所有的介绍中详细讲HTML、CSS、JS等知识点，简单的移动端开发、Vue等框架使用、Node.js介绍也略有涉猎。值得一提得失，它所有的示例中代码注释清楚地标注了使用某个函数时你所需要注意的事项，贴心到不行。
不过，Web项目在JS基础和进阶内容分层方面略有不足，会发现16个类目有许多重复内容，以及原先在前端进阶分类下的前端几道题被独立出来成为一个单独分类，收录了大量面试题和网友面经，但瑕不掩瑜，该Repo绝对是一个新手入门的实用教程。
由于作者没有对分类内容及分类下内容做脑图介绍，所以这里小鱼干绘制了它的脑图/目录结构，部分相同主题内容进行了折叠。
1.2寓教于乐：Pacman
HG#vol.Pacman是基于HTML5的吃豆人游戏。核心代码就两个文件，主程序仅有行代码，且代码有注释、整洁。对于新手来说是个很好的实践项目，也能让你养成阅读他人代码的好习惯。
1.3新手关卡：33-js-concepts
HG#vol.-js-concepts是一个国外知名的JS项目，作为基础最后一道门槛，它帮你查漏补缺，让你对每个Javascript开发者应该知道的33个概念熟记在心，开启下一个阶段的进阶之旅。
成神第二式：招式变化
2.1深度乃广度基础：Web-Series
HG#vol.Web-Series是小鱼干很喜欢的一名前阿里工程师：王下邀月熊编写的Web全栈开发、工程架构与性能调优。在你熟悉前端基础概念，制作简单的例如吃豆人游戏之后，是时候在上一层楼了解下进阶的性能调优、工程架构问题。作为一名十多年开发经验的前端工程师，在Web-Series系列，王下邀月熊致力于探索，如何有效地提升团队的研发效能，在整个产品迭代的生命周期中都能及时、可靠地完成交付；同时能够控制住系统整体的复杂性，并且不断地、持续地进行系统的性能与体验优化。可以说升职加薪就差这招[手动狗头]
2.2简化操作流程：D3.js
HG#vol.D3.js的全称是（Data-DrivenDocuments），该库提供了各种简单易用的函数，大大简化了JavaScript操作数据的难度。该库的使用是数据可视化必须掌握的技术。
最重要的一点在于，D3.js项目本身提供了极度丰富的demo供你直接使用，化身做一个“调参工程师”绘制各种酷炫力导图，呈现各种可视化数据，例如：红楼梦的人物关系组图。等你在demo中习得基本使用之后，就可以根据自己的业务需求将任意数据绑定到DOM上，或直接操作DOM完成W3CDOMAPI相关操作，能限制D3.js强大的只能是你的想象力。
2.3包罗万象：x-build
HG#vol.x-build是面向小型项目的脚手架工具，通过终端命令最快在几秒钟初始化项目目录。该库内部集成了Webpack、Babel、ESLint等前端常用的工具。通过该项目可以了解脚手架的开发，并且可以熟悉如何在工具中集成Webpack这对自定义脚手架开发很有帮助。
成神第三式：问鼎武林
3.1同设计把酒言欢：next
HG#vol.前端工程师的对手之一便是设计师，像素级还原度挡住了多少前端工程师的晋升之路。Next便是你的闯关宝剑，阿里开源的企业级中后台UI解决方案，致力于解决设计师与前端在工作协同、产品体验一致性、开发效率方面的问题。就是设计师修改颜色之类的元素之后，可以生成一个NPM主题包，前端拿到这个包就可以直接还原设计师的设计。Next真妙♂
3.2得Chrome者得天下：chrome-extensions-searchReplace
HG#vol.chrome-extensions-searchReplace一款搜索并且替换文本的谷歌插件，也是一个极佳的插件开发实践。
最后
本文《GitHub上适合新手的开源项目》收官篇，大家从这个系列有没有找到适合自己进阶的方向或感兴趣的项目呢？如果还有什么想看的系列可以留言告诉我们，也可以聊聊想对HG说的话！
联系电话：