假如有那麼殘酷的一天，我不小心喝錯了一瓶藥，一下子抹掉了我這十多年的編程經驗，把我變成了一隻小白。我想自學 前端，並且想要找到一份工作，我預計需要 6 個月的時間，前提條件是每天都處於高效率的學習狀態當中，並且每天的學習時間至少在 12 個小時以上。
即便是這樣，我敢肯定，找到的工作肯定不會太好，勉強能夠維持生活吧，畢竟是零基礎入門啊。
如果想更進一步，真正成爲一名不可或缺的高級前端工程師，時間需要更久，兩年、三年、五年，直到禿的那天。
想着想着，我就覺得有必要爲那一天做點準備，以備不時之需。
01、第一個階段，環境和工具準備
1、準備一臺電腦，要能聯網
2、下載、安裝 node、npm、webpack、webpack-cli、cnpm，配置前端開發環境
3、下載、配置MySQL
4、下載、安裝 vscode
5、準備一個 GitHub 倉庫（或者碼雲），管理前端源代碼
前端是一門計算機編程語言，學它的話，連臺電腦都沒有，學個屁。我有個親戚家的孩子想學編程，就只看書，家裏連臺電腦都不配，說什麼“先打好理論基礎，再實操”，我真的是有點醉。
有了電腦，還得聯網，自學的過程中肯定會遇到很多問題，遇到問題的時候先問搜索引擎，推薦谷歌和必應；實在沒有答案的話，也可以來找我，申請加入技術交流羣，問問羣裏面的大佬們。
千萬不要使用記事本編寫源代碼了，對於小白來說，時間是寶貴的，記事本只適合大牛們用來裝逼，不適合小白用來編程（入門），純浪費時間。
有了 vscode，後面學習源碼的話，就會方便很多。
爲什麼還需要 GitHub 倉庫或者碼雲倉庫呢？它們可以用來在線雲同步源代碼，防止版本丟失。學到最後，還可以形成一套自己的工具庫，輪子就有了，上班的時候工作效率就會高很多，能直接用的代碼再也不用重新寫了。
02、第二個階段，前端基礎入門
1）HTML
1、常用標籤
2、錨點
3、列表標籤
4、表單標籤
5、表格標籤
6、標籤分類
7、標籤語義化
8、註釋
9、字符實體
2）CSS
1、CSS介紹
2、全局樣式
3、行內樣式
4、內聯樣式
5、選擇器
6、字體樣式值
7、文本樣式值
8、顏色樣式值
9、盒模型
10、控制檯使用
11、清除默認樣式
12、盒模型居中
13、浮動
14、定位
15、外邊距塌陷
16、標準文檔流
17、行內塊元素
18、多種僞類元素
19、塊元素
20、行內元素
3）javascript初階
1、變量和運算符
2、邏輯控制
3、數據類型基礎
4、Math類
5、函數
6、定時器
7、Array類
8、String類
9、Date類
10、Object類
4）JavaScript進階
1、JavaScript DOM基礎
2、this
3、事件
4、事件流
5、JavaScript BOM 基礎
6、call&apply&bind
7、自定義屬性
8、面向對象編程
5）ES6/7/8/9
1、ECMAScript6簡介
2、let和const
3、ES6+的作用域
4、對象的擴展
5、函數的擴展
6、字符串的擴展
7、Symbol
8、Set&Map
9、Promise對象
10、async&awiat
11、箭頭函數
12、模板字符串
13、rest參數
14、Class
15、Module模塊
6）JavaScript高階
1、閉包
2、立即執行函數
3、惰性函數
4、插件開發
5、多人協作
6、深複製與淺複製
7、數組扁平化
8、遞歸
9、正則表達式全解
10、函數防抖
11、函數節流
7）HTML5
1、HTML5簡介
2、HTML5新語法
3、HTML5新語義化標籤
4、HTML5新表單元素屬性
5、HTML5手機端新事件處理
6、HTML5新增多媒體實戰
7、Canvas
8、HTML5地理組件GeoLocation
8）CSS3
1、CSS3新增屬性
2、圓角製作企業級方案
3、CSS3背景屬性
4、過渡動畫 transition
5、變化屬性 transform
6、特效輪播圖實戰
7、企業級flex佈局實戰
8、grid佈局實戰
03、第三個階段，前端核心技術
1）bootstrap
1、響應式
2、媒體查詢
3、柵格系統
4、柵格參數
5、組合模式
6、列偏移/列排序/自動列
7、列對齊/列嵌套
8、文本與顏色
9、按鈕
10、導航
11、圖文混排
12、模態框
13、輪播圖
14、企業級案例講解
2）移動端
1、移動端簡介
2、移動端視口約束
3、移動端flex移動端實踐
4、rem
5、vw
3）Ajax
1、AJAX簡介
2、AJAX作用
3、封裝AJAX
4、創建XMLhttpRquest對象
5、同步和異步
6、AJAX分頁
4）jQuery
1、jQuery介紹
2、jQuery鏈式語法
3、jQuery選擇器
4、jQuery核心
5、jQuery工具
6、jQuery事件
7、jQuery事件對象
8、jQuery特效
9、jQuery回調函數
10、jQuery文檔處理
11、jQuery篩選
12、jQuery屬性
13、jQueryCSS
5）Echarts
1、Echarts概述
2、Echarts使用
3、座標系
4、雷達圖/餅狀圖/折線圖
04、第四個階段，前端進階升級
1）Webpack
1、Webpack的安裝和使用
2、項目模塊打包
3、靜態打包模塊器
4、Webpack入口
5、Webpack輸出
6、Webpack插件
7、webpack模塊
2）vue
1、Vue使用
2、Vue響應式
3、Vue雙向數據綁定
4、Vue相關指令
5、vue-resource
6、axios
7、template選項
8、Vue生命週期
9、Vue組件
10、自定義指令
11、過濾器
12、computed屬性
13、Vue-cli 2.x和3.x 腳手架配置
14、Vue-router
15、Vuex
16、Element UI
3）微信小程序
1、uni-app
2、mpvue
3、微信小程序註冊
4、APPID申請
5、生命週期
6、小程序調試
7、微信小程序框架組件
8、’微信小程序佈局框架
9、微信小程序條件渲染和列表渲染
10、媒體組件audio
11、視圖容器
12、網絡api
13、相機api
14、地圖api
4）數據結構和算法
1、uniapp基礎
2、uniapp初始化配置
3、uniapp視圖模板使用
4、uniapp生命週期
5、uniapp路由跳轉
6、uniapp常用組件
7、uniappScrollView的使用
8、uniapp-ui使用
9、uniapp-Vuex使用
我目前是在職前端開發，如果你現在也想學習前端開發技術，在入門學習前端的過程當中有遇見任何關於學習方法，學習路線，學習效率等方面的問題，你都可以申請加入我的前端學習交流3000人裙：前面：851 中間：231 最後：348。裏面聚集了一些正在自學前端的初學者裙文件裏面也有我做前端技術這段時間整理的一些前端學習手冊，前端面試題，前端開發工具，PDF文檔書籍教程，需要的話都可以自行來獲取下載。
05、第五個階段，活着最重要
技術是沒有終點的，也是學不完的，最重要的是活着、不禿。
零基礎入門的時候看書還是看視頻，我覺得成年人，何必做選擇題呢，兩個都要。喜歡看書就看書，喜歡看視頻就看視頻。
最重要的是在自學的過程中，一定不要眼高手低，要實戰，把學到的技術投入到項目當中，解決問題，之後進一步錘鍊自己的技術。
自學最怕的就是缺乏自驅力，一定要自律，杜絕“三天打魚兩天曬網”，到最後白忙活一場。
高度自律的同時，要保持耐心，不拋棄不放棄，切勿自怨自艾，每天給自己一點點鼓勵，學習的勁頭就會很足，不容易犯困。
技術學到手後，找工作的時候一定要好好準備一份簡歷，不要無頭蒼蠅一樣去海投簡歷，容易“竹籃打水一場空”。好好的準備一下簡歷，畢竟是找工作的敲門磚。
拿到面試邀請後，在面試的過程中一定要大大方方，盡力把自己學到的知識舒適地表達出來，不要因爲是自學就不夠自信，給面試官一個好的印象，面試成功的機率就會大很多，加油吧，騷年！