最新Web前端工程師學(xué)習(xí)路線指南,輸出拉滿!

1.入門(mén)
有人說(shuō):只要有恒心,鐵杵磨成針。這不對(duì),學(xué)習(xí)重在興趣,而不在恒心。當(dāng)你通宵達(dá)旦的玩游戲,捧著自己喜愛(ài)的名著談天說(shuō)地時(shí),不是因?yàn)橛泻阈?,而是因?yàn)榕d趣。只有不感興趣的東西,才需要恒心的妥協(xié)。
所以請(qǐng)拋棄恒心,擁抱興趣。
一個(gè)好的啟蒙老師,不需要教會(huì)你任何本領(lǐng),卻能培養(yǎng)你對(duì)一件事的興趣和良好的學(xué)習(xí)習(xí)慣。
對(duì)于廣大的前端學(xué)員來(lái)說(shuō),了解這個(gè)領(lǐng)域和培養(yǎng)學(xué)習(xí)興趣尤為重要,這意味著你能在前端這條路走多遠(yuǎn)。
怎么培養(yǎng)興趣?
在這里我為大家準(zhǔn)備了一些自己認(rèn)為不錯(cuò)的前端資料:(文章末尾有獲取方式哦?。?/strong>



成就感;
即學(xué)即用;
那么,《Head First HTML與CSS》就成了最適合零基礎(chǔ)的前端學(xué)習(xí)書(shū)籍。

從書(shū)的封面就可以看出,這是一本“重視大腦的學(xué)習(xí)指南”,看完本書(shū),你對(duì)什么是HTML、CSS就有了大概的一個(gè)了解,并且可以編寫(xiě)一些簡(jiǎn)單的頁(yè)面了。
這本書(shū)有如下的幾個(gè)特點(diǎn):
任務(wù)型教學(xué),先發(fā)布一個(gè)任務(wù),再教你如何完成它;
插畫(huà)多,圖文結(jié)合,雖然有700多的頁(yè)數(shù),但一小時(shí)翻50頁(yè)完全不是問(wèn)題,你可以像看小說(shuō)一樣,看它。
沒(méi)有難懂的專業(yè)名詞,一旦出現(xiàn),就會(huì)花一整頁(yè),甚至多頁(yè)來(lái)解釋它;
它能傳遞給你學(xué)習(xí)的方法,避免以后走彎路;
這本書(shū)是入門(mén)的絕佳讀物,但不是必須,你也可以跳過(guò)它,但村長(zhǎng)認(rèn)為還是讀讀它。
2.HTML&CSS
如果你看完了《Head First HTML與CSS》,其實(shí)你已經(jīng)學(xué)會(huì)了這兩個(gè)前端的基礎(chǔ)知識(shí)。你只需要豐富一下“詞匯量”,讓自己能做出任何的網(wǎng)頁(yè)就可以了。
什么是HTML和CSS?
一個(gè)畫(huà)家要畫(huà)一只烏龜,得先畫(huà)出輪廓,再完善細(xì)節(jié),最后涂上顏色,HTML和CSS干的也是這么一件事。

因?yàn)镠TML和CSS非常簡(jiǎn)單,村長(zhǎng)并不是很建議初學(xué)者看視頻,如果你覺(jué)得學(xué)習(xí)有困難,可直接看《Head Frist HTML與CSS》即可。簡(jiǎn)單的事,不要花太長(zhǎng)的時(shí)間。
豐富自己的詞匯量,最簡(jiǎn)單快捷的方式,是直接閱讀W3Cschool的html和css文檔。
當(dāng)然,你還需要了解一下他們的最新版本,html5和css3.
學(xué)完html和css,你就可以獨(dú)立制作任何的網(wǎng)頁(yè)了,沒(méi)錯(cuò)!在本地寫(xiě)個(gè)淘寶出來(lái),完全不是問(wèn)題。
如果你想鞏固下學(xué)習(xí)成果,可以拿個(gè)實(shí)戰(zhàn)項(xiàng)目,練習(xí)一下.
3.JavaScript
與html和css不同,JavaScript是門(mén)真正的編程語(yǔ)言,所以學(xué)起來(lái)難度就大。
什么是JavaScript?
還是剛才畫(huà)家畫(huà)烏龜?shù)哪莻€(gè)例子,這個(gè)畫(huà)家人們都叫他“神筆馬良”,他畫(huà)了只烏龜,并且給它涂上了顏色。
這時(shí)候,馬良將這只烏龜“拉”了出來(lái),成為了一只真正的烏龜,它能走路,也能吃東西。

