一、個人經(jīng)驗

利益相關(guān)：就職于一家外包公司，從事前端架構(gòu)和開發(fā)工作。

2015年畢業(yè)之后，最初從事了2年Web開發(fā)，前端使用jQuery/Angular開發(fā)相應(yīng)的頁面，Bootstrap技術(shù)呈現(xiàn)頁面，后端主要使用Java語言，采用Jsp技術(shù)開發(fā)Web應(yīng)用，主要是物聯(lián)網(wǎng)相關(guān)的網(wǎng)站，包含nb-iot、gis、apache-mina等內(nèi)容、可以集成第三方管理平臺，可以進(jìn)行物聯(lián)網(wǎng)關(guān)策略的執(zhí)行。

第二份工作的時候，就從Web開發(fā)轉(zhuǎn)為Web前端開發(fā)，還擔(dān)任了組長，開發(fā)Aresocean平臺（DUBAI）、數(shù)據(jù)管理平臺（DMP）等系統(tǒng)。剛學(xué)的時候，主要困惑就是學(xué)什么，怎么學(xué)。買了書，也下載了電子書，但是沒有一條主線，到自己動手做項目的時候，沒有人輔導(dǎo)或指出錯誤，學(xué)習(xí)效果較差。直到自己真正入門前端開發(fā)時，才發(fā)現(xiàn)入門其實沒有那么難，下面說說我自己的經(jīng)歷。

二、打好理論基礎(chǔ)

理論是基石，沒有理論，在開發(fā)過程很多知識點都無法串聯(lián)在一起，達(dá)不到一通百通的境界。所以需要初學(xué)者稍微了解一下計算機(jī)相關(guān)基礎(chǔ)。計算機(jī)或軟件工程核心專業(yè)課程是：《操作系統(tǒng)》、《數(shù)據(jù)結(jié)構(gòu)》、《計算機(jī)組成原理》和《計算機(jī)網(wǎng)絡(luò)》。相對于前端開發(fā)或者Web開發(fā)，有很多同學(xué)是從其他專業(yè)過來的，而且相關(guān)基礎(chǔ)理論學(xué)習(xí)對日后開發(fā)還是有很大的幫助的。比如網(wǎng)絡(luò)分層模型、網(wǎng)絡(luò)協(xié)議-HTTP，服務(wù)器基礎(chǔ)知識等。

微博@Easy最新出的《方糖全棧課》里面就有很多基礎(chǔ)資料，大家感興趣可以去圍觀。

另外推薦《深入理解計算機(jī)系統(tǒng)》，這本書介紹了每個開發(fā)者都需要了解的計算機(jī)基礎(chǔ)內(nèi)容，幫助讀者接觸到整個計算機(jī)學(xué)科的核心知識。

三、掌握學(xué)習(xí)路徑

MDN在線文檔有一個《學(xué)習(xí)Web開發(fā)》系列文檔，從Web入門開始介紹，包括HTML，CSS、JavaScript、服務(wù)端網(wǎng)頁編程基礎(chǔ)等知識，適合初學(xué)者跟著文檔一步一步的學(xué)習(xí)。優(yōu)達(dá)學(xué)城的納米學(xué)位課程，也提供了入門到進(jìn)階的課程路線，通過先學(xué)習(xí)各個知識點，每個章節(jié)之后有一個實戰(zhàn)項目，打通融會貫通。

四、學(xué)習(xí)方法

好的學(xué)習(xí)方法和平臺，能使得事半功倍。大多數(shù)學(xué)習(xí)者的學(xué)習(xí)方式是看書、聽視頻，上在線學(xué)習(xí)平臺。圖書來說，知識點相對系統(tǒng)，但是也是相對較慢。視頻通過實際項目代碼和動畫相關(guān)的展示，更容易吸收，但是很多視頻只提供視頻教學(xué)，項目實踐和章節(jié)練習(xí)相對教授。在線學(xué)習(xí)平臺提供項目實踐和代碼審閱功能，學(xué)習(xí)者學(xué)的輕松，掌握的也快。

