Hello，大家好，相信很多學(xué)習(xí)前端的小伙伴，會(huì)有很多的疑惑：

我要學(xué)習(xí)那些技術(shù)？

我要到哪里去學(xué)習(xí)這些技術(shù)呢？

學(xué)習(xí)這些技術(shù)的目的對(duì)就業(yè)有什么幫助呢？

我學(xué)到什么程度可以勝任工作？

...??

這里，pink老師給你們最全的解答。

前端2020年技術(shù)路線圖.

?

?

1.?HTML5?+?CSS3?

根據(jù)web前端發(fā)展史，建議大家先學(xué)習(xí)pc端頁(yè)面開(kāi)發(fā)。

包含：?HTML5、CSS3、浮動(dòng)、定位、盒子模型、高級(jí)技巧等等。

不用說(shuō)，這是我們前端入門(mén)的最基本要求，目的是能完成頁(yè)面的布局開(kāi)發(fā)，這部分必須精通。?

這部分知識(shí)比較簡(jiǎn)單，不要去買(mǎi)書(shū)看了（太浪費(fèi)時(shí)間），直接看pink老師視頻就夠了哈。

https://www.bilibili.com/video/av80149248

學(xué)完之后，只要網(wǎng)上看到喜歡的頁(yè)面，就可以模仿下來(lái)，意味著你掌握成功。

2.?移動(dòng)端頁(yè)面開(kāi)發(fā)

我們先學(xué)習(xí)了pc端頁(yè)面開(kāi)發(fā)，但是現(xiàn)在移動(dòng)端太常見(jiàn)了，所以我們也需要做移動(dòng)端頁(yè)面開(kāi)發(fā)。?

主要學(xué)習(xí)移動(dòng)端常見(jiàn)布局：流失布局、flex布局、rem布局、響應(yīng)式布局等。其中市場(chǎng)rem布局用的最多了，重點(diǎn)掌握。

網(wǎng)上相應(yīng)的布局視頻很多，可以重點(diǎn)學(xué)習(xí)。

最終起碼把幾個(gè)大廠的移動(dòng)端首頁(yè)寫(xiě)出來(lái)才可以。比如淘寶、京東、小米等。

3.?JavaScript?系列

JavaScript是我們前端的核心，需要精通掌握，可以直接學(xué)習(xí)ES5，ES6就可以了。這樣就可以讓我們頁(yè)面交互效果動(dòng)態(tài)展示起來(lái)了。

包含：??JavaScript?基礎(chǔ)語(yǔ)法及?Web?API?開(kāi)發(fā)動(dòng)態(tài)交互（??特效）的??、JavaScript??級(jí)特性，如?向?qū)ο?、閉包、事件循環(huán)等技術(shù)、?jQuery也要了解一些，現(xiàn)在市場(chǎng)很多老項(xiàng)目還是大量有jQuery的，你說(shuō)不會(huì)jQuery，人家不相信你前端工作過(guò)。。。

學(xué)習(xí)渠道：

1.?最權(quán)威的JavaScript網(wǎng)站?MDN：?

https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/JavaScript_basics

當(dāng)然還可以去菜鳥(niǎo)教程等。

2.?各種視頻網(wǎng)站，?首推B站，?還有?慕課，騰訊課堂等。搜索相關(guān)關(guān)鍵字即可。

3.?JavaScript?相關(guān)面試題可以去?掘金、?？途W(wǎng)、github?等網(wǎng)站。

4.?相信我，最好的還是百度。

學(xué)到j(luò)s?，你應(yīng)該要有自己的?github?或者碼云的賬號(hào)了，里面有大量資源可以讓你去查閱學(xué)習(xí)。

推薦的書(shū)籍：? 《JavaScript?DOM?編程藝術(shù) 》、? ? ?《JavaScript高級(jí)程序設(shè)計(jì)》、? ?《你不知道的JavaScript 》、? ? 《鋒利的jQuery? 》等，?建議直接網(wǎng)上搜電子書(shū)即可。

4.?Ajax?和?git

