web前端開發(fā)需要學(xué)什么（包含前端學(xué)習(xí)路線）
時(shí)間：2023-04-24 02:51:01 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-04-24 02:51:01 來源：網(wǎng)站運(yùn)營
web前端開發(fā)需要學(xué)什么（包含前端學(xué)習(xí)路線）：前端開發(fā)，做到后面，是可以走很多方向的；
但是要保證后期的平滑過度，前期還是要把一些必須的知識(shí)搞扎實(shí)的；
web前端開發(fā)需要學(xué)什么環(huán)境搭建前端環(huán)境很好搭建，編輯器+瀏覽器即可。
瀏覽器推薦使用 Chrome行業(yè)內(nèi)主流的編輯器有下面三個(gè)
webstorm也有人用IDEA，屬于一個(gè)媽的工具，沒有啥大區(qū)別；WebStorm是針對(duì)前端開發(fā)優(yōu)化過的，比較推薦這個(gè)；
vscodesublime初學(xué)者隨便找一個(gè)就好，喜歡輕量級(jí)的使用vscode，喜歡工業(yè)風(fēng)一樣的使用webstorm;
我個(gè)人是兩個(gè)工具都有使用；
還有一個(gè)說明的，VScode是開源免費(fèi)的，webstorm是收費(fèi)的；
代碼類html標(biāo)簽
css屬性
JavaScript這個(gè)是重中之重
ECMAScript
DOM
BOM
jquery隨便了解下UI框架
bootstrap
mv*框架選擇一個(gè)學(xué)習(xí)React
Vue
Angular
Nodejs
上面的這些就足夠了，剩下需要學(xué)習(xí)的就是方向性質(zhì)的東西了，就沒有辦法推薦了，要根據(jù)你自己的工作性質(zhì)來選擇；
根據(jù)后期方向?qū)W習(xí)
如果想做非WEB前端的工作（不是用戶瀏覽器渲染的場(chǎng)景），那么 Nodejs是必須要研究的，除此之外，再根據(jù)不同語言來特定選擇。
做PC桌面端方向需要多了解 Electron
做手機(jī)端可能要學(xué)習(xí)下 react-native
做WEB后端開發(fā)可能要學(xué)習(xí) Express ， Koa ，Nest，Egg
還有就是要學(xué)習(xí)下一種關(guān)系型數(shù)據(jù)庫和非關(guān)系型的
MySql / postgreSQL 隨便選擇一個(gè)
Mongodb
前端學(xué)習(xí)路線首先學(xué)習(xí)的時(shí)候，不要想著大而全；
很多本站上包括網(wǎng)上列舉的學(xué)習(xí)路線都是想著大而全，什么都去搞，恨不得把前面5年的學(xué)習(xí)路線都安排好的；
我覺得新手不應(yīng)該這么做，新手學(xué)習(xí)的時(shí)候應(yīng)該有自己的主要方向；
不要貪心，不要想著大而全，前端是很繁榮，是新技術(shù)層出不窮，但是新手的大部分時(shí)間應(yīng)該死磕核心部分；
01.環(huán)境搭建前端環(huán)境很好搭建，編輯器+瀏覽器即可
瀏覽器推薦使用 Chrome行業(yè)內(nèi)主流的編輯器有下面三個(gè)
webstorm也有人用IDEA，屬于一個(gè)媽的工具，沒有啥大區(qū)別；WebStorm是針對(duì)前端開發(fā)優(yōu)化過的，比較推薦這個(gè)；
vscodesublime初學(xué)者隨便找一個(gè)就好，喜歡輕量級(jí)的使用vscode，喜歡工業(yè)風(fēng)一樣的使用webstorm;我個(gè)人是兩個(gè)工具都有使用；
還有一個(gè)說明的，VScode是開源免費(fèi)的，webstorm是收費(fèi)的；
更多的前端開發(fā)環(huán)境的效率工具，可以參考我分享了一個(gè) 搭建WEB前端開發(fā)環(huán)境，有哪些常用軟件需要安裝呢，感興趣的可以看看，了解前端開發(fā)中都使用什么軟件；
02.HTML如果要做網(wǎng)頁，HTML是基礎(chǔ)骨架，必須要掌握的；
1.先通過 HTML 教程 學(xué)習(xí)大概
2.再通過 HTML5 教程 學(xué)習(xí)哪些新屬性，這在做瀏覽器兼容低版本的時(shí)候特別有用
3.最后通過 HTML 標(biāo)簽 加深對(duì)每個(gè)標(biāo)簽的印象
到這里，你的HTML就算可以熟練掌握了，注意本篇文章說的，都是你一步一步跟著動(dòng)手敲代碼的基礎(chǔ)上說的；如果你只是大概瀏覽下，沒有真正動(dòng)手敲代碼，那是不行的；
這是一段非常枯燥無味的階段，如果你感覺枯燥無味，不要緊的，你可以學(xué)完
HTML 教程 和
HTML5 教程 后直接進(jìn)入CSS的學(xué)習(xí)階段，這樣會(huì)讓你學(xué)習(xí)的樂趣增加不少；
等以后合適的時(shí)候，再回頭看逐個(gè)研究
html 標(biāo)簽也是一個(gè)不錯(cuò)的選擇；
03.CSS做網(wǎng)頁，如果光有HTML會(huì)感覺好像一個(gè)半成品一樣，加上適當(dāng)?shù)腃SS美化，會(huì)更符合用戶體驗(yàn)；
1.先通過 CSS 教程 學(xué)習(xí)大概
2.再通過 CSS 教程 學(xué)習(xí)哪些新屬性，這在做瀏覽器兼容低版本的時(shí)候特別有用
3.最后通過 CSS 樣式表參考手冊(cè) 加深對(duì)每個(gè)屬性的印象
這個(gè)階段，你會(huì)稍微有點(diǎn)成就感，畢竟是可以做出一些看起來高檔上的網(wǎng)頁了；
如果你以后打算做出漂亮的網(wǎng)頁，那么你最好老老實(shí)實(shí)把上面三個(gè)都按部就班的學(xué)習(xí)一遍；
如果你是打算更加偏重于JS的方向，那么第三個(gè) CSS 樣式表參考手冊(cè) 可以稍微瀏覽就好，等遇到不會(huì)寫的樣式，百度搜索下問題，然后再重點(diǎn)看下當(dāng)時(shí)場(chǎng)景用到的CSS屬性也是可以的；
04.仿一個(gè)你經(jīng)常瀏覽的網(wǎng)站，最少重復(fù)3次學(xué)習(xí)玩HTML和CSS之后，你寫的代碼，都是這一部分，那一部分的，沒有一個(gè)整體的概念；
這個(gè)時(shí)候，非常推薦你仿制一個(gè)你經(jīng)常瀏覽的網(wǎng)站，只用HTML和CSS去實(shí)現(xiàn)，遇到JS效果，直接不做；
在動(dòng)手之前，我強(qiáng)烈推薦你一定要開通一個(gè)自己的技術(shù)博客
開通一個(gè)技術(shù)博客
可以使用第三方的博客，比如 cnbolg/CSDN/簡書/掘金/本站，這些都是國內(nèi)不錯(cuò)的博客平臺(tái)；
開通博客的是用來把你容易忘記和有體會(huì)的技術(shù)都記錄下來，不要感覺有些知識(shí)點(diǎn)特別low，所有的技術(shù)大牛，也都是一點(diǎn)點(diǎn)的積累才能脫變的；
學(xué)會(huì)Github的簡單使用（如果影響學(xué)習(xí)興趣了，可以直接跳過）
注冊(cè)一個(gè)Github賬號(hào)：
https://github.com/注冊(cè)這個(gè)是用來管理你的代碼，因?yàn)槟阆旅嬉７乱粋€(gè)常去的網(wǎng)站，并且不止實(shí)現(xiàn)一遍，如果有一個(gè)版本控制還是非常贊的；
注意：使用Github，需要學(xué)習(xí)基本的Git使用。
如果這一步影響你對(duì)WEB前端的學(xué)習(xí)興趣了，那么就直接跳過不要做了，這一步是錦上添花的，不要強(qiáng)求；但是你仿站的代碼一定要保存好；
如果通過練習(xí)仿站來提高技術(shù)
推薦你把整個(gè)網(wǎng)頁截圖下來，然后根據(jù)圖片來實(shí)現(xiàn)；一般的網(wǎng)頁都最低會(huì)有
首頁 和
詳情頁 這兩個(gè)頁面；
然后用你學(xué)會(huì)的知識(shí)，根據(jù)截圖來寫出這些網(wǎng)頁
注意：同一個(gè)網(wǎng)站最少做3遍?。。?！注意：同一個(gè)網(wǎng)站最少做3遍?。。?！注意：同一個(gè)網(wǎng)站最少做3遍?。。。?/b>
我個(gè)人認(rèn)為，寫東西不是越多越好的，而是通過敲代碼，能總結(jié)出來的東西越多越多！可以逐漸提高自己的技術(shù)才是最終目的；
比如你把小米，京東，騰訊網(wǎng)等等都寫了一邊，我認(rèn)為這樣是很傻的行為，真的就是純粹搬磚的了，對(duì)技術(shù)的提高并不是很好！
最好的方式，是一個(gè)網(wǎng)站，你重復(fù)的寫，重復(fù)的寫，然后每一遍都有不錯(cuò)的心得體會(huì)
第一遍，你只需要仿制的和原來完全一樣就可以！
注意：這里說的是完全一樣?。?！最好的是1Px的誤差都沒有
不會(huì)寫的HTML標(biāo)簽，和不會(huì)用的CSS屬性，可以回頭查查
然后總結(jié)出這次寫的內(nèi)容中，有哪些可以優(yōu)化的，哪些可以重復(fù)使用的元素，那些設(shè)計(jì)的不合理，需要重新布局
第二遍：總結(jié)你第一遍的不合理和思路重新設(shè)計(jì)
一般初學(xué)者第一遍寫的東西，基本都是面目全非的；避免掉一些不合理的地方，抽出一些復(fù)用的元素，重新設(shè)計(jì)你的實(shí)現(xiàn)思路
這一步能不查資料，就盡量不要查資料
注意這一步是從0開始，一定不要在你第一遍的內(nèi)容上修改來實(shí)現(xiàn)
實(shí)現(xiàn)完成以后，記得總結(jié)下這一邊還有哪些瑕疵
第三遍：斷網(wǎng)并且關(guān)掉智能提示再實(shí)現(xiàn)一遍
這一遍再對(duì)第二遍的優(yōu)化，并且需要斷網(wǎng)和關(guān)閉智能提示來實(shí)現(xiàn)，可以增強(qiáng)記憶；
通過上面的3次練習(xí)，你對(duì)靜態(tài)網(wǎng)頁的書寫，一般會(huì)有自己的心得了，最好每次都用博客的形式記錄下來；
05.JavaScript
通過前面4步的情況下，你對(duì)靜態(tài)網(wǎng)頁，基本算是略有小成了，這時(shí)候不要驕傲，你的水平可能剛剛夠得著”切圖仔”的水平，前端的大殺器是JavaScript，你前面學(xué)的那些只能算個(gè)熱身運(yùn)動(dòng)；
作為一個(gè)web前端工程師，js是很核心的部分，也是相對(duì)來說很難的一部分（其實(shí)你寫著寫著會(huì)發(fā)現(xiàn)，JS其實(shí)和CSS一樣，基本就是那些事情，做項(xiàng)目的時(shí)候重點(diǎn)反而是復(fù)雜場(chǎng)景下的邏輯處理）。
這時(shí)候我推薦你買2本書，一本是 JavaScript 高級(jí)程序設(shè)計(jì) ，一本是 JavaScript 權(quán)威指南
這兩本書是結(jié)合下面一起看的，這兩本書買來后并不是讓你都讀完的；我推薦你各取一部分的閱讀；
JavaScript 權(quán)威指南 有用的部分
這本書只讀前面一些章節(jié)，主要是語法和方法部分；就是語法，表達(dá)式，語句判斷，對(duì)象類型，數(shù)字類型，字符串類型，數(shù)組，函數(shù)，這些讀完以后這本書的對(duì)你的學(xué)習(xí)意義就沒有了
JavaScript 高級(jí)程序設(shè)計(jì)
這本書總體還是不錯(cuò)的，語法和方法部分也可以讀下，看看和權(quán)威指南的表述區(qū)別，重點(diǎn)是讀函數(shù)/閉包，對(duì)象，原型，原型鏈基礎(chǔ)，DOM二級(jí)事件，AJAX 這些部分
提示：JavaScript 權(quán)威指南這本書在函數(shù)/閉包和原型鏈繼承一塊寫的非常的普通，而高級(jí)程序設(shè)計(jì)就寫的非常到位；這就是為什么兩本都推薦買的原因，是推薦你有選擇的進(jìn)行閱讀；
JS的學(xué)習(xí)思路
有一個(gè)不錯(cuò)的JS入門教程，也推薦下，是智能社的Blue老師做的 JavaScript教程
地址是：
https://www.bilibili.com/video/av30494570
入門使用，僅僅是熱身，智能社這個(gè)教程學(xué)完其實(shí)你的JS處在已經(jīng)會(huì)用，但是真正做東西又不知道怎么做的水平；
我現(xiàn)在正在慢慢整理為一個(gè)深度的 JS 教程, 推薦你看看這個(gè)教程學(xué)習(xí)；
學(xué)JS的時(shí)候一定要跟著敲；
學(xué)習(xí)的目的并不是把教程看完，而是慢慢學(xué)，遇到不會(huì)的第一遍不行就第二遍寫；上面2個(gè)教程全部學(xué)完以后，記得再回頭看一遍鞏固一下，中間把推薦的2本書也多翻翻；
上面兩個(gè)教程看完以后，你的原生JS已經(jīng)算可以的了；
這時(shí)候推薦你看看 ECMAScript文檔，因?yàn)榍岸艘恢痹诎l(fā)展，書上和教程上并沒有后面新增的JS標(biāo)準(zhǔn)（比如2020年出的ES11這些標(biāo)準(zhǔn)）；ECMAScript文檔還可以幫助你定點(diǎn)研究上面如果是一步一步代碼寫到現(xiàn)在的話，全部搞完，時(shí)間最好是在4個(gè)月-5個(gè)月的樣子完成，不要追求快；按部就班的搞，你后面會(huì)越學(xué)越興奮的；如果這之前學(xué)的不牢固，后面容易涼；
06.用原生JS寫一個(gè)帶AJAX獲取信息的項(xiàng)目
有些網(wǎng)站會(huì)提供對(duì)外的API，比如天氣預(yù)報(bào)啊，便民查詢之類的東西；
你可以用公開的API做一個(gè)項(xiàng)目，你可以自己選擇下；不要擔(dān)心自己的技術(shù)，這時(shí)候你已經(jīng)很厲害了；
我推薦你用V2EX的API做一個(gè)V2EX的網(wǎng)站，API地址是：
https://v2ex.com/p/7v9TEc53
因?yàn)橛猩厦娴谒牟康幕A(chǔ)，寫靜態(tài)頁當(dāng)然是沒有問題的了；第五步的JS也是為你做了充分的JS基礎(chǔ)；這時(shí)候應(yīng)該是可以實(shí)現(xiàn)自己想要的效果的；
買盜版視頻學(xué)習(xí)
雖然不推薦，但是買培訓(xùn)班的盜版視頻來學(xué)習(xí)，確實(shí)是非常不錯(cuò)的方法；培訓(xùn)班的內(nèi)部視頻，在淘寶，咸魚上都可以買得到！
如果你是想學(xué)web前端開發(fā)的話，目前我是在職前端開發(fā)，自己對(duì)于前端也做了一些學(xué)習(xí)的總結(jié)，也錄制了基礎(chǔ)的精講視頻和學(xué)習(xí)方法，
如果你這邊需要的話，可以點(diǎn)此鏈接：獲取前端學(xué)習(xí)路線，教程
如果本文對(duì)你有幫助，記得點(diǎn)贊收藏呦！
關(guān)鍵詞：包含,路線,學(xué)習(xí)
在線咨詢