怎么學(xué)習(xí)前端開發(fā)？求推薦學(xué)習(xí)路線？
時(shí)間：2023-10-24 15:00:01 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-10-24 15:00:01 來源：網(wǎng)站運(yùn)營
怎么學(xué)習(xí)前端開發(fā)？求推薦學(xué)習(xí)路線？：
授人以魚不如授人以漁，來看我的這篇文章就夠了。
寫文之前，按照國際慣例，先來喊一遍slogan：“
人在前端路，先聽土哥講”(喊得不齊，再來一遍~
)。嗯嗯，如果有新來的朋友還不認(rèn)識(shí)我，我可以簡(jiǎn)單介紹下：
你好，我是碼農(nóng)土哥，高中學(xué)的是文科，大學(xué)報(bào)的專業(yè)卻是計(jì)算機(jī)，人生就是這么矛盾。畢業(yè)之后稀里糊涂在前端路上一走就走了8年，現(xiàn)在還是一家互聯(lián)網(wǎng)公司的前端leader（我也不知道自己是怎么當(dāng)上的）。
這幾年一路走來略有心得，從了編程，也不能荒廢了文科生的手藝，所以平時(shí)有空會(huì)寫點(diǎn)文章，關(guān)于自己的職場(chǎng)、人生經(jīng)驗(yàn)之談。
若不是生活所迫，誰會(huì)把自己弄的一身才華。[ 手動(dòng)滑稽 ]好了，自我介紹的部分就到此結(jié)束，如果你喜歡我，我以后再慢慢跟你講我的故事。
今天，土哥準(zhǔn)備分享一些關(guān)于應(yīng)屆生學(xué)前端的話題，如果戳中你的內(nèi)心，請(qǐng)含淚讀完。愿你
讀前有耐心，讀完有信心。
土哥根據(jù)平時(shí)接觸到的一些應(yīng)屆生粉絲來信，總結(jié)了幾點(diǎn)，后面會(huì)展開敘述，中間可能會(huì)穿插一些我的入行經(jīng)歷。咱們先看問題：
1. 學(xué)的比較淺，什么都會(huì)點(diǎn)，但都不深入。2. 不會(huì)利用搜索引擎。3. 都2019年了，投簡(jiǎn)歷還上趕集網(wǎng)和58同城4. 不懂得輸出個(gè)人項(xiàng)目。5. 培訓(xùn)還是自學(xué)，有點(diǎn)糾結(jié)6. 學(xué)習(xí)路線不清楚，比較迷茫1. “學(xué)的比較淺，什么都會(huì)點(diǎn)，但都不深入”這是粉絲來信中提到最多的一個(gè)問題了，學(xué)的比較泛泛，看似學(xué)會(huì)了很多東西，其實(shí)都不扎實(shí)。其中一位應(yīng)屆生童鞋學(xué)前端的經(jīng)歷就充分展示了這方面的“才華”，我說下你聽聽，他的身上有沒有你的影子？
“入前端這個(gè)坑完全是由于個(gè)人興趣(在此之前，我的興趣一直是如何成為一名糕點(diǎn)師...)
在 15 年左右暑期，閑來無事學(xué)習(xí)PS期間，對(duì)前端起了點(diǎn)興趣，當(dāng)時(shí)主要是看到別人ps里有個(gè)生成css的功能，當(dāng)時(shí)感覺css好像很厲害的樣子（目前為止，關(guān)于前端的確是css最難.....），然后就點(diǎn)開了W3c，開始了html+css的旅程，當(dāng)時(shí)反正偶爾學(xué)學(xué)，直到能寫一些簡(jiǎn)陋的靜態(tài)頁面的地步，之后由于沉迷游戲就沒有怎么碰前端相關(guān)內(nèi)容。
然后到了 16 年初，當(dāng)時(shí)想著自己作為一個(gè)有為青年，不能沉迷游戲，于是想起了曾經(jīng)學(xué)過的 html+css ，于是又開始鼓搗，當(dāng)時(shí) html5+css3 正火，于是去學(xué)習(xí)了一遍，然后發(fā)現(xiàn) js 是繞不過去的，于是開始入了 js 的坑，從此難以自拔。
初學(xué) js 時(shí)，學(xué)的紅紅火火恍恍惚惚，在有道云筆記上寫了上百頁的相關(guān)筆記，并且也學(xué)習(xí)了 jq?；藗€(gè)把月把 ES5 相關(guān)內(nèi)容都過了好幾遍后，就開始試著使用 bootstrap 等，一些常用的，大家推薦的 ui 框架，寫了一些頁面啥的。
之后由于經(jīng)常逛本站，以及其他一些站點(diǎn)，突然發(fā)現(xiàn)好像自己趕不上潮流了，有個(gè)什么叫 node 的很火，當(dāng)時(shí)對(duì) node 還沒什么印象，于是開始的 node 的學(xué)習(xí)之旅，由原生，轉(zhuǎn)戰(zhàn)至 express 框架（目前使用 koa2 ），也寫了一些個(gè)人項(xiàng)目，例如仿微博啥的，學(xué)習(xí) node 期間還把 mongodb 學(xué)習(xí)了一遍，并且把 python 教程過了一遍。
之后有段時(shí)間突然對(duì)爬蟲挺感興趣，于是就試著用 node 寫了一些爬蟲(博客園，本站)
js 也學(xué)會(huì)了， node 也會(huì)寫了，感覺好像世界完整了，然而逛逛 github ，突然發(fā)現(xiàn)別人的 js 為啥和我的 js 不太一樣。它妹的，原來是是啥子叫做 ES6 的,還有 webpack ，以及 babel....于是開始入了 es6 的坑，不得不說， es6 相關(guān)語法 Class 和其他的，以及 es7 提供的 async 函數(shù)與對(duì)象解構(gòu)真是好用... es6 也大概會(huì)了，然后順其自然的就遇到了 MVVM 框架
起初學(xué)習(xí) react ，跟著教程走了一遍，自己也寫了些小 demo ，但 jsx 寫著不太舒服
之后遇到了 vue2 ，框架精簡(jiǎn)，入手快，作者大大非常活躍并且是我們中國人，于是就入坑了。
”以上就是粉絲學(xué)前端的經(jīng)歷，所學(xué)內(nèi)容幾乎涵蓋了前端的所有內(nèi)容，但是他在描述的過程當(dāng)中，有一個(gè)詞使用頻率很高，“過了一遍”。這樣的后果就是，自己看著什么都懂，但是讓你動(dòng)手寫個(gè)項(xiàng)目，還是有點(diǎn)費(fèi)勁，關(guān)鍵是沒有養(yǎng)成編程思維。
對(duì)于這個(gè)問題，土哥的建議：不要淹沒在前端龐大的知識(shí)體系里，首先要看清楚，前端三板斧，無非是html、css、javascript，先把這三樣學(xué)懂學(xué)會(huì)學(xué)明白了，基礎(chǔ)打扎實(shí)，然后才是框架的學(xué)習(xí)，或者說工具的應(yīng)用。
其他的知識(shí)內(nèi)容，無非是這三樣的衍生、延伸?？赡芤婚_始會(huì)走得慢，但是每一步都走的穩(wěn)，這樣一步一個(gè)腳印走下來，你會(huì)發(fā)現(xiàn)，后面的路，你會(huì)越走越快，越來越駕輕就熟。這就是底子打得好，帶來的好處。
2. “不會(huì)利用搜索引擎”都2019年了，如果你還想入前端的坑，必須要學(xué)會(huì)利用搜索引擎。俗話說，
內(nèi)事不決問百度，外事不決問google。在給我來信的應(yīng)屆生童鞋里面，我發(fā)現(xiàn)好幾個(gè)人都是不太會(huì)利用搜索引擎來幫助自己學(xué)習(xí)前端、找前端的學(xué)習(xí)資源。
說實(shí)話，這個(gè)問題我之前也有，有點(diǎn)像照鏡子。當(dāng)初我在學(xué)校的時(shí)候，我們老師給我什么資料、視頻教程，我就看什么，根本沒想到要利用百度去找前端資源，有點(diǎn)認(rèn)知局限了。后來我們老師說，這些資源網(wǎng)上都能找得到，就看你會(huì)不會(huì)找了。
對(duì)于這個(gè)問題，土哥的建議：經(jīng)常去一些技術(shù)類社區(qū)、論壇、貼吧，甚至是博客，都會(huì)找到一些適合自己的學(xué)習(xí)資源，大家應(yīng)該都懂，只不過你沒往這方面想而已。
比如你打開百度，輸入關(guān)鍵詞“前端開發(fā) 學(xué)習(xí)路線” 等等，關(guān)鍵詞一定要以空格隔開，這樣搜索出來的內(nèi)容可能就會(huì)比較符合你的預(yù)期了。
但是可能你也知道，百度在國內(nèi)的搜索引擎市場(chǎng)屬于一家獨(dú)大，搞了一套競(jìng)價(jià)排名的賺錢路子，可能你輸入關(guān)鍵詞之后，出來的第一頁都是培訓(xùn)機(jī)構(gòu)的廣告鏈接，但是沒關(guān)系，你可以翻到第二頁，甚至是之后的頁數(shù)，總能找到你想要的干貨資源。
如果百度滿足不了你的胃口，當(dāng)然你也可以試著用google搜索，谷歌搜索真香，按照自然排名，干貨也比較多（當(dāng)然，如果你能fan的了qiang）。
3. “都2019年了，投簡(jiǎn)歷還上趕集網(wǎng)和58同城”自己找工作的話 像web前端這樣的工作，就不要去 趕集網(wǎng)和58同城了，這兩個(gè)網(wǎng)站已經(jīng)被中介給腐蝕了，百分之80多的招聘信息不是培訓(xùn)就是中介。
以前boss直聘也可以，但是招聘實(shí)習(xí)生的比較少，而且現(xiàn)在網(wǎng)上爆料，傳銷比較多，不安全。我推薦拉勾網(wǎng)比較好一點(diǎn)。
如果拉勾網(wǎng)還不和你的胃口，你也可以選擇智聯(lián)招聘、中華英才網(wǎng)、大街網(wǎng)以及獵聘網(wǎng)。如果這些正常的路子，都不足以讓你得到一個(gè)面試的機(jī)會(huì)。那么下面我要講的這個(gè)話題，你就要認(rèn)真聽了。
4. “不懂得輸出個(gè)人項(xiàng)目”投簡(jiǎn)歷的渠道固然重要，但是簡(jiǎn)歷上是否有干貨更重要。HR和面試官更看重的是你的能力，項(xiàng)目輸出。到現(xiàn)在，還有好多應(yīng)屆生童鞋應(yīng)聘的時(shí)候，拿著一份精美的簡(jiǎn)歷，和一個(gè)存儲(chǔ)著個(gè)人作品的U盤。U盤無非是些html/css靜態(tài)頁面，還有一些js、jq寫的動(dòng)態(tài)效果，前兩年是仿站，仿一些大型電商網(wǎng)站的首頁，PC端的。最近兩年，無非是從PC端仿到了移動(dòng)端 APP上，仿的內(nèi)容還是一些聲名在外的APP的首頁及二級(jí)頁面。稍微做的好一點(diǎn)的，也就是子頁面做的比較多，看著像一個(gè)項(xiàng)目。
像這些個(gè)人作品，面試官是看不上的。一個(gè)是因?yàn)槟憷锩嬗玫倪€是傳統(tǒng)的那一套，像構(gòu)建工具、腳手架、流行的框架，以及一些流行的語言，你在作品里都沒有體現(xiàn)。第二個(gè)是因?yàn)槟愕倪@些作品不是線上的項(xiàng)目，現(xiàn)在很多面試官面試，都是問你有沒有線上的項(xiàng)目。不得不說，現(xiàn)在前端的門檻提高了。
所以，土哥建議平時(shí)不光要多學(xué)習(xí)，多敲代碼，還要懂得輸出、打磨自己的個(gè)人線上項(xiàng)目。平時(shí)有空可以研究下域名、服務(wù)器等層面的東西，將自己的項(xiàng)目放到網(wǎng)上，應(yīng)聘的時(shí)候可以自信的讓面試官看自己一手搭建的網(wǎng)站。
或者有的童鞋不想折騰，也有辦法。去github上面注冊(cè)一個(gè)賬號(hào)，然后將自己的項(xiàng)目代碼傳上去，這件事情在校期間就可以開始做了，每天學(xué)習(xí)，將自己的心得體會(huì)、頁面代碼都傳上去，并且經(jīng)常維護(hù)。等到你畢業(yè)面試的時(shí)候，就有一個(gè)屬于自己的完整的線上項(xiàng)目了。
5. “培訓(xùn)還是自學(xué)，有點(diǎn)糾結(jié)”關(guān)于這個(gè)話題，土哥還是有一點(diǎn)發(fā)言權(quán)的。培訓(xùn)還是自學(xué)，這個(gè)要因人而異。我先說下培訓(xùn)和自學(xué)各自的特點(diǎn)。
培訓(xùn)的優(yōu)點(diǎn)：有學(xué)習(xí)氛圍，有老師指導(dǎo)帶路，能迅速入門，也會(huì)有實(shí)戰(zhàn)項(xiàng)目的練手的機(jī)會(huì)。
培訓(xùn)的缺點(diǎn)：學(xué)費(fèi)貴，周期短，填鴨式培訓(xùn)，學(xué)完不一定能找到工作，培訓(xùn)機(jī)構(gòu)包就業(yè)的話，千萬不能信。
自學(xué)的優(yōu)點(diǎn)：跟著自己的興趣走，不用花太多錢，網(wǎng)上學(xué)習(xí)資源一大堆。
自學(xué)的缺點(diǎn)：耗時(shí)較長(zhǎng)，有時(shí)候可能會(huì)走彎路，沒有老師指點(diǎn)。
如果你自控能力較差，希望有人帶，有項(xiàng)目實(shí)戰(zhàn)練手，有就業(yè)指導(dǎo)，那么可以選擇培訓(xùn)班學(xué)習(xí)。
如果你自制力良好，學(xué)習(xí)能力強(qiáng)，內(nèi)心驅(qū)動(dòng)力十足，還不想花太多的錢，可以考慮自學(xué)。
當(dāng)然，不管你選擇線下實(shí)體培訓(xùn)還是在家自學(xué)，還有一種選擇，就是線上付費(fèi)課程，比如慕課網(wǎng)的前端實(shí)戰(zhàn)課程，如果你前端基礎(chǔ)知識(shí)已經(jīng)掌握，可以選擇這類型的課程，相信你會(huì)學(xué)到很多干貨內(nèi)容。
6. “學(xué)習(xí)路線不清楚，比較迷?！?/b>
關(guān)于學(xué)習(xí)路線的這個(gè)話題，讓我想起了我在自學(xué)前端時(shí)的畫面?？赡苣銈冴P(guān)注我這么久，還不知道我是怎么入門的吧！說實(shí)話，我一開始是看著一個(gè)叫李炎恢老師的課程入門的，他有一個(gè)個(gè)人的網(wǎng)站，叫飄城web俱樂部（http://www.ycku.com/），因?yàn)槭侨腴T導(dǎo)師，所以就直接貼出域名地址了。他錄制的視頻教程包括了很多內(nèi)容，比如Dreamweaver、html5、JavaScript、jQuery、bootstrap等等，甚至還有后端的PHP的，一應(yīng)具有。
我那會(huì)光看html css JavaScript的視頻就看了不下七八遍，這是真事，都是跟著視頻一行一行的敲代碼，跟著敲完了里面的實(shí)戰(zhàn)項(xiàng)目，感覺思路都理順了，然后就開始脫離視頻，自己寫項(xiàng)目代碼，就這樣一步一步走過來的。（在此，感謝李炎恢老師帶我入門）
當(dāng)然，這是我的學(xué)習(xí)方式。不過給你們的建議，還是不要這么野生的好，畢竟前端已經(jīng)過了野蠻生長(zhǎng)的時(shí)期，現(xiàn)在都是精雕細(xì)琢，團(tuán)隊(duì)作業(yè)。所以，我給你們的建議，一定要是符合公司用人要求的。
學(xué)習(xí)路線的話：
第一，跟著w3school的html、css的文檔過一遍，邊看邊動(dòng)手練習(xí)demo；
第二，學(xué)習(xí)js的話，推薦你們跟著廖雪峰大神的JavaScript教程學(xué)習(xí)一遍，或者是跟著阮一峰老師的ecmascript6入門的教程學(xué)習(xí)一遍，這些你們百度就能查得到，我就不給你們貼地址了。學(xué)的過程中，不要求速度，一定要慢慢來，充分理解知識(shí)點(diǎn)，都動(dòng)手寫，每一行代碼都認(rèn)真思考，為什么要這么寫。
第三，書籍的話，我推薦你們看《javascript DOM編程藝術(shù)》那本書，跟著書里面的例子一行一行手敲代碼，等你跟著學(xué)完之后，你內(nèi)心會(huì)有很大的成就感，燃起了你對(duì)學(xué)習(xí)js的熱情和興趣。
這本書看完的話，我才會(huì)推薦你看《javascript高級(jí)程序設(shè)計(jì)》。關(guān)于《JavaScript權(quán)威指南》這本淘寶團(tuán)隊(duì)出的書籍，我不建議前端新人去看，因?yàn)槟銉?nèi)功還不夠，首先那本書很厚，其實(shí)那本書像前端人的字典。如果你貿(mào)然去看的話，可能會(huì)打擊你學(xué)習(xí)js乃至前端的自信心，以及編程興趣。
看這本書的契機(jī)很重要，否則你千萬不要碰。這是土哥作為過來人的一點(diǎn)建議。（不過我可能猜到了人性好奇的心理，越三令五申不讓看的書，反而越想看～）
當(dāng)然，等你走過了這些路子之后，你內(nèi)心應(yīng)該會(huì)有一股沖動(dòng)勁，我該動(dòng)手寫點(diǎn)項(xiàng)目了～
以上，就是我對(duì)「應(yīng)屆生學(xué)前端的通病」的一個(gè)回復(fù)（純屬碎碎念）。
親愛的應(yīng)屆生童鞋，我今天想到的可能就是這些，想到哪兒寫哪兒，一不小心手敲了這么多行文字。希望我說的“只言片語”能幫助到你，也祝你在web前端的道路上，越走越遠(yuǎn)。如果你還有什么前端困惑，職業(yè)規(guī)劃啥的，歡迎到下方留言區(qū)留下你的Question，我可能下篇文章就會(huì)回復(fù)你。
關(guān)鍵詞：學(xué)習(xí),推薦,路線
在線咨詢