本人是某雙非一本大學(xué)的大四學(xué)生摆昧，專業(yè)學(xué)的是電子信息科學(xué)與技術(shù)，說實(shí)話蜒程，雖然它是我的專業(yè)绅你，但我對(duì)它不是很了解。高考結(jié)束根據(jù)就業(yè)率選擇了這個(gè)專業(yè)昭躺，確實(shí)就業(yè)率很高（畢竟沒有三方協(xié)議學(xué)校不給發(fā)畢業(yè)證忌锯，怎么辦？很多人隨便找個(gè)單位领炫、場(chǎng)子簽個(gè)勞動(dòng)合同）偶垮，一句話：垃圾。而自己在大二的時(shí)候就在想，這個(gè)專業(yè)畢業(yè)后能干嘛似舵？如果我現(xiàn)在被迫輟學(xué)脚猾？我能靠它養(yǎng)活自己?jiǎn)幔看鸢甘牵翰荒堋?/p>

比較慶幸的是自己通過朋友帶動(dòng)下從 3 月初（大三下學(xué)期）開始零基礎(chǔ)自學(xué)前端啄枕，在 11 月初拿到字節(jié)跳動(dòng)和多益網(wǎng)絡(luò)的前端 校招 offer婚陪，歷時(shí) 8 個(gè)月。與其他拿到大廠 offer 的同學(xué)比起來频祝，我應(yīng)該是比較菜的泌参，嘿嘿。不過我是在沒有基礎(chǔ)常空，基本沒人帶的情況下沽一，自己摸索學(xué)習(xí)的。通過不斷筆試面試積累經(jīng)驗(yàn)漓糙，在沒有實(shí)習(xí)經(jīng)歷的情況下拿到大廠 offer铣缠。

所以在轉(zhuǎn)行這方面自己克服了許多困難，也積累了一些適合非科班學(xué)生自學(xué)轉(zhuǎn)行的方法昆禽。為了幫助入坑的朋友蝗蛙，編寫了本指南十分細(xì)致，親測(cè)可行醉鳖。如果你想要轉(zhuǎn)行做前端開發(fā)捡硅，卻又苦于沒有學(xué)習(xí)方向，學(xué)習(xí)路徑和學(xué)習(xí)資源相信看完這篇指南后你會(huì)有所啟發(fā)盗棵，快速上手壮韭。

指南分為以下7個(gè)方面。

一纹因、自學(xué)

下圖是本人大致的學(xué)習(xí)路線圖（有點(diǎn)長(zhǎng)放大看）

知識(shí)脈絡(luò)

1惊畏、前端三大基礎(chǔ)（前期）（重點(diǎn)是牢，中等難度）
前端三大基礎(chǔ)，即HTML(5)陕截，CSS(3)驳棱，JavaScript 這三門技術(shù)。

資源：JavaScript知識(shí)點(diǎn)合集

Tips：JS進(jìn)階部分可以在準(zhǔn)備面試時(shí)再開始學(xué)农曲。

2社搅、前端框架（前中期）（重點(diǎn)驻债，較難）
Vue和React是目前在前端應(yīng)用最廣泛的兩個(gè)開發(fā)框架，工作中一般都是用框架開發(fā)形葬。兩者是同級(jí)并列關(guān)系合呐。個(gè)人覺得可以先學(xué)Vue，等到第一篇的其他比較重要技術(shù)棧的學(xué)完了再學(xué)React笙以。

資源：Vue\React面試題集

Tips：現(xiàn)在新項(xiàng)目一般都用 Vue 或 React淌实，不太用 jQuery，所以 jQuery 可學(xué)可不學(xué)猖腕，一般也不怎么考拆祈；看視頻學(xué)習(xí)入門會(huì)比較快，適合零基礎(chǔ)的新手倘感，直接看官方文檔學(xué)習(xí)會(huì)比較難一些放坏。有空還可以學(xué)一下 Vue 的 SSR 技術(shù)。

3老玛、Node.js（中期）（次重點(diǎn)淤年，中等）
Node 是一個(gè)讓 JavaScript 運(yùn)行在服務(wù)端的開發(fā)平臺(tái)，可以讓我們用前端的語法開發(fā)后端蜡豹。很多前端崗位的要求會(huì) Node.js麸粮。

資源：深入淺出Node.js

Tips: Node.js 和小程序開發(fā)一樣，是加分項(xiàng)镜廉。不過比小程序重要一些弄诲。

