學(xué) Web 前端開發(fā)，培訓(xùn)還是自學(xué)靠譜？

時(shí)間：2022-09-03 17:00:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2022-09-03 17:00:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

這個(gè)回答 2021 年 4 月有更新放在原回答后

=== 2015 年原回答 ===

如果姑娘不介意，來(lái)，把手伸過(guò)來(lái)，讓叔手把手一對(duì)一教你，另外，把頭靠過(guò)來(lái)一點(diǎn)，這樣方便我跟你講話，最好再近一點(diǎn)嗯嗯，這樣學(xué)習(xí)前端才最靠譜，哈，開個(gè)玩笑。
培訓(xùn)靠不靠譜我不知道，對(duì)于我這種智商拙計(jì)的人來(lái)說(shuō)，看書自學(xué)是挺靠譜的，畢竟智商低老師講課我聽(tīng)不懂嘛，復(fù)習(xí)的時(shí)候不能倒帶，讓老師反反復(fù)復(fù)在講臺(tái)上單曲循環(huán)，也不能把老師綁在身邊，讓我能夠在做練習(xí)的時(shí)候碰到不懂東西可以隨時(shí)提問(wèn)。 前面有許多人都分享了各種學(xué)習(xí)資源，不過(guò)貌似就是沒(méi)人分享書單，那么我來(lái)給大家分享下我的自學(xué)前端所用的書單吧?？磿掷塾致?？誰(shuí)讓我拙呢，只能靠勤來(lái)補(bǔ)了，不然還能怎樣呢。這些書效果非常不錯(cuò)，20個(gè)月前，我還是一個(gè) local 廣告公司的苦逼 copy ，現(xiàn)在是一個(gè)能夠獨(dú)當(dāng)一面的前端工程尸了呢，收入也翻了許多倍呢，mac這種高大上的從前想都不敢想的東西，現(xiàn)在可以天天摸了有木有。下面的時(shí)間是我當(dāng)時(shí)學(xué)習(xí)的時(shí)候的所用的時(shí)間，每天大約學(xué)習(xí) 3~4 個(gè)小時(shí)這樣吧，每周大約會(huì)偷懶 1~2 天，OK 進(jìn)入正題。

第一步：入門 html & css ，用時(shí) 2 周
Head First HTML與CSS（第2版） (豆瓣)
head first 系列的書一直很受初學(xué)者歡迎，語(yǔ)言詼諧，圖片豐富，行大字稀，這本 700 多頁(yè)的書 2 周左右就能看完。此書的用法非常簡(jiǎn)單，只需打開代碼編輯器跟著作者的思路敲下去就可以了，一個(gè)個(gè)小案例從自己手上被敲出來(lái)，還真的很有成就感呢，因?yàn)槭菍懡o初學(xué)者的書，它假設(shè)讀者沒(méi)有任何相關(guān)的背景知識(shí)，新碰到的知識(shí)點(diǎn)，會(huì)用各種各樣的圖片說(shuō)明一遍，生怕讀者不懂。這本書學(xué)完，只要不是太復(fù)雜的頁(yè)面，基本上能夠臨摹出一套長(zhǎng)相上差不多的了吧。

第二步： 入門 javascript ，用時(shí) 3 周
JavaScript DOM編程藝術(shù) （第2版） (豆瓣)
這本書很薄， 280 多頁(yè)，一開始看的時(shí)候，其實(shí)我是拒絕的，因?yàn)楫?dāng)時(shí)我的編程基礎(chǔ)只有能夠用 c 寫出讓別人輸入兩個(gè)整數(shù)然后打印出這兩個(gè)數(shù)相加結(jié)果這種程序的水平。然而即便如此，這本書依然能夠讓我看得懂。此書前言的第一句就說(shuō)了，“它不是專門寫給程序員的，而主要是寫給 Web 設(shè)計(jì)師的。具體的說(shuō)，本書是為那些喜歡使用 CSS 和 HTML 并愿意遵守編程規(guī)范的 Web 設(shè)計(jì)師們編寫的?！焙冒?，雖然也不是寫給我這種初學(xué)的傻子的，但反正只要它不是寫給程序員的就好，因?yàn)楫?dāng)時(shí)我不是程序員啊，當(dāng)然我也不是設(shè)計(jì)師，但我會(huì)寫一丁丁 HTML 和 CSS ，這就夠了。這本書跟上本書一樣，新碰到的知識(shí)點(diǎn)，會(huì)專門用案例介紹一番，讓人在不帶著太多疑問(wèn)包袱的情況下跟著作者的思路走，用法也跟上一本書一樣，跟著作者的思路用編輯器一路敲下去，然后你會(huì)發(fā)現(xiàn)，自己能夠給網(wǎng)頁(yè)加特技了，duang~duang~ 棒棒的。