再舉個(gè)簡(jiǎn)單的例子,有時(shí)候登錄網(wǎng)站時(shí),它會(huì)提示:

這個(gè)就是使用JavaScript寫(xiě)的,html和css是不能動(dòng)的,只有JavaScript可以。
JavaScript作為一門(mén)編程語(yǔ)言,非常強(qiáng)大,它有很多事可以做,除了運(yùn)用到前端領(lǐng)域,它還可以做游戲、應(yīng)用等等,用途很廣泛。
由于JavaScript有些難度,如果你習(xí)慣了學(xué)習(xí)html和css的方式,可以直
如果你喜歡看書(shū),那么推薦看《JavaScript高級(jí)程序設(shè)計(jì)》,這是一本對(duì)初學(xué)者很友好的書(shū)。

有些程序員會(huì)推薦《JavaScript權(quán)威指南》,俗稱犀牛書(shū),村長(zhǎng)并不推薦。因?yàn)樗鼘儆谥屑?jí)讀物,對(duì)初學(xué)者不友好,但作為經(jīng)典的JavaScript書(shū)籍,還是值得考慮的。

如果以上學(xué)習(xí)方式,你都不喜歡,或者太難理解JavaScript了,也可以觀看視頻學(xué)習(xí)。
當(dāng)你將HTML、CSS、JavaScript(前端三駕馬車(chē))學(xué)完后,那么恭喜你,你已經(jīng)完成了前端學(xué)習(xí)的課程。
理論上,你已經(jīng)能勝任前端的工作了!
4.前端框架
實(shí)際上,如果你只掌握了三駕馬車(chē),那么沒(méi)有公司會(huì)愿意要你,因?yàn)閷?shí)際上你的工作效率會(huì)極低。當(dāng)然,僅僅是效率上的問(wèn)題,而不是做不出來(lái)。
接下來(lái),學(xué)習(xí)前端框架迫在眉睫。
什么是前端框架?
如果只會(huì)html、css和javascript,寫(xiě)一個(gè)網(wǎng)站時(shí),你需要一行代碼,一行代碼的寫(xiě),假如寫(xiě)幾個(gè)簡(jiǎn)單的頁(yè)面,自然不在話下。
可是如果讓你寫(xiě)個(gè)像淘寶的網(wǎng)站呢?也許這個(gè)量是幾十萬(wàn)行以上的代碼。
這時(shí)為了提高效率,你將別人已經(jīng)寫(xiě)好的淘寶,拿了過(guò)來(lái),放在了自己的網(wǎng)站上,然后稍微修改下代碼,讓它看起來(lái)和老板的預(yù)期一樣。
于是另外一個(gè)淘寶誕生了,你只花了一點(diǎn)點(diǎn)時(shí)間就完成了它。
框架,大概就是這么個(gè)意思。
框架可以說(shuō)是一種工具,學(xué)起來(lái)很簡(jiǎn)單,就像學(xué)習(xí)word、excel一樣簡(jiǎn)單,框架是必學(xué)項(xiàng)。
框架有很多,我推薦你學(xué)習(xí)Bootstrap

這個(gè)框架好用,重要的是簡(jiǎn)單,適合剛學(xué)完基礎(chǔ)課程的你。
當(dāng)學(xué)習(xí)完Bootstrap后,恭喜你,你可以高效的完成工作,更加符合企業(yè)的用人需求了。
前端是一個(gè)隨時(shí)間變化很大的職業(yè),新框架的運(yùn)用,也成了很多企業(yè)用人的硬性要求。
最具代表性的就是三劍客:React.js、Vue.js和Angular。

你不必完全掌握這三個(gè),你可以先學(xué)會(huì)其中一個(gè),后續(xù)根據(jù)工作需要,再掌握其余兩個(gè),甚至是不學(xué)習(xí)它們。
5.Git-管理工具
Git對(duì)前端寫(xiě)程序沒(méi)有多大影響,但它同樣十分重要。
什么是Git?
這個(gè)一個(gè)版本控制工具,可以很好的管理代碼,并且共享給其他同事。

Git更像是技術(shù)界的excel、word,它只是一個(gè)工具,方便管理你的代碼。一些稍成型的公司,都可能會(huì)使用它作為管理工具,
因此,你最好學(xué)會(huì)它。
總之學(xué)前端只有八個(gè)字:? ?明確方向,興趣主導(dǎo)!
文章整理不易,還請(qǐng)各位大佬們多多支持~
獲取方式:
一鍵三連+關(guān)注? ? ? ? (重點(diǎn))
后臺(tái)主動(dòng)留下痕跡:“資料”(重點(diǎn))? ?