作者：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-searchReplacet
最後
本文《GitHub 上適合新手的開源專案》收官篇，大家從這個系列有沒有找到適合自己進階的方向或感興趣的專案呢？如果還有什麼想看的系列可以留言告訴我們，也可以聊聊想對 HG 說的話！