4、小程序開發(fā)（后期）（選學(xué)桨吊，簡(jiǎn)單）
我拿到 offer 時(shí)還沒開始學(xué)小程序威根。不過我還是有2次技術(shù)二面被問到過凤巨。有時(shí)間還是學(xué)一下视乐，而且小程序入門簡(jiǎn)單，沒學(xué)過框架也可以學(xué)敢茁，之所以寫后期是因?yàn)橛X得比框架次要佑淀。

資源：微信小程序開發(fā)實(shí)戰(zhàn)

5、計(jì)算機(jī)基礎(chǔ)
傳統(tǒng)的計(jì)算機(jī)基礎(chǔ)一般是指數(shù)據(jù)結(jié)構(gòu)與算法彰檬，計(jì)算機(jī)網(wǎng)絡(luò)伸刃，操作系統(tǒng)，數(shù)據(jù)庫逢倍，計(jì)算機(jī)組成原理捧颅，編譯原理等，作為前端開發(fā)入門者较雕，我們只需要重點(diǎn)學(xué)習(xí)數(shù)據(jù)結(jié)構(gòu)與算法和計(jì)算機(jī)網(wǎng)絡(luò)即可碉哑。

Tips：應(yīng)對(duì)工作和面試需要重點(diǎn)學(xué)習(xí)應(yīng)用層的協(xié)議（HTTP(S)挚币，Websocket 等）。面試時(shí) 還會(huì)考察一些傳輸層的協(xié)議（TCP 和 UDP）扣典。

6妆毕、前端工程化
有很多初學(xué)者或者還沒有大公司經(jīng)驗(yàn)的同學(xué)在寫項(xiàng)目時(shí)都是單打獨(dú)斗的，但更多的一線項(xiàng)目都需要至少 2~3 個(gè)甚至更多的人員一同參與開發(fā)的贮尖。而這種時(shí)候笛粘，因?yàn)槊總€(gè)人的水平和開發(fā)習(xí)慣都是不一致的，而這些不一致就直接導(dǎo)致整體研發(fā)效率和項(xiàng)目進(jìn)度受到極大的影響湿硝。所以就需要一種能夠讓大家在一個(gè)水平線上進(jìn)行開發(fā)的模式薪前，工程化需求很有必要。

工程化協(xié)作
版本控制
Git：GitHub图柏、GitLab序六、Coding……
SVN：BitBucket、Google Code……
代碼樣式檢查工具 JavaScript/TypeScript：ESLint
測(cè)試工具
性能優(yōu)化
單元測(cè)試：Karma蚤吹、Jest例诀、Mocha……
持續(xù)集成：CI

工程化開發(fā)工具
依賴包管理工具：npm、yarn
打包工具：webpack裁着、rollup
腳手架工具：create-react-app……

二繁涂、項(xiàng)目

如果找不到項(xiàng)目可以做矗积，可以在網(wǎng)上買一些做項(xiàng)目的課程（實(shí)戰(zhàn)課）全肮，學(xué)完后自己借鑒課程的項(xiàng)目，改進(jìn)或者重新做一個(gè)項(xiàng)目棘捣。我是在GitHub上學(xué)了一門用Vue開發(fā)仿拼多多的前端的實(shí)戰(zhàn)課辜腺，后來又學(xué)了一門用Node.js開發(fā)的服務(wù)端的實(shí)戰(zhàn)課。然后把結(jié)合兩門所學(xué)乍恐，自己做了一個(gè)仿美團(tuán)網(wǎng)的項(xiàng)目评疗，并且前端用Vue做，后端用Node.js做茵烈，使其成為一個(gè)自己完成的百匆、全棧的項(xiàng)目（當(dāng)然了，我這種級(jí)別的項(xiàng)目應(yīng)對(duì)大廠校招其實(shí)只是勉勉強(qiáng)強(qiáng)罷了呜投，好在大廠校招面試比較看重基礎(chǔ)）加匈。

其他方法我覺得可以是通過加入工作室寄症、找計(jì)算機(jī)學(xué)院的老師、或者直接去網(wǎng)上找外包等方式來找項(xiàng)目做矩动，具體我沒去實(shí)踐過有巧，不是很了解。所以最好是大二悲没、大三去找個(gè)實(shí)習(xí)篮迎，這樣子就不會(huì)有項(xiàng)目經(jīng)歷和實(shí)習(xí)經(jīng)歷不足的困擾。

三示姿、簡(jiǎn)歷

學(xué)習(xí)制作簡(jiǎn)歷推薦看一下這個(gè)簡(jiǎn)歷包裝

四甜橱、簡(jiǎn)歷投遞