第三步：入門 jQuery，用時(shí) 3~4 周
鋒利的jQuery (豆瓣)
這本書只需要看 1-9 章就夠了，也就是 290 頁(yè)左右的內(nèi)容?？赐?《JavaScript DOM 編程藝術(shù)》 可能會(huì)覺(jué)得里面的程序很繁瑣，想要達(dá)到一些目的經(jīng)常需要拐來(lái)拐去的。那么 jQuery 會(huì)解決這種繁瑣，做到它所標(biāo)榜的 write less, do more ， 也因此 jQuery 成為了幾乎所有前端工程師必須要掌握的一個(gè)工具。這本書的內(nèi)容有些啰嗦和跳躍，后面幾章甚至還有錯(cuò)誤，不過(guò)有上一本書的作為基礎(chǔ)，配合搜索引擎是能夠解決看著本書時(shí)碰到的絕大部分疑問(wèn)的。打開編輯器跟著作者的思路把書上的例子都敲出來(lái)跑一遍，另外把最后的案例吃透。 jQuery 就算是入門了。

最重要的一步：復(fù)習(xí)鞏固，用時(shí) 6~12 周

OK 至此， 入門學(xué)習(xí)已經(jīng)完成，接下來(lái)是復(fù)習(xí)鞏固，這才是學(xué)習(xí)的真諦。這一步，不能省略，不能省略，不能省略，重要的事情說(shuō)三遍，否則會(huì)像一個(gè)學(xué)習(xí)了各種格斗技巧，但卻廋得皮包骨連站穩(wěn)都吃力的人一樣毫無(wú)戰(zhàn)斗力。此時(shí)可以用之前所學(xué)配合著搜索引擎模仿一些自己認(rèn)為覺(jué)得好看的頁(yè)面，學(xué)習(xí)使用一些第三方插件，大量模仿。無(wú)他，唯手熟爾。

這里列出一些在這個(gè)階段有可能會(huì)用到的工具書和一些網(wǎng)絡(luò)資源，希望能有所幫助。

工具書：

JavaScript高級(jí)程序設(shè)計(jì)（第3版） (豆瓣)

一本全面介紹原生 JavaScript 編程的書籍，從基礎(chǔ)內(nèi)容到高級(jí)內(nèi)容都有，任何階段的前端工程師都能從中學(xué)到知識(shí)。

精通CSS（第2版） (豆瓣)，這本書現(xiàn)在有第三版了，在這里（2021 年留）。

一本介紹 CSS 的書，把一些有用的 CSS 技巧匯集起來(lái)，供人學(xué)習(xí)，但可惜年代久遠(yuǎn)，不過(guò)依然有參考價(jià)值。

網(wǎng)絡(luò)資源：

阮一峰的個(gè)人網(wǎng)站

這里會(huì)用一些通俗的語(yǔ)言介紹許多 js 編程中重要的中高級(jí)問(wèn)題和技巧。

司徒正美 - 博客園

功能同上。但這里有個(gè)副作用，就是總時(shí)不時(shí)會(huì)聽(tīng)到一種叫做 Avalon 的玩意兒，但這不是現(xiàn)階段需要深究的東西，目前只用知道 Avalon 是英格蘭神話中拔出石中劍的亞瑟王戰(zhàn)敗后去的仙境就可以了。

w3school 在線教程

資源豐富的文檔，碰到不懂的不管是 HTML CSS JavaScript 方面的內(nèi)容都能夠來(lái)看看。

張?chǎng)涡?鑫空間

博主是一個(gè)把 CSS 研究得出神入化的男人，可以從他的博客里學(xué)到許多 CSS 相關(guān)的知識(shí)和技巧。

Bootstrap中文網(wǎng)