前面我們寫(xiě)的所有頁(yè)面都是靜態(tài)的，也就是所有的數(shù)據(jù)都是假數(shù)據(jù)，實(shí)際開(kāi)發(fā)的時(shí)候，數(shù)據(jù)都是從后臺(tái)獲取過(guò)來(lái)的，那么如何獲取后臺(tái)的相關(guān)數(shù)據(jù)呢？?答案就是?ajax。前端必備哦

通過(guò)?Ajax?實(shí)現(xiàn)與服務(wù)器的通信，獲取服務(wù)器提供的數(shù)?據(jù)，然后動(dòng)態(tài)渲染輸出，實(shí)現(xiàn)動(dòng)態(tài)??的開(kāi)發(fā)。學(xué)習(xí)?git?版本管理?具，實(shí)現(xiàn)企業(yè)級(jí)多?協(xié)同開(kāi)。

學(xué)到這里，最好有個(gè)項(xiàng)目練習(xí)，??這樣可以更好的明白動(dòng)態(tài)網(wǎng)站是如何開(kāi)發(fā)的。

現(xiàn)在網(wǎng)站都是流行前后端分離，這個(gè)階段我們能知道如何調(diào)用后端接口。

5.?Node.js

相信學(xué)ajax?的時(shí)候，很多教程搭配php或者其他后臺(tái)語(yǔ)言來(lái)學(xué)習(xí)，但是我更推薦ajax和node來(lái)學(xué)習(xí)，畢竟都屬于我們前端內(nèi)容，省去在學(xué)習(xí)另外一門(mén)語(yǔ)言的痛苦。

目的：?通過(guò)學(xué)習(xí)?Nodejs?和?MySQL?深?理解?站的本質(zhì)，以及前端在整個(gè)?站開(kāi)發(fā)中的???，為在企業(yè)中前后端協(xié)同開(kāi)發(fā)提供幫助。體會(huì)?Nodejs?在前端?程化開(kāi)發(fā)中的重要作?。

學(xué)習(xí)推薦地址：?

推薦一個(gè)博客：?https://cnodejs.org/getstart

?6.?VUE

?前端三大框架?你肯定聽(tīng)過(guò)??vue?、react?、?angular。?國(guó)內(nèi)最火的框架是?vue，而且vue3.0?馬上也要發(fā)布了，肯定還會(huì)火一把。

有了這些框架，我們開(kāi)發(fā)頁(yè)面更加快速和高效，性能維護(hù)有了極大提高。

目的是：掌握?MVVM、模塊化、組件化、狀態(tài)管理、路由等技術(shù)在實(shí)戰(zhàn)項(xiàng)?的應(yīng)?，豐富開(kāi)發(fā)經(jīng)?驗(yàn)、提升實(shí)戰(zhàn)能?，為?薪就業(yè)提供保障。

Vue官網(wǎng)就非常全面：?https://cn.vuejs.org/

而且b站上面也非常多的視頻教程。?學(xué)完開(kāi)發(fā)一個(gè)pc端和移動(dòng)端的網(wǎng)站練手。

7.?React

如果說(shuō)vue國(guó)內(nèi)最火，那么國(guó)外react是最火的，而且?現(xiàn)在react在國(guó)內(nèi)大廠使用非常普遍，也有越來(lái)越多人選擇react。

8.?微信小程序

小程序也能增加我們就業(yè)方向，也需要我們學(xué)習(xí)。?學(xué)習(xí)并掌握?程序開(kāi)發(fā)的相關(guān)知識(shí)，能夠獨(dú)?完成?程序的開(kāi)發(fā)。通過(guò)學(xué)習(xí)跨平臺(tái)?程?序技術(shù)?案，實(shí)現(xiàn)?程序的跨平臺(tái)?持。

首推?uni-app?和??taro??來(lái)學(xué)***********?也是火的一塌糊涂。

最后一句話，?一個(gè)人自學(xué)很難，要么參加培訓(xùn)，要么拉個(gè)志同道合的人一起監(jiān)督學(xué)習(xí)，?要是能找個(gè)師傅最美了。。。

加油吧，各位前端大神們~~~~