作者：HelloGitHub-小魚干
這里是 HelloGitHub 的《GitHub 上適合新手的開源項目》系列的最后一篇，系列文章：
Java 篇中老荀說到當今互聯網份額最大的編程語言是 Java，作為后輩我對此話是沒有異議的。但，要說到國內互聯網最火、最熱鬧的編程語言是什么？應該沒人對 JavaScript 當選有異議吧。相對 C++、Java 這些老前輩，JS 可謂門檻之低，連 Python 都自嘆不如。那作為一個新手要學習系統化地學習 JS，應該走哪幾步呢？
- 第一步：打開瀏覽器，輸入網址：
https://hellogithub.com/ - 第二步：選擇 JavaScript 項目
- 第三步：逐一學習
[手動狗頭]有更快捷的方法嗎？有！在本篇文章中你將從基礎招式學習，了解 HTML、CSS、JS 等基礎概念之后，實踐一把吃豆人游戲制作，再開啟性能調優之旅，最后闖盪前端江湖。
出發，前進 🚗
成神第一式：打好根基
1.1 前端成長之路：Web
HG #vol.036 Web 是一個前端入門的圖文教程，記錄了作者從 0-1 學習前端的過程。作為一個入門的圖文教程，Web 遵循了事無巨細原則，在所有的介紹中詳細講 HTML、CSS、JS 等知識點，簡單的移動端開發、Vue 等框架使用、Node.js 介紹也略有涉獵。值得一提得失，它所有的示例中代碼注釋清楚地標注了使用某個函數時你所需要注意的事項，貼心到不行。
不過，Web 項目在 JS 基礎和進階內容分層方面略有不足，會發現 16 個類目有許多重復內容，以及原先在前端進階分類下的前端幾道題被獨立出來成為一個單獨分類，收錄了大量面試題和網友面經，但瑕不掩瑜，該 Repo 絕對是一個新手入門的實用教程。
由於作者沒有對分類內容及分類下內容做腦圖介紹，所以這里小魚干繪制了它的腦圖/目錄結構，部分相同主題內容進行了折疊。
.
|── 前端工具
| ├──VS Code 的使用
| ├──Git 使用
| ├──Mac 安裝和 iTerm2 配置
| ├──Sublime Text 的使用
| ├──WebStorm 的使用
| ├──Atom 的使用
| ├──GitHub 的使用
| ├──VS Code 的使用累積
| ├──Chrome 瀏覽器
| ├──Emmet in VS Code
| ├──iTerm2 + OhMyZsh + agnoster 搭建
| ├──iconMoon
| └──whistle 網絡抓包
|──HTML
| ├──認識 Web 和 Web 標准
| ├──瀏覽器的介紹
| ├──初識 HTML
| ├──HTML 標簽：排版標簽
| ├──HMTL 標簽：字體標簽和超鏈接
| ├──HTML 標簽：圖片標簽
| ├──HTML 標簽：圖文詳解
| ├──HTML5 詳解
| ├──HTML5 舉例：簡單的視頻播放器
| ├──HTML 詳解（二）
| ├──HTML 詳解（三）
| └──HTML 基礎回顧
|──CSS 基礎
| ├──CSS 屬性：字體屬性和文本屬性
| ├──CSS 屬性：背景屬性
| ├──CSS 樣式表和選擇器
| ├──CSS 選擇器：偽類
| ├──CSS 樣式表的繼承性和層疊性
| ├──CSS 盒模型詳解
| ├──浮動
| ├──CSS 屬性：定位屬性
| ├──CSS 案例講解：博雅互動
| ├──CSS3 選擇器詳解
| ├──CSS3 屬性詳解（一）
| ├──CSS3 屬性詳解：動畫詳解
| ├──CSS3 屬性：Flex 布局圖文詳解
| ├──CSS3 屬性：Web 字體
| ├──SaaS 入門
| ├──瀏覽器的兼容性問題
| └──CSS3 的常見邊框匯總
|──CSS 進階
| ├──准備
| ├──CSS 中的非布局樣式
| ├──CSS 布局
| ├──網頁開發和設計中的字體常識
| ├──如何讓一個元素水平居中
| ├──CSS 開發累積
| ├──CSS 文章推薦
| ├──CSS 的一些小知識
| └──CSS 面試題
|──JS 基礎
| ├──編程語言
| ├──JS 簡介
| ├──變量
| ├──變量的數據類型：基本數據類型和引用數據類型
| ├──基本數據類型
| ├──typeof 和數據類型轉換
| ├──運算符
| ├──流程控制語句
| ├──對象簡介
| ├──基礎包裝類型
| ├──內置對象
| ├──數組
| ├──函數
| ├──作用域和變量提升
| ├──預編譯
| ├──this 指向
| ├──call、apply 和 bind
| ├──高階函數
| ├──閉包
| ├──對象
| ├──深淺拷貝
| ├──原型鏈和原型繼承
| ├──類和構造繼承
| ├──正則表達
| ├──事件
| └──jQuery
|──JS 之 ES6 語法
| ├──ES6 介紹和環境配置
| ├──ES5 中的嚴格模式
| ├──ES5 中的一些擴展
| ├──ES6：變量 let、const 和塊級作用域
| ├──變量的解構賦值
| ├──箭頭函數
| ├──剩余參數和擴展運算符
| ├──字符串、數據和對象的擴展
| ├──內置對象擴展：Set 數據解構
| ├──Promise 入門詳解
| ├──ES7：async 函數詳解
| └──ES6：Symbol
|──JS 進階
| ├──var、let、const 的區別
| ├──數據的賦值
| ├──JS 開發累積
| ├──call、apply、bind 的區別
| ├──this
| ├──作用域與閉包
| └──創建對象和繼承
|──前端基本功
| ├──CSS 基礎練習
| └──DOM 操作練習
|──Ajax
| ├──服務器分類及 PHP 入門
| ├──Ajax 入門和發送 http 請求
| ├──函數封裝
| ├──同源和跨域
| └──模版引擎
|──移動 Web 開發
| ├──Bootstrap 入門
| ├──Bootstrap 使用
| └──Less 詳解
|──Node.js 和數據庫
| ├──Node.js 介紹
| ├──Node.js 的特點
| ├──Node.js 開發環境安裝
| ├──Node.js 模塊化規范
| ├──Node.js 內置模塊
| ├──Node.js 操作 MySQL 數據庫
| ├──CommonJS
| ├──ES6
| ├──JS 模塊化：AMD
| ├──JS 模塊化：CMD
| ├──JS 模塊化：ES6
| ├──KOA2
| ├──Node.js 代碼舉例
| ├──WebSocket
| └──事件驅動和非阻塞機制
|──Vue 基礎
| ├──指令系統
| ├──v-on 事件修飾符
| ├──系統指令（二）
| ├──舉例：列表功能
| ├──自定義過濾器
| ├──自定義按鍵修飾符 & 自定義指令
| ├──Vue 實例的生命周期函數
| ├──Vue 中的 Ajax 請求
| ├──Vue 動畫
| ├──Vue 組件的定義和注冊
| ├──Vue 組件之間的傳值
| ├──Vue-router 路由
| ├──Vue.js 在開發中的常見寫法累積
| ├──Vue 開發累積
| └──Vue 組件
|──React 基礎
| ├──React 介紹
| ├──JSX 語法介紹
| ├──React 組件：生命周期
| ├──React 組件：常見屬性和函數
| ├──React 中綁定 this 並給函數傳參的方法
| ├──React 單向數據綁定
| ├──React 路由的使用
| ├──Ant Design 的基本使用
| ├──AntD 框架的踩坑記錄
| ├──AntD 框架 upload 組件自定義
| └──React Native 初識
|──前端面試
| ├──面試必看
| ├──面試題累積
| └──網友面經
|──前端進階
| ├──代碼規范
| ├──常見專有名詞
| ├──數組的常見操作
| ├──前端監控技術
| ├──lazyload & 防抖動和節流閥
| ├──Vue 開發累積
| └──前端的幾道題目
|──前端綜合
| ├──2019 Web 前端入門自學路線
| ├──前端學習分享
| ├──Express
| ├──2018 前端日記
| ├──2019 前端日記
| ├──2020 前端日記
| ├──CSS 開發總結
| ├──Ajax 相關
| ├──HTML 相關
| ├──Json 字符串的解析和遍歷
| ├──Json 相關
| ├──前端博客推薦
| ├──前端開發累積
| ├──前端語錄
| └──網絡抓包和代理工具：Whistle
└──擴展閱讀
├──2020 Web 前端最新導航
├──GitHub 項目推薦
├──網站推薦
├──前端文章推薦
├──上海有哪些互聯網大廠
├──北京有哪些互聯網大廠
└──深圳有哪些互聯網大廠
GitHub 地址→https://github.com/qianguyihao/Web
1.2 寓教於樂：Pacman
HG #vol.029 Pacman 是基於 HTML5 的吃豆人游戲。核心代碼就兩個文件，主程序僅有 1000 行代碼，且代碼有注釋、整潔。對於新手來說是個很好的實踐項目，也能讓你養成閱讀他人代碼的好習慣。
GitHub 地址→https://github.com/mumuy/pacman
1.3 新手關卡：33-js-concepts
HG #vol.031 33-js-concepts 是一個國外知名的 JS 項目，作為基礎最后一道門檻，它幫你查漏補缺，讓你對每個 Javascript 開發者應該知道的 33 個概念熟記在心，開啟下一個階段的進階之旅。
成神第二式：招式變化
2.1 深度乃廣度基礎：Web-Series
HG #vol.028 Web-Series 是小魚干很喜歡的一名前阿里工程師：王下邀月熊編寫的 Web 全棧開發、工程架構與性能調優。在你熟悉前端基礎概念，制作簡單的例如吃豆人游戲之后，是時候在上一層樓了解下進階的性能調優、工程架構問題。作為一名十多年開發經驗的前端工程師，在 Web-Series 系列，王下邀月熊致力於探索，如何有效地提升團隊的研發效能，在整個產品迭代的生命周期中都能及時、可靠地完成交付；同時能夠控制住系統整體的復雜性，並且不斷地、持續地進行系統的性能與體驗優化。可以說升職加薪就差這招 [手動狗頭]
2.2 簡化操作流程：D3.js
HG #vol.031 D3.js 的全稱是（Data-Driven Documents），該庫提供了各種簡單易用的函數，大大簡化了 JavaScript 操作數據的難度。該庫的使用是數據可視化必須掌握的技術。
最重要的一點在於，D3.js 項目本身提供了極度豐富的 demo 供你直接使用，化身做一個“調參工程師”繪制各種酷炫力導圖，呈現各種可視化數據，例如：紅樓夢的人物關系組圖。等你在 demo 中習得基本使用之后，就可以根據自己的業務需求將任意數據綁定到 DOM 上，或直接操作 DOM完成 W3C DOM API 相關操作，能限制 D3.js 強大的只能是你的想象力。
GitHub 地址→https://github.com/d3/d3
2.3 包羅萬象：x-build
HG #vol.040 x-build 是面向小型項目的腳手架工具，通過終端命令最快在幾秒鍾初始化項目目錄。該庫內部集成了 Webpack、Babel、ESLint 等前端常用的工具。通過該項目可以了解腳手架的開發，並且可以熟悉如何在工具中集成 Webpack 這對自定義腳手架開發很有幫助。
GitHub 地址→https://github.com/codexu/x-build
成神第三式：問鼎武林
3.1 同設計把酒言歡：next
HG #vol.054 前端工程師的對手之一便是設計師，像素級還原度擋住了多少前端工程師的晉升之路。Next 便是你的闖關寶劍，阿里開源的企業級中后台 UI 解決方案，致力於解決設計師與前端在工作協同、產品體驗一致性、開發效率方面的問題。就是設計師修改顏色之類的元素之后，可以生成一個 NPM 主題包，前端拿到這個包就可以直接還原設計師的設計。Next 真妙 🏄♂️
GitHub 地址→https://github.com/alibaba-fusion/next
3.2 得 Chrome 者得天下：chrome-extensions-searchReplace
HG #vol.052 chrome-extensions-searchReplace 一款搜索並且替換文本的谷歌插件，也是一個極佳的插件開發實踐。
GitHub 地址→https://github.com/Summer-andy/chrome-extensions-searchReplace
最后
本文《GitHub 上適合新手的開源項目》收官篇，大家從這個系列有沒有找到適合自己進階的方向或感興趣的項目呢？如果還有什么想看的系列可以留言告訴我們，也可以聊聊想對 HG 說的話！