1、關(guān)于工作和實(shí)習(xí)
找工作和找實(shí)習(xí)是不一樣的栈戳。找工作的主體是應(yīng)屆生（大四）岂傲，對(duì)應(yīng)到公司官網(wǎng)的投遞選項(xiàng)是“校園招聘”。找實(shí)習(xí)的主體一般是大一到大三的學(xué)生子檀，對(duì)應(yīng)到公司官網(wǎng)的投遞選項(xiàng)是“日常實(shí)習(xí)”镊掖。日常實(shí)習(xí)可能可以轉(zhuǎn)正拿到offer，也可能沒辦法轉(zhuǎn)正褂痰，而參加校園招聘通過后便可以拿到offer亩进。不過實(shí)習(xí)經(jīng)歷是找工作的重要加分項(xiàng)。

日常實(shí)習(xí)一般全年都有在招缩歪，而校招（校園招聘）分為秋招和春招兩波归薛。秋招是在大四上學(xué)期，一般7月開始有提前批匪蝙，8主籍、9月為正式批高峰期，10逛球、11月開始收尾千元。春招是在大四下學(xué)期開始，應(yīng)該是2需忿、3月開始（春招具體時(shí)間我不太確定诅炉，沒參加過）蜡歹。建議積極參加秋招屋厘，最好是在秋招就拿到offer，因?yàn)榇赫械恼衅感枨髸?huì)小很多月而，競(jìng)爭(zhēng)也很大汗洒。

2、學(xué)歷問題
我的學(xué)歷是雙非一本父款，非計(jì)算機(jī)專業(yè)溢谤，在投遞簡(jiǎn)歷和面試大廠時(shí)瞻凤，感覺大部分公司不會(huì)卡我的學(xué)歷或?qū)I(yè)。但是說實(shí)話世杀，如果你的學(xué)歷比我的還低很多的話阀参，我就不確定會(huì)不會(huì)被卡簡(jiǎn)歷了。不過按照我的方法去做瞻坝，即使進(jìn)不了大廠蛛壳，校招進(jìn)個(gè)中小廠是可以的，先進(jìn)入這個(gè)行業(yè)所刀，以后再找機(jī)會(huì)跳槽也是有可能的衙荐。

3、跨專業(yè)問題
有一些互聯(lián)網(wǎng)公司校招可能會(huì)卡專業(yè)浮创，不過如果有一本的學(xué)歷忧吟，還是可以通過很多大廠的簡(jiǎn)歷篩選門檻的，當(dāng)然斩披，前提是你簡(jiǎn)歷的格式和內(nèi)容過關(guān)溜族。我參加過幾個(gè)大公司的面試，基本感覺不到對(duì)跨專業(yè)者的歧視垦沉。所以不用害怕跨專業(yè)會(huì)被歧視之類的斩祭，主要還是看能力。能力不行不要老是歸因到專業(yè)歧視上面去乡话。

招聘信息來源
糯菝担客網(wǎng)，公司官網(wǎng)绑青，公司公眾號(hào)诬像，學(xué)校，一些校招公眾號(hào)和校招群等闸婴。

五坏挠、筆試

大多數(shù)公司為線上筆試，筆試平臺(tái)一般在判罢В客網(wǎng)降狠，其次是賽碼網(wǎng)，部分公司筆試平臺(tái)是在公司自己的官網(wǎng)庇楞。少部分公司是宣講會(huì)現(xiàn)場(chǎng)筆試榜配。

題型
以選擇題和編程題為主。大廠的筆試編程題一般占一半以上（如美團(tuán)吕晌，騰訊筆試全部都是編程題）蛋褥。
（1）選擇題：前端相關(guān)知識(shí)，數(shù)據(jù)結(jié)構(gòu)與算法睛驳，計(jì)算機(jī)網(wǎng)絡(luò)烙心，操作系統(tǒng)膜廊，數(shù)據(jù)庫等。
（2）填空題：同上淫茵。
（3）簡(jiǎn)答題：前端相關(guān)爪瓜，算法題。
（4）編程題：算法題（主）匙瘪，前端相關(guān)的手寫代碼題（次）钥勋。

筆試準(zhǔn)備
怎么應(yīng)對(duì)筆試，可以結(jié)合本指南自學(xué)篇和面試篇的相關(guān)內(nèi)容辆苔，多去潘憔模客網(wǎng)刷題。算法題是大廠筆試?yán)锩孀钪匾牟糠肿て。嗳?LeetCode 刷題即可菲驴。

