前端入門雖然簡單，但是想要做好很難，是一個要通十行才能精一行的工作。再這幾年 MVVM 框架的大肆流行，前端已經不是以前用 jQuery 寫一寫就可以的時代了。於是我寫下這篇文章，來給大家一個參考。
首先，請大家牢記以下幾點：
- 前端不簡單！前端不簡單！前端不簡單！
- 前端和美工不一樣！不是隻會 HTML、CSS、JavaScript 就行的。
- 程序和其他的行業不一樣，經驗是十分重要的，不管看多少書，都逃不過要經常的練習。
- 在學會使用 JavaScript 實現相同操作之前，不要使用 jQuery。
- JavaScript 和 Java 的關係如同雷鋒和雷峰塔的關係一樣，並沒有什麼關係！
前期準備工作
- 下載好 Sublime Text 3，並自行找教程安裝 Package Control。安裝完後使用 Package Control 安裝 Sublime Text 的漢化包，名字叫做 ChineseLocalizations。之後單獨寫 HTML 和 CSS 的時候，使用 Sublime Text 編輯。
- 下載 Chrome 瀏覽器，目前（2017 年 3 月 9 日）最新版本為 56，請儘量安裝最新版本，並設置為默認瀏覽器。
- 下載 Visual Studio Code，之後單獨寫 JavaScript 的時候，使用 VS Code 編輯。
- 下載並在本地安裝 Node.js，目前（2017 年 3 月 9 日）最新版本為 7.7.1，請儘量安裝最新版本。
- 使用 Google 搜索，不能使用 Google 的使用 Bing 搜索，不要使用百度。
- 註冊一個 Github 賬號。
初學階段
學習時間：1 個月
初學階段主要是學習 HTML、CSS 和 JavaScript，掌握三種語言的基礎語法，並且掌握基本的佈局方式、基本的 DOM 操作和算法。
HTML 和 CSS
推薦跟著 iMooc 的《HTML + CSS 基礎課程》學習，裡面的每一小節都是指引式的教學，跟著指導學習 HTML 和 CSS 的基礎語法。
鏈接：http://www.imooc.com/learn/9
學習完上面《HTML + CSS 基礎課程》的所有內容之後，自行完成一個百度搜索的首頁，要求做到位置、顏色、間距等 99% 還原。不需要點擊可以搜索。
【3.12 更新】
課程中沒有提到的該學習的還有 flex 佈局。
JavaScript
學習 JavaScript 可以上廖雪峰的網站上學習：
http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000
跟著目錄從上往下學習，一直到 Promise。
學習的過程中可以結合練習題學習，這裡整理了一些：
https://github.com/iszu/web-learning/blob/master/JavaScript%E7%BB%83%E4%B9%A0%E9%A2%98.md
正確把代碼寫的簡單，短小。最好能一行實現。
當你學完 HTML、CSS 和 JavaScript 的基礎之後，完成這麼一個小練習：
實現一個簡單的 TodoList
不懂啥是 TodoList 的自行 Google
限制
- 界面不能照抄網上已有頁面的風格，可以把網上的設計稿做成你的頁面，也可以自己設計
- 不能使用任何已有的庫（如 jQuery, Bootstrap, Vue 等）
- 增加、刪除、修改的操作執行後，頁面不能刷新
基本功能
- 增刪改查
增刪改查是指可以實現“增加”、“刪除”、“修改”、“查詢”四個功能。 其中“查詢”不代表“搜索”，只要頁面刷新後，數據能夠正常顯示即可。 - 可以儲存 “內容” 與 “是否已完成” 的狀態
- 使用 localStorage 儲存數據
- 界面儘可能做的好看
加分項
- 可以只顯示“未完成”或“已完成”的條目
你可以把它們分開顯示，或者是通過按鈕切換顯示，或者你也可以自己想一種把它們分開顯示的方法 - 給每一條 todo 添加 “完成日期”
- 在第二點的基礎上，已過期的條目有不同的樣式
- 其它更牛逼的功能
進階階段
學習時間：1 個月
學習完上面的課程，你就已經是一個合格的美工了，能根據設計師的設計稿實現出頁面，但是還不是一個前端工程師，或者說還不是一個工程師。這一階段你要開始接觸一些作為程序員需要學習的東西。
Markdown
首先學會使用 Markdown 進行寫作，Markdown 是什麼，怎麼樣個語法，可以查看我之前的推送：
https://mp.weixin.qq.com/s?__biz=MzI1MDA2MTUyMQ==&mid=210548061&idx=1&sn=df5b99d555867c279596dde9b1862de2#rd
git 版本控制
其次要學會使用 git 進行版本控制，還是剛剛的廖雪峰—— git 教程：
http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000
並且把上面做的兩個項目，通過 git push 到 Github 上開源，README.md 使用 Markdwon 編寫。
HTTP, Ajax 和異步
學習 Ajax 的基本實現，在這個階段你會接觸到 JavaScript 的異步編程，你得自行了解什麼是異步，並且會開始基礎 HTTP 協議，請自行了解 HTTP 狀態碼，請求頭，響應頭等基礎知識，並瞭解 TCP/IP，HTTP，HTTPS 協議的概念和關係。接著瞭解 JavaScript 的同源策略，為什麼需要同源策略，以及如何跨域。
高級階段
學習時間：6 個月以上
【3.12 更新】
這個階段你會開始多終端前端的開發，瞭解響應式佈局，接觸前端工程化和前端框架，並開始深入學習 JavaScript 的深入內容，包括 ES6、ES7 等。
響應式佈局
瞭解響應式佈局的應用範圍、基本原理。學習 em, px, rem, vh, vw 等單位的使用。
ECMAScript 6
學習 ECMAScript 6，瞭解 ECMAScript 和 JavaScript 的關係，具體文章可以看阮一峰的 《ECMAScript 6 入門》，另外可以參考我寫的《ECMAScript6 學習筆記》。
NPM
自行找教程學習 npm 的使用，接觸前端工程化，瞭解 Gulp, Webpack 等工具的用處，並在本地自己搭建一個工程化環境。
前端框架
自行找教程學習 Vue.js 或 React 或 Angular 等前端框架，並嘗試使用這些框架搭建一個單頁面應用。以下以 Vue.js 舉例：
- 學習 Vue.js 基礎語法，一定要看官方的文檔來學習：https://cn.vuejs.org。
- 學習使用 Vue-cli 在本地一鍵搭建 Vue.js 項目。
- 本地開發一個 Todolist 的 Vue.js 版本，同樣使用 localstorage 進行存儲。
- 學習使用 Github pages 部署開發好的 Todolist，可以讓別人一起使用。
- 瞭解 Vue.js 2.0 的內部原理和外部思想：
- Virtual DOM
- 數據監聽
- render 函數
- 單向數據流
- Vue.js 的 Lifecycle
- 服務端渲染的原理
- Vuex 和 Vue-Router
- ……
Canvas 相關
瞭解 Canvas API 的使用，懂得使用 Canvas 製作動畫，以此來製作一些更炫酷的前端效果，如圖片背景的高斯模糊等。
深入階段
學習時間：無限
這個階段是作為一個前端繼續精進自己的一個階段，你已經可以勝任小型項目了，但是還有一些細節需要你一直不斷的學習。
前端儲存
前端儲存知識點：
- 儲存技術有哪些？
- Cookie, SessionStorage, LocalStorage 有什麼區別？
- ……
History API
什麼是 History API，為什麼要增加這個功能？
性能優化
學習有關前端性能優化的相關知識等：
- 如何縮短白屏時間
- 如何提升 CSS3 動畫的性能
- ……
安全
學習有關前端的安全相關知識等：
- 通信安全
- 如何保障 Ajax 通信安全
- XSS 攻擊
- 什麼是 XSS 攻擊
- 如何防範 XSS 攻擊
- CSRF 攻擊
- 什麼是 CSRF 攻擊
- 如何防範 CSRF 攻擊
- CSRF 攻擊和 XSS 攻擊的區別是什麼
- ……
兼容性
有關 IE 瀏覽器以及老版本瀏覽器的兼容性問題的學習和解決，包括：
- HTML 標籤的兼容性
- CSS 樣式的兼容性
- JavaScript 的 API 的兼容性
- 優雅降級與漸進增強
學習後端
等到前端學習的差不多了，可以通過 Node.js 來接觸後端的開發，這裡不再詳述。
轉發關注+私信小編 “ 資料”，即可獲取啦！
閱讀更多 馮文說編程 的文章
