本文是想入門前端的初學(xué)者或前端開發(fā)者逐步成為現(xiàn)代前端開發(fā)者的學(xué)習(xí)指南，該 WEB 前端開發(fā)學(xué)習(xí)路徑是由 W3Cschool 編程獅整理的從 0 開始入門前端自學(xué)資源，內(nèi)容包含互聯(lián)網(wǎng)基礎(chǔ)知識(shí)、HTML、CSS、Git、JavaScript 等前端開發(fā)必備知識(shí)。
前端開發(fā)是創(chuàng)建 Web 頁面或 app 等前端界面呈現(xiàn)給用戶的過程，通過 HTML，CSS 及 JavaScript 以及衍生出來的各種技術(shù)、框架、解決方案，來實(shí)現(xiàn)互聯(lián)網(wǎng)產(chǎn)品的用戶界面交互 。它從網(wǎng)頁制作演變而來，名稱上有很明顯的時(shí)代特征。在互聯(lián)網(wǎng)的演化進(jìn)程中，網(wǎng)頁制作是 Web1.0 時(shí)代的產(chǎn)物，早期網(wǎng)站主要內(nèi)容都是靜態(tài)，以圖片和文字為主，用戶使用網(wǎng)站的行為也以瀏覽為主。隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展和 HTML5、CSS3 的應(yīng)用，現(xiàn)代網(wǎng)頁更加美觀，交互效果顯著，功能更加強(qiáng)大。
對(duì)于前端開發(fā)，您需要開始的全部工作是學(xué)習(xí)一些基本的 HTML，CSS 和 JavaScript 并開始從事項(xiàng)目。您將在此過程中學(xué)到的其他所有知識(shí)
注意：雖然編程獅為你整理了詳細(xì)的學(xué)習(xí)資源及對(duì)應(yīng)鏈接，但并不要求大家把所有的資源都看完，如果您覺得自己已經(jīng)理解了這些概念并且只是在重復(fù)學(xué)習(xí)的內(nèi)容，則可以跳過資源并轉(zhuǎn)到自己需要的部分繼續(xù)學(xué)習(xí)。
0、了解互聯(lián)網(wǎng)及其運(yùn)作方式
對(duì)互聯(lián)網(wǎng)，瀏覽器，網(wǎng)絡(luò)和其他相關(guān)知識(shí)有基本的了解。
- 閱讀 W3Cschool 的《互聯(lián)網(wǎng)協(xié)議入門》
- 了解瀏覽器信息
- 閱讀 W3Cschool 的《HTTP 教程》
- 閱讀 W3Cschool 的《計(jì)算機(jī)基礎(chǔ)知識(shí)》
- 完成計(jì)算機(jī)硬件基礎(chǔ)知識(shí)檢測(cè)
- 完成計(jì)算機(jī)網(wǎng)絡(luò)基礎(chǔ)知識(shí)檢測(cè)
- 學(xué)習(xí) WEB前端入門微課
1、學(xué)習(xí) HTML
HTML 提供了網(wǎng)頁的框架。學(xué)習(xí) HTML 的基礎(chǔ)知識(shí)；學(xué)習(xí)基本標(biāo)簽，學(xué)習(xí)如何編寫語義 HTML，了解基本 SEO，學(xué)習(xí)如何將頁面分成可幫助您設(shè)置樣式的部分。
- 閱讀 W3Cschool 的《HTML 教程》
- 學(xué)習(xí) HTML 入門微課
- 觀看 HTML 視頻課程
- 完成 HTML 測(cè)驗(yàn)
- 閱讀 W3Cschool 的 《HTML5 教程》
- 觀看 HTML5 基礎(chǔ)入門視頻
- 通過實(shí)戰(zhàn)了解 HTML5 新特性
- 完成 HTML5 測(cè)驗(yàn)
- 閱讀《SEO 教程》
- 查閱 W3Cschool 的《HTML 參考手冊(cè)》
2、使用 CSS 設(shè)置頁面樣式
HTML 可以為網(wǎng)頁創(chuàng)建結(jié)構(gòu)，CSS 可以設(shè)置頁面樣式并使其看起來更漂亮。如果以人體作為類比，HTML 是骨架，CSS 是皮膚，而 JavaScript 則是幫助我們行動(dòng)的肌肉，我們將在接下來的部分中詳細(xì)了解 JavaScript。
- 閱讀 W3Cschool 的《CSS 教程》
- 了解什么是 CSS 選擇器？
- 觀看 CSS 入門視頻課程
- 學(xué)習(xí) CSS 入門微課
- 閱讀 W3Cschool 的《CSS3 教程》
- 通過 HTML+CSS 基礎(chǔ)實(shí)戰(zhàn)練習(xí)
- 通過 HTML+CSS 進(jìn)階實(shí)戰(zhàn)練習(xí)
- 觀看 CSS3 入門與實(shí)戰(zhàn)視頻課程
- 學(xué)習(xí) flexBox布局基礎(chǔ)入門
- 通過實(shí)戰(zhàn)練習(xí) CSS3 flex 布局
- 通過實(shí)戰(zhàn)學(xué)習(xí) CSS3 Grid 網(wǎng)格布局
- 查閱 W3Cschool 的《CSS 參考手冊(cè)》
- 完成 CSS 測(cè)驗(yàn)
3、學(xué)習(xí) JavaScript 基礎(chǔ)
JavaScript 允許您向頁面添加交互性。您可能在網(wǎng)站上看到的常見示例是滑塊，單擊交互，彈出窗口等。在本部分中，您將學(xué)習(xí) JavaScript 的基礎(chǔ)知識(shí)。
- 閱讀 W3Cschool 的《JavaScript 教程》
- 學(xué)習(xí) JavaScript 入門微課
- 觀看 JavaScript 零基礎(chǔ)入門到進(jìn)階視頻課程
- 完成 JavaScript 測(cè)驗(yàn)
- 通過 JavaScript 基本數(shù)據(jù)結(jié)構(gòu)實(shí)戰(zhàn)
- 通過 JavaScript 函數(shù)式編程
- 通過 JavaScript 面向?qū)ο缶幊?/a>
- 觀看 JavaScript 交互式網(wǎng)站實(shí)戰(zhàn)開發(fā)視頻課程
- 觀看 Javascript 移動(dòng)端 APP 實(shí)戰(zhàn)開發(fā)視頻課程
4、版本控制系統(tǒng)和Git
版本控制系統(tǒng)使您可以跟蹤一段時(shí)間內(nèi)對(duì)代碼庫(kù)/文件的更改。它們使您可以返回到代碼庫(kù)的某些早期版本，而不會(huì)出現(xiàn)任何問題。此外，它們還有助于與使用相同代碼的人員進(jìn)行協(xié)作–如果您曾經(jīng)與某個(gè)項(xiàng)目的其他人員進(jìn)行過協(xié)作，您可能已經(jīng)知道將更改從其他人復(fù)制并合并到您的代碼庫(kù)中而感到沮喪；版本控制系統(tǒng)使您擺脫了這個(gè)問題。
在本節(jié)中，您將學(xué)習(xí)什么是版本控制系統(tǒng)，并了解如何使用 Git（實(shí)際上是 VCS）。
- 閱讀 W3Cschool 的《Git 教程》
- 學(xué)習(xí) Git 快速入門微課
- 觀看 Git 入門視頻課程
- 學(xué)習(xí) Git 微課
- 閱讀 GitHub 中文教程
現(xiàn)在，您知道了什么是 Git，并在 GitHub 上創(chuàng)建了一個(gè)帳戶，并將您從現(xiàn)在開始所做的所有事情推送到 GitHub，以便您可以從社區(qū)中的其他人那里獲得實(shí)踐并對(duì)其進(jìn)行審查。
5、使用現(xiàn)代 JavaScript （Modern JS）
在本節(jié)中，您將學(xué)習(xí)如何使用包管理器并開始使用”現(xiàn)代 JavaScript”。
- 閱讀 W3Cschool 的《現(xiàn)代 JavaScript 教程》
- 閱讀 NPM 中文教程
如果需要系統(tǒng)學(xué)習(xí)也可以直接學(xué)習(xí)編程獅的從0基礎(chǔ)入門前端開發(fā)就業(yè)的職位課程。
6、堅(jiān)持練習(xí)
不管學(xué)前端還是學(xué)后端，想提高自己的開發(fā)能力，最快的途徑還是多練，因?yàn)榫退憧丛俣嗟奈臋n和教程，自己不真正的動(dòng)手寫代碼的話，不用兩個(gè)月時(shí)間所學(xué)到的知識(shí)就忘記了，在真實(shí)項(xiàng)目中會(huì)遇到各種問題，不要一遇到問題就到處問別人，要培養(yǎng)自己遇到問題獨(dú)立的去解決問題的能力。
可以在網(wǎng)上找別人的項(xiàng)目模仿著做，當(dāng)你獨(dú)立的完成一個(gè)項(xiàng)目以后，你會(huì)發(fā)現(xiàn)你已經(jīng)入門了
選擇一款打卡、計(jì)時(shí)、記錄工具來輔助學(xué)習(xí)，如掌練APP等
- 完成 W3Cschool 的在線編程實(shí)例訓(xùn)練
以上就是由編程獅(w3cschool.cn)整理的0基礎(chǔ)入門前端開發(fā)學(xué)習(xí)路徑的全部?jī)?nèi)容，希望能夠幫到大家。