這里分享一些之前收集的前端學(xué)習(xí)資料給你，供你參考骑冗，希望對(duì)你有幫助赊瞬。需要分享的朋友可以查看個(gè)人介紹/評(píng)論區(qū)留言“最新資源”

六、面試

大公司校招面試一般有3 - 4輪（2 - 3輪技術(shù)面 + 1輪HR面）贼涩。也有少部分公司是技術(shù)面 + HR面 +部門終面巧涧。大部分公司都是線上面試，小部分公司是去公司現(xiàn)場(chǎng)面試遥倦。線上面試的平臺(tái)主要有虐客網(wǎng)和賽碼網(wǎng)，小部分是在公司官網(wǎng)袒哥。

面試考點(diǎn)
1）大公司面試主要考察前端基礎(chǔ)缩筛、簡(jiǎn)歷上的項(xiàng)目相關(guān)、前端框架堡称、數(shù)據(jù)結(jié)構(gòu)與算法瞎抛、網(wǎng)絡(luò)、前端工程化等却紧。小公司一般不考計(jì)算機(jī)基礎(chǔ)桐臊，比較考察前端相關(guān)的，不過總體難度還是比大公司低很多晓殊。（如果實(shí)習(xí)過断凶，實(shí)習(xí)經(jīng)歷也是考核重點(diǎn)）

2）面試考察的知識(shí)點(diǎn)頻率：前端基礎(chǔ) > 簡(jiǎn)歷上的項(xiàng)目相關(guān) >= 前端框架 >= 數(shù)據(jù)結(jié)構(gòu)與算法 > 網(wǎng)絡(luò)協(xié)議 > 前端工程化（如 Webpack，性能優(yōu)化挺物，上線部署之類的）等懒浮。

3）從一面二面考察的不同點(diǎn)來說飘弧，一面重視基礎(chǔ)且比較容易過识藤，二面的廣度砚著，深度和難度會(huì)加大，經(jīng)常會(huì)問到項(xiàng)目痴昧，并且大概率要求手打代碼（算法題或功能實(shí)現(xiàn)題）稽穆。

網(wǎng)上有很多公司的面經(jīng)（面試經(jīng)驗(yàn)）可以學(xué)習(xí)，比如[這個(gè)]赶撰。

七舌镶、職業(yè)規(guī)劃

因此當(dāng)你抱怨公司小, 技術(shù)團(tuán)隊(duì)人數(shù)少, 氛圍差, 技術(shù)棧老舊的時(shí)候, 天天只堆業(yè)務(wù)代碼的時(shí)候, 你可能正在浪費(fèi)時(shí)間, 而你睡過去的每一次需求評(píng)審, 或者糊弄過去的每一次業(yè)務(wù)迭代都是在浪費(fèi)你成為更專業(yè)的前端工程師的機(jī)會(huì)

學(xué)習(xí)平臺(tái)

LeetCode豪娜、挪驼停客網(wǎng)、GitHub瘤载、MDN否灾、掘金、菜鳥教程鸣奔、B站墨技、阮一峰的個(gè)人博客、簡(jiǎn)書挎狸、CSDN扣汪、Bootstrap中文網(wǎng)。

Tips: 聽說掘金這個(gè)平臺(tái)還是有很多干貨的锨匆，其他大佬知道有哪些學(xué)習(xí)平臺(tái)崭别，你們可以在評(píng)論留言指點(diǎn)出來。

平時(shí)多加點(diǎn)前端交流群恐锣，多向他人分享技術(shù)與生活也是可以的紊遵，也可以結(jié)交到很多朋友，感興趣可以加入 博主企鵝群：【前面：590 中間：168 最后：645】

關(guān)于轉(zhuǎn)行前端之前的疑慮侥蒙？

1暗膜、前端崗位需求如何？前景如何鞭衩？薪資如何学搜？（這是對(duì)將轉(zhuǎn)行業(yè)的必要考量）

現(xiàn)在互聯(lián)網(wǎng)的大環(huán)境的發(fā)展如日中天，網(wǎng)絡(luò)已經(jīng)深入到每個(gè)人生活的各個(gè)方面论衍。各種項(xiàng)目層出不窮瑞佩，以及各種定制化的UI風(fēng)格神馬的，PC端坯台、手機(jī)端炬丸、mobile端，各種兼容問題真的很浪費(fèi)時(shí)間，大家在不斷的摸索中發(fā)現(xiàn)稠炬，把html+css+js這部分工作獨(dú)立出來一個(gè)新的崗位來處理焕阿，醬紫后端可以專注于數(shù)據(jù)接口的開發(fā)以及邏輯的處理，然后視覺MM們也可以不用熬夜碼代碼了首启。
當(dāng)一個(gè)行業(yè)發(fā)展到一定程度形成產(chǎn)業(yè)的時(shí)候暮屡，它里面的環(huán)節(jié)一定會(huì)細(xì)節(jié)化的，讓專業(yè)的人做更專業(yè)的事情毅桃，傳統(tǒng)農(nóng)業(yè)褒纲、汽車業(yè)，不都是如此么钥飞。所以莺掠，Web前端必然在今后十年有很大的發(fā)展。

