學(xué)習(xí)前端的第一件事是學(xué)習(xí)一些基礎(chǔ)，包括學(xué)習(xí)HTML、CSS的基礎(chǔ)知識，以及熟悉JavaScript的語法。
學(xué)習(xí)HTML基礎(chǔ)，了解如何編寫語義HTML。
一旦你學(xué)習(xí)了HTML基礎(chǔ)，鄭州北大青鳥翔天信鴿校區(qū)建議你至少要制作5個HTML網(wǎng)頁。北大青鳥老師建議你找一個網(wǎng)站，然后把焦點放在恰當(dāng)?shù)亟M織內(nèi)容上。出來的東西可能會很難看，但是暫時別擔(dān)心，把你的關(guān)注點放在恰當(dāng)?shù)慕Y(jié)構(gòu)上。
學(xué)點CSS
學(xué)會如何給網(wǎng)頁準(zhǔn)備好骨架，接下來就是在此基礎(chǔ)上添加一些皮膚讓它好看一點了。CSS——級聯(lián)樣式表就是用來美化你的HTML頁面的。
首先要做的是學(xué)習(xí)語法，熟悉常見的CSS屬性。
了解盒模型，掌握如何利用Grid和Flexbox準(zhǔn)備布局
一旦你掌握了基礎(chǔ)，接下來就應(yīng)該設(shè)計上一步制作的HTML網(wǎng)頁。比方說如果你給Github檔案編寫了HTML頁面的話，現(xiàn)在是時候應(yīng)用CSS來讓它的樣子看起來像實際的Github資料頁面一樣了。前面的那5個頁面都要拿來試一下。
學(xué)習(xí)JavaScript基礎(chǔ)
JavaScript能讓你的HTML頁面互動性更強。比方說你在網(wǎng)站上看過的所有那些幻燈片、彈出窗口以及廣播通知，以及在沒有重載頁面的情況下重載頁面的特定部分，這些都是用JavaScript做的。在這一步中，你將會學(xué)習(xí)JavaScript的基礎(chǔ)來為后面的旅程做好準(zhǔn)備。
構(gòu)建工具
工具可以幫助你進行JavaScript應(yīng)用的構(gòu)建/打包以及開發(fā)。這一類包括了linter(代碼檢查)、task runner(自動構(gòu)建)以及bundler(打包工具)。
對于自動構(gòu)建，這個本來是是很多選項的，包括npm腳本、gulp、grun等等。不過這一次，既然webpack能夠處理gulp能做的大部分東西，所以只有自動構(gòu)建中的npm腳本可以用來對webpack能做的任務(wù)進行自動化。你不需要學(xué)習(xí)Gulp，然而到后面如果你有點時間的話，可以去看看它能否對你的應(yīng)用有所幫助。
漸進式Web應(yīng)用
一旦完成了上述所有步驟，再來學(xué)習(xí)一下service worker以及如何制作漸進式web應(yīng)用。
靜態(tài)類型檢查器
靜態(tài)類型檢查器幫助給JavaScript增加類型檢查。你不需要學(xué)習(xí)這些，不過這些東西可以賦予你超能力，而且學(xué)習(xí)起來也很快，幾個鐘頭就行了。這方面主要有TypeScript 和 Flow。我喜歡TypeScript ，不過你可以兩個都看看，再選你喜歡的。
服務(wù)器渲染
你還可以在選定的任何框架內(nèi)再學(xué)學(xué)服務(wù)器端渲染的知識。有不同的選項可選，這要取決于你用什么樣的框架。比方說如果你決定用React，最值得關(guān)注的選項是Next.js 和 After.js。如果是Angular，你可以選Universal。對于Vue.js，我們有Nuxt.js。
可能還會有遺漏的地方，但是鄭州北大青鳥翔天信鴿校區(qū)認(rèn)為這勝任任何“前端工程”工作崗位需求。
主要關(guān)鍵還是需要盡可能多得練習(xí)。也許剛開始會覺得很難很嚇人，但這是很正常的，慢慢就會覺得越來越好了。學(xué)習(xí)過程中，陷入困難時千萬不要忘記需求鄭州北大青鳥翔天信鴿校區(qū)幫助，你會驚喜地發(fā)現(xiàn)原來問題是這樣簡單。