Bootstrap 是套優(yōu)秀的 UI 組件庫(kù)，其中的精華是它 css 代碼，使用它你會(huì)發(fā)覺(jué)以前各種卡手布局的問(wèn)題可以很快解決，并且不用自己寫太多 CSS 代碼就能弄出美如畫（至少不丑）的頁(yè)面。使用它，并且學(xué)習(xí)它的 less 代碼的組織和設(shè)計(jì)，可以從中學(xué)會(huì)許多 css 架構(gòu)的知識(shí)，棒棒的~

p.s less 是一種跟 CSS 很像，兼容 CSS 并且可以編譯為 CSS 的樣式語(yǔ)言

前面的步驟都完成了以后，恭喜入門，可以嘗試去找一些相關(guān)的工作了，同時(shí)也再也不用擔(dān)心被知呼上這位嚴(yán)重智商拙計(jì)的怪叔叔騷擾了。 在往后的路中可能會(huì)碰到許多奇奇怪怪的概念，比如 workflow ， mvc ， mmvc ， flux ，SPA 等類似的不是出自人類語(yǔ)言中的名詞，就說(shuō)明可以開始提高了：）

---

另外，可以點(diǎn)擊下邊鏈接免費(fèi)獲取更多學(xué)習(xí)資料，以及了解培訓(xùn)相關(guān)的內(nèi)容，方便最后選確定學(xué)習(xí)方案，自學(xué)或是培訓(xùn)。

=== 2017.4 更新 ===

這問(wèn)題回答的時(shí)候是 2015 年，我沒(méi)想到這個(gè)回答會(huì)影響那么多人，現(xiàn)在兩年過(guò)去了，前端這領(lǐng)域已經(jīng)變了樣，許多朋友吐槽現(xiàn)在學(xué)完上面所說(shuō)的內(nèi)容已經(jīng)很難找到工作了，但不管怎樣，上面的內(nèi)容還是基礎(chǔ)，入門的時(shí)候先按照上面的流程走一遍問(wèn)題不大，但現(xiàn)在畢竟已經(jīng)是 2017 年，入行前端的要求變得比原來(lái)多了不少內(nèi)容，所以學(xué)完了上邊內(nèi)容的朋友還需要繼續(xù)學(xué)習(xí)現(xiàn)代前端開發(fā)所需要掌握的知識(shí)，具體的路線可以參考我在另外一個(gè)答案的回答：https://www.zhihu.com/question/55886635/answer/147275692

另外之前提到的 w3school 在線教程 里面的內(nèi)容比較老舊，現(xiàn)在有了更好的選擇，那就是 MDN ，它的地址在這： JavaScript 。

=== 2021.4 更新 ===

推薦先讀 2015 年的回答再看這里

現(xiàn)在是 2021 年，其實(shí)這些年來(lái)不少人給我留言，說(shuō)這個(gè)回答幫助了許多他們走上了前端的道路，我在 2017 年更新過(guò)一次，現(xiàn)在再過(guò)去了四年。回過(guò)頭看，很多東西已經(jīng)物是人非，在我初學(xué)路上對(duì)我有很多幫助的司徒正美老師已經(jīng)離開了，說(shuō)來(lái)慚愧，我從來(lái)沒(méi)有到他的博客上給他留言說(shuō)過(guò)一句「謝謝」，我也從當(dāng)初的初學(xué)者變成了創(chuàng)業(yè)公司的技術(shù)負(fù)責(zé)人，文風(fēng)也不再那么戲謔（可能大家就是喜歡戲謔的文風(fēng)呢？）就我在工作中招聘人的情況看，前端入行的門檻比起 2015 年和 2017 年高了許多，這個(gè)回答中提到的一些內(nèi)容已經(jīng)過(guò)期了，有一些內(nèi)容依然值得學(xué)習(xí)，還有一些新加入的內(nèi)容要考慮。

總的來(lái)說(shuō)，現(xiàn)在想要找到前端的工作，要求比 17 年高了不少，但是總歸是有途徑的，我簡(jiǎn)單補(bǔ)充一下吧，首先是基礎(chǔ)部分。

基礎(chǔ)部分調(diào)整（也就是 2015 年的原回答）

第一步：入門的 Head First HTML與CSS（第2版） (豆瓣) 這本書里邊說(shuō)的知識(shí)，是基礎(chǔ)中的基礎(chǔ)在當(dāng)下依然有用，這本書依然值得推薦。

