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