前端初學者學習路線

前端無論怎么變化，核心終究是：HTML，CSS，Javascript

注意，該學習路徑是在短時間內學習的核心要點

每天學習7個小時計算

0.准備階段

1. 要求學歷至少大專以上
2. 英語要求會記住單詞
3. 思維邏輯要求是正常人
4. 電腦一台
5. 開發工具vscode 網上下載
6. 關鍵核心：有對前端編碼的興趣和學習的毅力

1.入門階段

學完可以做基本的靜態網頁，可以看面試題中的HTML，CSS部分，這個是非常基礎的本分。

學習資源：https://www.bilibili.com/video/av80149248

學習時間：70h(2周)

學習內如下：

HTML

1. 語義標簽：html5新標簽

CSS

1. 選擇器
2. 盒子模型
3. 定位、浮動
4. 動畫
5. CSS常用屬性：邊框、圓角、背景、寬高、溢出
6. BFC
7. flex屬性以及布局
8. css 常用單位：px、%、rem、vh、vw、em

HTML，CSS綜合布局練習

1. 達到看到現有網站，自己心里很清楚怎么實現界面效果的
2. 響應式布局方案：%，rem, 媒體查詢器，vh,vw,縮放
3. 看bootstrap，樣式源碼

2.Javascript基礎

學完可以開發一個前端網站了,但距離實習還差很遠

學習資源：https://www.bilibili.com/video/BV1HJ41147DG/?spm_id_from=333.788.videocard.1

學習時間：35h(2周)

學習內容如下：

1. js基礎語法：變量、流程控制、循環、運算符、比較符、函數、數據類型、回調函數
2. dom編程：常用的增刪改查dom的方法、屬性、事件
3. bom編程：window常用的瀏覽器屬性、方法
4. ajax、Fetch API
5. 瀏覽器本地儲存

3.Javascript進階

這個階段的內容非常重要,關系到之后的進一步學習

學習資源：到掘金上面去搜索

學習時間：35h(1周)

學習內容如下：

1. js作用域
2. js原型鏈、繼承
3. 閉包、立即執行函數
4. es5中的常用遍歷函數
5. 引用數據與基礎數據的區別，以及如何復制引用數據
6. this指向問題
7. js 事件過程

4.構建工具學習

學習時間：28h(4天)

學習資源：https://www.bilibili.com/video/BV1e7411j7T5?from=search&seid=15702833601474678402

學習內容如下：

1. nodejs 中的express 玩demo學習
2. webpack構建工具常用配置學習

5.Vue

主要看官網文檔，加上github搜索項目練習

學習資源：https://cn.vuejs.org/；  https://www.bilibili.com/video/BV15741177Eh?from=search&seid=5456042360481253410

學習時間：70h(2周)

學習目標：

1. 熟練使用vue的各種語法；
2. 常用UI框架
3. SASS/LESS
4. vue-router
5. vuex
6. 瀏覽器環境調試方法

6.ES6

該階段是js的新語法，必須掌握，工作中會使用

學習資源：https://www.bilibili.com/video/BV1xW411x7sw?from=search&seid=12056380761691782132

學習時間：70h(2周)

1. 新的變量定義，數據結構
2. 箭頭函數
3. 對象新屬性
4. promise、async、await
5. class

注意5，6會一起學習

7.代碼管理工具

1. SVN
2. GIT

8.github，掘金搜索前端面試相關的面試題集錦，大量刷題，大量記憶(不要覺得low ,短時間內的高效方法)，但要理解搞懂

准備方向：

1. HTML
2. CSS
3. JS/ES6
4. Vue各種原理
5. webpack loader,plugin自定義
6. 常用排序算法
7. http協議，tcp握手，OSI7層網絡模型，cookie/sesstion
8. event loop,宏任務，微任務
9. 跨域方式
10. 前端常用的設計模式
11. 性能優化
12. html,css是如何解析渲染的
13. js是如何執行的
14. 瀏覽器緩存

學習資源：

文檔

https://www.w3school.com.cn/；

https://www.runoob.com/；

https://developer.mozilla.org/zh-CN/；

http://caibaojian.com/css3/；

https://v3.bootcss.com/css/；

https://es6.ruanyifeng.com/；

書籍：

1. 《JavaScript DOM 編程藝術 》
2. 《JavaScript高級程序設計》
3. 《你不知道的JavaScript 》
4. 《es6 阮一峰》
5. 《圖解HTTP 》
6. 《高性能javascript》

書籍可以到XX多平台購買，雖是盜版的，但是紙張字跡都非常不錯，物美價廉

網課：

騰訊課堂、網易課堂、bilibili、慕課網、極客學院 各大平台可以綜合起來學習

遇到不懂的問題：

1. 多加前端技術qq群
2. 百度🔍

 

以上學習路徑，是非常基礎，全部學習完，0基礎的朋友至少需要3個月；有編程經驗的朋友，學習時間可以大幅縮減。

這個路徑，主要面向快速學習，想馬上工作的朋友；

在以后的工作中，需要不停學習，不斷提高自己的技能