零基礎想學好web前端首先要有規劃，了解自學前端需要學哪些知識識。那么廢話不多說，web前端自學學習路徑如下：

（前端學習路線（詳細路徑可以加微信領?。?br/>

其次工欲善其事必先利其器，學習前端的過程中都要掌握哪些軟件呢?常用的開發軟件主要有以下幾種：(大家可以關注我的專欄，后期會陸續發布詳細安裝教程)

1、Sublime Text(官網：https://www.sublimetext.com/)

Sublime Text是一個跨平臺的代碼編輯器，同時支持Windows、Linux、Mac OS X等操作系統，也是HTML的文本編輯器。

Sublime Text具有漂亮的用戶界面和強大的功能，主要功能包括：拼寫檢查、書簽、完整的 Python API 、Goto 功能、即時項目切換、多選擇、多窗口等等。

2、Visual Studio Code(簡稱：Vscode，官網：https://code.visualstudio.com/)

Visual Studio Code中文版是微軟推出的帶 GUI 的代碼編輯器，軟件功能強大，界面簡潔明晰、操作方便快捷，設計得很人性化。軟件主要改進了文檔視圖，完善了對 Markdown的支持，新增PHP語法高亮。

3、notepad++(官網：https://notepad-plus.en.softonic.com/)

軟件小巧高效，支持27種編程語言，包括C、C++、Java、C#、XML、 HTML、 PHP、JS 等，Notepad++ 內置支持多達27種語法高亮度顯示。是一款小巧而功能強大的軟件。

4、editplus(官網：https://www.editplus.com/)

是一套功能強大的文字編輯器，擁有無限制的Undo/Redo(撤銷)、英文拼字檢查、自動換行、列數標記、搜尋取代、同時編輯多文件、全屏幕瀏覽功能。除了支持HTML、 CSS、 PHP,、ASP、 Perl、C/C++、Java、JavaScript、 VBScript的代碼高亮外，還內建完整的HTML和CSS指令功能。

5、WebStorm(官網：https://www.jetbrains.com/webstorm/)

WebStorm是一款Java開發工具，WebStorm具有的優勢是：智能的代碼補全、代碼格式化、html提示、聯想查詢、代碼重構、代碼檢查和快速修復、代碼調試、代碼結構瀏覽、代碼折疊、包裹或者去掉外圍代碼。

安裝好了軟件，也了解了都要學什么，那么要怎么開始學習呢，這就需要學習教程啦!學習教程可以從b站、慕課網、騰訊課堂這些平臺找免費的學習教程，視頻教程學起來更通俗易懂。初學者不建議通過看書學習，因為書上都是一些專業性比較強的詞匯，比較難以理解的。在學習到一定程度之后，你可以再通過看書對知識進行一個鞏固提升。

當然，web前端在學習的過程中離不開各種交互效果，下面我就分享幾個寶藏網站，一定要收藏喲!

1、17素材網(官網：https://www.17sucai.com/)

17素材網主要收集jQuery網頁特效、jQuery網頁代碼、網站模板、網頁模板、企業模板、商城模板、圖標等素材，為html網站模板開發人員提供高效率的工作方式。這個網站我在找交互效果的時候經常用，里面有很多讓人驚艷的動畫效果。

2、GSAP(官網：https://greensock.com/gsap/)

GSAP 可能目前最炫酷的免費動畫庫之一了。它運行于純粹的 JavaScript 之上，是目前最強健的動畫資源庫之一。

它符合 HTML5 的規范，并且和幾乎所有的現代瀏覽器都能良好的協同，可以SVG、畫布元素甚至 jQuery 對象良好地協同，諸如 EaselJS 這樣的庫也可以和 GSAP 聯動。

3、CSShake(官網：https://elrumordelaluz.github.io/csshake/)

CSShake可以讓你的元素搖晃起來，可以是輕輕的搖晃，水平的搖晃，也可以是瘋狂的搖晃……

4、Instafavicon(官網：https://instafavicon.com/)

項目要展示了，少不了一個favicon。這個網站可以幫你快速生成一個簡潔美觀的站點圖標。

5、GitHub(官網：https://github.com/)

GitHub是世界上最大的代碼托管平臺,幫助開發者存儲和管理其項目源代碼，且能夠追蹤、記錄并控制用戶對其代碼的修改，超5千萬開發者正在使用。

最后，在學習過程中會遇到各種各樣的問題，如果問題很久不能解決，就會打擊到你學習的信心，最終導致放棄。所以你最好還是有一個經驗豐富的人在前期能夠帶一帶你，幫你解答學習過程中遇見的問題。身邊沒有能夠幫你解答問題的人，加一些學習群或者加我聊聊，幫你解決各種問題~

多年開發經驗，你可以私信我你目前的情況，我可以幫你根據你的時間制定一個學習規劃，學習過程中遇見什么問題也可以隨時問我。