計算機專業的學生如何系統學習前端技術？

01-08

作為剛剛大二的計算機大學生，有C/C++的基礎，參加過市的ACM比賽（雖然沒獲獎），能熟練使用CSS+HTML，能完成基礎的IE6兼容。了解JQ，html5，css3，懂些用戶體驗。目前在學習JS，看的書是深入淺出Javascript，對JS的思路還是不太清晰，可能因為並沒有太多的實踐JS的緣故，現在大二課每天都很多，大三課不多，之後的路該怎麼走呢。

不帶著問題去看書是沒有意義的。市面上的前端書籍又不是教材，不會說你看完一章就讓你做幾道習題。

你要去解決實際問題，在你解決不了或者解決得不好時，再看別人是怎麼解決的。網上有中文論壇複製粘貼來的答案，也有頂級前端專家的英文博客，不同的解決方案都有什麼優勢，這是你要去思考的。

3 月 12 日根據評論所說的增加一些內容。原文中增加的會標出。

=============

一個寒假回來，好幾個同學都來問我或者自己開始學起了前端，前端入門雖然簡單，但是想要做好很難，是一個要通十行才能精一行的工作。再這幾年 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==amp;amp;amp;amp;mid=210548061amp;amp;amp;amp;idx=1amp;amp;amp;amp;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 來接觸後端的開發，這裡不再詳述。

這文章原來我發在我的博客上，原文：Jasonamp;amp;#x27;s Blog

最近把所學的總結了一下。

以上

與君共勉。

for javascript part: ECMA-262 from dmitry soshnikov

拋個磚引塊玉。

====

個人覺得任何一門語言想要學好，最重要的還是打好基礎。夯實了基礎才能跳的更高，走的更遠。前端語言學習也是這樣，不能僅僅是工程導向的的學習，用到什麼了才去找什麼(搜索式學習)，那樣不能形成一個系統的知識框架。

## Javascript：

有些常見概念要搞清楚：繼承，閉包，原型鏈，作用域鏈，事件流等。

進階：可以了解一些函數或操作的內部機制：eg，

* `new`操作符的工作機制（The new Operator http://d.pr/UfZH[[Construct]]http://d.pr/8C4V）

* 創建一個函數的內部機制

* instanceof的工作機制，衍生問題如何判斷一個變數是否是數組 http://d.pr/PUVX

* this的取值

* __proto__ 和 prototype [[Prototype]] and prototype

## CSS：

1、盒模型，標準模式和非標準模式下盒模型渲染會有什麼不同

2、常見的定位方式有哪些，relative absolute fixed定位有哪些不同

3、常見的瀏覽器兼容問題有哪些，如IE的hasLayout是怎麼個東西，常用哪些方式來出觸發hasLayout；z-index在IE和其它瀏覽器中有啥不同。還有著名的雙邊距bug，li中浮動元素bug等，進階的可以了解BFC及其衍生的一系列問題。

4、常用的CSS Hack

下面這些書可以看一下：

========

Javascript高級程序設計

Javascript語言精粹

高性能Javascript

Javascript權威指南

CSS Mastery

CSS權威指南

========

Javascript這種東西，上手十分簡單，一邊做一邊學是最好的。不推薦直接看書。書裡面細節太多，看了也記不住，純粹浪費時間，反而容易不得要領。不要想一步到位，也不用去想什麼先打好基礎，這都是上學時候教條的學習方法，效率也很低，也容易有挫敗感。先讓自己能做點東西了，再慢慢改進對語言本身和框架的的理解也不遲，反而會很有成就感，學的很快，有融會貫通的感覺。

最自然的學習過程就是自己實踐，遇到什麼問題就解決什麼問題。先想想你想用前端的技術實現什麼東西，然後再拆解成小的步驟，一步一步的死磕。不要上課了，花時間做項目吧。如果想不出來做什麼，可以幫我做一個:D

可以看一下這個哥們的代碼自學之路：

I』m learning to code by building 180 websites in 180 days. Today is day 115.

找個項目做，比如你做個知乎web客戶端，一步步來，缺哪補哪。在不斷地try and error的循環中，也進步了。做的時候多想為什麼。單純前端沒什麼系統的。真要系統學，還是語言，演算法，架構和模式這些基礎。

鑒於你目前的情況，建議按如下路線學習：

JavaScript:還是要多看些書才行。建議按如下順序讀：

1. 《javascript語言精粹》。了解JavaScript中哪些是精華，哪些是糟粕。

2. 《object oriented javascript》。讀完後可以很清楚JavaScript的面向對象機制了。

3. 《High performance JavaScript》。讀完後就知道如何寫出高性能的代碼了。

html+css這部分還是要多實踐，根據自己哪裡不會，在網上搜一些文章來讀。但這幾本書還是值得一看：

1. 《css權威指南》

2. 《css藝門之匠》

最後，你可以參考這篇文章

http://kingzs70.sinaapp.com/2011/09/09/front-end-web-develop-study

我覺得既然你有c++基礎，學習JS的話，基本上就可以看js手冊自己動手做一些項目或者練習。比如自己編寫一些複雜點的控制項之類。有不清楚的google，再做了一些項目後再回頭看看樓上推薦的書理解會不一樣的。總之我的經驗是學習語言要先實踐再總結和提高。

1. 現在網路如此發達，幾下搜索就找到自己想要的答案了。大學課程不應該限制你的視野，網上和樹上的知識有時候比老師講的好的多。

2. 東西不需要學的太雜，it頂級公司的牛人也不是所有東西都會，但是必須要精一門相對基礎的（比如你說的c++）。萬事皆有通性，之後學習別的也很簡單。

3. 前端其實可以換個思路，為什麼不去做手機app呢。

你既然有c的基礎，可以試試在熟悉js的語法用js做演算法寫寫小代碼。跟著網上很多比如慕課啊udemy啊coursera啊udacity之類的跟著demo幾個網站做做小的doodle遊戲。等這些你都搞定了，可以試試脫離html跟css用純js做一個landing page出來。等這些你都熟悉了，就可以入坑jQuery了。說起來簡單，等你有能力熟練用js做網頁出來的時候，已經是兩三個月後的事情了。

我是認真地告訴你，把JS搞精通，不要理會什麼框架。

前端開發是一項複雜的工作，一方面需要不斷更新自己的技術知識，另一方面需要從人性的角度去思考產品，因為技術歸根結底是給人用的，如何好用，這是一門哲學！技術就像吃飯是人體成長必須的，但是人的成長還需要另外的東西！技術方面就不闡述了，思考方面的，推薦讀道德經，易經，儘可能的了解人性，了解宇宙蒼生，了解大道至簡!

我認為你還是需要多看看書，不會犯低級錯誤。有時間可以出來實習，會有更深的認識

一入前端深似海。

當你面對達成一個目標可以有無數種可能性的時候，你就知道什麼是苦逼了。

都說 c/c++ 很多坑，但那都是固定的，知道了繞開就好了；

css/javascript 的坑，都是隨機的，很多東西基本靠猜。

基礎課程要學好，比較重要的是 Tcp./IP 尤其是http協議，面向對象原理，再看看浪潮之巔