然而程序員需要不斷的自我驅(qū)動(dòng)读宙，才不會(huì)被IT行業(yè)所淘汰汁蝶。

web前端開發(fā)工程師的薪資待遇平均工資已經(jīng)突破一萬，因?yàn)槠渌袠I(yè)確實(shí)工資漲幅不大论悴，所以必然會(huì)吸引了大批想要月薪過萬的人來轉(zhuǎn)行學(xué)習(xí)掖棉。

目前，北京膀估、上海幔亥、廣州、深圳等地web前端工程師的薪資待遇更是一飆再飆察纯，Web前端工程師待遇詳見下圖：

2帕棉、肯定會(huì)有人問培訓(xùn)班和自學(xué)哪個(gè)好？

相對(duì)于勸自學(xué)的饼记，我反而是推薦參加培訓(xùn)班香伴，因?yàn)榕嘤?xùn)班能逼著你快速進(jìn)入狀態(tài)，而且有人解答具则，比較系統(tǒng)即纲，不然你自己摸索浪費(fèi)太多時(shí)間，我就浪費(fèi)了半年博肋，而且自律這個(gè)東西真的是看自己低斋，很多人是中途放棄，其實(shí)我也有很多次這種念頭匪凡，但是還是忍住了膊畴，怕被當(dāng)做loser，還浪費(fèi)了那么多時(shí)間病游。另一方面前端要學(xué)習(xí)的東西很多唇跨，可能你學(xué)到的只是入門基礎(chǔ)，專業(yè)的老師和就業(yè)推薦會(huì)使你轉(zhuǎn)行的道路輕松許多。

3买猖、如何高效學(xué)習(xí)改橘，學(xué)到何時(shí)才能夠大概率就業(yè)？

聽到過很多這樣的說法政勃，前端很簡(jiǎn)單唧龄，自學(xué)1星期就能做網(wǎng)頁兼砖，這其實(shí)也不錯(cuò)（只要有公司要你奸远，出問題時(shí)，給你足夠的時(shí)間去解決讽挟，或者有人給你頂著懒叛，和你合作的人不嫌棄你的代碼質(zhì)量就行）本著對(duì)自己和公司負(fù)責(zé)的態(tài)度來說，你至少靜態(tài)頁面要做的很6耽梅，像我上面提到的薛窥，做一個(gè)靜態(tài)頁面基本不會(huì)出現(xiàn)布局問題，也不用百度就合格了眼姐，具體時(shí)間看個(gè)人诅迷。

我是用了8個(gè)月，主要當(dāng)時(shí)很迷茫众旗，完全和別的文章推薦的模式一樣罢杉，面試要求這個(gè)了，我就去學(xué)這個(gè)贡歧，要求那個(gè)了滩租，我就去學(xué)那個(gè)，當(dāng)時(shí)我也以為自己css很牛逼了呢利朵。

4律想、非科班會(huì)不會(huì)沒發(fā)展？年齡大會(huì)不會(huì)被淘汰绍弟？

能力大于專業(yè)技即！前端開發(fā)是一份技術(shù)類工作，比起科班和非科班的背景樟遣，企業(yè)更看重的是程序員的開發(fā)水平姥份，和解決問題的能力。

其實(shí)對(duì)于能不能轉(zhuǎn)行到前端開發(fā)年碘，年齡并不是絕對(duì)因素澈歉，從高等院校畢業(yè)出來的畢業(yè)生找不到工作的也有大把，所以這不是個(gè)年齡問題屿衅，也不是"行或不行“的選擇題埃难，而是看你有沒有堅(jiān)持下去的心。

結(jié)尾

這篇文章是寫給和我一樣想轉(zhuǎn)行的人看的，也許很多人比我們優(yōu)秀涡尘，也有很多人沒我們優(yōu)秀忍弛，別信夸贊，別怕批評(píng)考抄，前端路上You are not alone细疚！
也以此文勉勵(lì)自己，總結(jié)過去川梅，走向未來疯兼！

好了，我接著敲代碼了贫途！...