第二步：JavaScript DOM編程藝術(shù) （第2版） (豆瓣) 這本書里邊的內(nèi)容非?；A(chǔ)，但是基礎(chǔ)到在現(xiàn)實(shí)的項(xiàng)目開發(fā)中許多已經(jīng)過(guò)時(shí)不再用了，但是作為一本能讓人從 0 到 1 慢慢學(xué)編程但又很薄的書還是值得去看的，花兩三周的時(shí)間對(duì) JavaScript 和對(duì)前端開發(fā)最經(jīng)典的編程方式完成一次觀賞之旅，同時(shí)感受到前端編程到底是在編個(gè)啥，抱著這個(gè)目的看這本書就好，另外還有一本類似功效的書，是深入淺出JavaScript（中文版）兩本選擇一本看就可以，看完了能夠?qū)W會(huì) JavaScript 最經(jīng)典的樣子，也為現(xiàn)代開發(fā)打下基礎(chǔ)。

第三步： 鋒利的jQuery (豆瓣) 這本書已經(jīng)不需要再看了，jQuery 的時(shí)代已經(jīng)過(guò)去，我們很少再需要寫 jQuery 代碼了。把節(jié)省下來(lái)的時(shí)間拿去做別的事情會(huì)更有意義。那么這一步改為學(xué)習(xí) React 吧，React 是三大前端框架中的一個(gè)，三大框架中只有 React 我是自學(xué)入門的，其他的兩個(gè)都是觸類旁通，我就在這里介紹 React 和當(dāng)時(shí)我學(xué)習(xí)時(shí)所用到的資源吧，首先也是最重要的 React官方文檔的入門教程 這里簡(jiǎn)扼的介紹了 React 的使用方式，推薦搭建本地環(huán)境（教程中有），這樣你能領(lǐng)略到有比 JavaScript DOM編程藝術(shù) （第2版） (豆瓣) 或者 深入淺出JavaScript（中文版） 介紹的，更現(xiàn)代前端工程的開發(fā)方式，是天壤之別！另外你也會(huì)看到他里邊的代碼跟你在第二步中學(xué)到的代碼語(yǔ)法有出入，是因?yàn)樗昧烁F(xiàn)代的 JavaScript，也就是我們?nèi)粘ｉ_發(fā)時(shí)會(huì)用到的 ES6/7 ，你可以在 ES 6 入門——阮一峰 中查看相關(guān)知識(shí)。

第四步：徹底吃透 React 的官方教程以后，相信你能夠自己寫寫玩具類型的小項(xiàng)目了，接下來(lái)就要開始學(xué)習(xí) React 技術(shù)棧了，React 技術(shù)棧的意思就是以 React 為核心的一系列技術(shù)的組合，在這里推薦一本書 深入淺出React和Redux 這里會(huì)介紹如何使用 React 以及一系列與之相關(guān)的技術(shù)，來(lái)完成開發(fā)任務(wù)，但是這本書的成書年代是在 2017 年底，在閱讀的時(shí)候務(wù)必安裝的是和書中一模一樣的 React 版本避免出錯(cuò)，相信我，能順利的學(xué)習(xí)舊版然后在過(guò)渡到新版的過(guò)程，會(huì)比直接上新版然后一直踩雷要平滑得多的多得多。

最后一步也是最重要的一步：練習(xí)

這步不能省略不能省略不能省略不能省略。你可以臨摹一堆頁(yè)面，可以作出自己的 v2ex 或者 cnodejs 客戶端（v2ex 和 cnodejs 都是技術(shù)論壇，他們開放了數(shù)據(jù)接口，學(xué)完前面四步你就知道我在說(shuō)啥了），然后拿出自己最滿意的個(gè)人作品，投簡(jiǎn)歷去吧。

工具書：

JavaScript高級(jí)程序設(shè)計(jì)（第3版） (豆瓣) 這本書中的內(nèi)容現(xiàn)在許多用不上了，買來(lái)收藏吧，可能極少情況下會(huì)需要查閱

精通CSS（第2版） (豆瓣)，這本書現(xiàn)在有第三版了，在這里，新版我沒(méi)看過(guò)，但是舊版的知識(shí)本身就很硬核，新版應(yīng)該也不會(huì)太差吧。

---

最后，可以點(diǎn)擊下邊鏈接免費(fèi)獲取更多學(xué)習(xí)資料，以及了解培訓(xùn)相關(guān)的內(nèi)容方便最后確定學(xué)習(xí)方案，自學(xué)或是培訓(xùn)。