1.圖書

雖然很多學(xué)習(xí)者覺得圖書效率很低，攜帶也不方便，但是它知識點還是相對系統(tǒng)的，適合集中時間段內(nèi)學(xué)習(xí)，當(dāng)然選擇優(yōu)秀的圖書是最重要的，優(yōu)先選個國外的、經(jīng)典的圖書。如果學(xué)員英文水平可以的話，推薦考慮英文原版圖書。推薦基本作為初學(xué)者可以看的圖書。

HTTP基礎(chǔ)相關(guān)

圖解HTTP 或者HTTP權(quán)威指南

Web全棧工程師的自我修養(yǎng)

HTML和CSS相關(guān)

HTML和CSS配合MDN相關(guān)文檔，入門應(yīng)該是沒有問題，如果確實要通過一本書學(xué)習(xí)，推薦：

HTML & CSS設(shè)計與構(gòu)建網(wǎng)站 要學(xué)習(xí)各種頁面布局，或者想扎實學(xué)習(xí)好CSS，CSS需要徹底研究。

JavaScript相關(guān)

大名鼎鼎的犀牛書和紅寶書可以備著，但是不適合零基礎(chǔ)的用戶學(xué)習(xí)。

JavaScript DOM編程藝術(shù) 《你不知道的JavaScript》，有上、中、下三卷。通過通俗易懂的語言講Javascript相關(guān)的知識講授出來。

Web性能相關(guān)

高性能網(wǎng)站建設(shè)指南

高性能網(wǎng)站建設(shè)進(jìn)階指南

Web性能權(quán)威指南

通過以上圖書的學(xué)習(xí)，需要動手完成多個練習(xí)小項目。比如個人簡歷、個人博客、新聞兩欄、三欄等布局、開發(fā)電商頁面，仿作餓了么等。將理論轉(zhuǎn)化為實際看得見的代碼，是初學(xué)者必經(jīng)之路。

2.視頻

國內(nèi)國內(nèi)提供在線視頻平臺很多，國內(nèi)以網(wǎng)易云課堂、慕課為主，主要針對IT相關(guān)的。

比如網(wǎng)易云課堂推出的初級前端開發(fā)工程師微專業(yè)。主要由網(wǎng)易本身的一線工程師授課。

慕課網(wǎng)的Web前端攻城獅 ，通過多個小視頻的集合，打造一個前端學(xué)習(xí)的路徑。但是不是一個老師系統(tǒng)的講解，所以學(xué)員學(xué)習(xí)起來，是不是能很好吸收消化就難說，而且項目實戰(zhàn)也相對簡單。

Udemy：提供各式各樣的在線視頻課程，學(xué)習(xí)者通過學(xué)習(xí)相關(guān)課程之后，獲得證書。個人感受：Udemy 基本上是個課程買賣超市，人人都可以制作課程在那里發(fā)布，所以課程質(zhì)量不一定最優(yōu)的，另外大多數(shù)課程是英文講課，中文課程相對較少，對于初學(xué)者來說是一個不小的挑戰(zhàn)。

四、總結(jié)

在做中學(xué)是學(xué)習(xí)新知識和新技能的最佳手段，而前端課程最好的模式是：

一方面學(xué)習(xí)基礎(chǔ)和實踐相關(guān)內(nèi)容，另外一方面在師傅或者導(dǎo)師的的帶領(lǐng)下，獨自完成多個真實的項目。從簡單的hello world到個人主頁，或者電商系統(tǒng)開發(fā)，通過圖書、視頻和在線學(xué)習(xí)平臺等多種，真正的做到從零基礎(chǔ)開始，扎實學(xué)好前端。新手入門要做的就是找到一個適合自己的學(xué)習(xí)方法，一步一個腳印，扎實的學(xué)習(xí)起來，最開始可以照著代碼敲出來，看效果。等度過了初學(xué)的迷茫期，找到了好學(xué)習(xí)方法，后面學(xué)習(xí)起來就輕松很多。