前言
本人自2020年2月開始自學前端，本科是數學專業的，在此之前只接觸過C語言，因此對於前端可謂是零基礎，由於網上的學習路徑魚龍混雜，因此在中間自己也踩了一些坑。經過九個月的學習，最終在今年秋招斬獲三個大廠的offer，給自己的前端學習之路畫上一個不錯的節點，希望能夠將自己的學習經歷分享出來，幫助大家。
階段一
在學習前端之前呢，你需要一個編輯器，在網上你可以看到很多編輯器用來編寫前端，甚至 Windows 系統默認的文本文檔也可以作為前端代碼的編輯器。俗話說，沒有金剛鑽怎么攬瓷器活，所以一個好的編輯器很重要，我再這里推薦給大家的編輯器是 VSCode。
一、HTML+CSS
前端的入門門檻是極低的，主要體現在 HTML 和 CSS 部分，運行環境就是瀏覽器，不像如 Java 需要配置開發/運行環境。
HTML 和 CSS 不是編程語言，HTML 是結構標簽，CSS 是結構標簽的樣式配置。
HTML
屬性
事件
標簽
字符集
CSS
CSS基礎教程
CSS樣式
CSS框模型
CSS定位
CSS選擇器
CSS高級
以上內容的學習用時 10 天左右，再花 2 天的時間項目實踐，這部分總花費時間在 12 天左右。
二、HTML5+CSS3
HTML5 作為 HTML 的最新版本，引入了多項新技術，大大增強了對於應用的支持能力，使得Web技術不再局限於呈現網頁內容。
HTML5 可以使開發者的工作大大簡化，理論上單次開發就可以在不同平台借助瀏覽器運行，降低開發的成本，這也是產業界普遍認為 HTML5 技術的主要優點之一。
CSS3使用了層疊樣式表技術，可以對網頁布局、字體、顏色、背景燈效果做出控制。css3作為css的進階版，拆分和增加了盒子模型、列表模塊、語言模塊 、背景邊框 、文字特效 、多欄布局等等。
CSS3的改變有很多，增加了文字特效，豐富了下划線樣式，加入了圈重點的功能。在邊框方面，有了更多的靈活性，可以更加輕松地操控漸變效果和動態效果等等。在文字效果方面，特意增加了投影。
CSS3在兼容上做了很大的功夫，並且網絡瀏覽器也還將繼續支持CSS2，因此原來的代碼不需要做太多的改變，只會變得更加地輕松。
HTML5
HTML5視頻
HTML5音頻
HTML5拖放
HTML5畫布
HTML5 SVG
HTML5地理定位
HTML5 Web存儲
HTML5 應用緩存
HTML5表單
CSS3
CSS3邊框
CSS3背景
CSS3文本效果
CSS3字體
CSS3 2D轉換
CSS3 3D 轉換
CSS3 過渡
CSS3 動畫
CSS3 多列
以上內容用時 8 天左右，這部分內容是在 HTML+CSS 做的升級改進，只需要了解他們的一些特性即可，再結合這些特性做一些小項目加深學習。
三、Javascript
JavaScript 是至關重要的部分，是 web 開發者必學的三種語言之一，這里我們需要區別 JavaScript 和 Java 他們是完全不同的語言，不論是概念還是設計。
認識JavaScript
基本語法
變量
數據類型
函數
運算符
流程控制
DOM對象
BOM對象
以上內容的學習用時 一個月 左右，這里推薦幾本 Javascript 的書籍，如下：
-
《JavaScript 高級程序設計（第3版）》，俗稱紅寶書。前七章講的是語言特性，是重點學習的部分，必須需要反復閱讀，直至完全理解為止。DOM、事件流、表單、JSON、Ajax 與最后幾章也需要重點學習，這是一些常用的 Web API。至於本書的其余部分大致讀一下就可以，不做重點要求。
-
《JavaScript 語言精粹》，俗稱蝴蝶書。很薄的一本書總頁數就 147 頁，花一天時間就能看完，快的話半天就能看完。這本書雖然很薄，但是承載的內容卻非常的豐厚和深入。JavaScript是一門有很多坑的語言，所以這本書”取其精華，去其糟粕“就是精粹了。
-
《你不知道的 JS》非常精彩的一本書，將 JavaScript 的細節一網打盡。
階段二
這部分內容是對 JavaScript 的補充學習。
一、Jquery
基礎語法
選擇器
DOM操作
事件
動畫
常用工具
Ajax
Jquery插件編寫
二、其他
JavaScript 進階
DOM+BOM綜合演練
網頁特效
ES6 進階
bootstrap
animate.css學習
以上內容的學習用時 9 天左右
階段三
這部分是框架和前后端交互技術的學習。
一、VUE
Vue基礎
Vuex
Vue-router
axios
二、React
認識React
React元素渲染
JSX
組件
State
Props
事件處理
條件渲染
列表
組件API
組件聲明周期
三、Node
1.基礎console（控制台）
crypto（加密）
debugger（調試器）
fs（文件系統）
http（網絡）
os（操作系統）
path（路徑）
2. 高級
NPM介紹及使用
MVC模式簡介
Express框架學習
鏈接Mysql
鏈接Redis
項目實戰
四、webpack
概念
入口
輸出
模式
loader
插件
配置
以上內容用時 兩個月 左右
階段四
一、Mysql
1.階段一認
識mysql
安裝mysql
創建數據庫、數據表學習
常用的SQL命令，完成增刪查改
2.階段二
學習Mysql關聯查詢，子查詢等
學習Mysql常用函數
學習Mysql分組、分頁、排序等
3. 階段三
學習Mysql高級查詢
了解存儲過程，自定義函數等
了解Mysql配置文件
二、Redis
認識Redis
學習redis的數據類型
redis常用操作
redis事務
以上內容用時 7 天左右
階段五
一、項目管理篇
SVN使用
GIT使用
二、擴展部分
小程序
了解小程序開發流程
視圖容器
基礎內容
表單組件
導航
媒體組件
地圖（map）
畫布（canvas）
開放能力
apicloud（移動app開發）
認識apicloud
開發工具講解
端API
雲API
小程序模塊使用
三、常用框架使用篇
iview （vue框架）
element ui （vue框架）
REACT
echarts (百度圖標庫)
阿里巴巴開源圖標
使用Sass學習
Swiper學習
zoom.js 學習
總結
從前端入門開始學起，剛剛接觸時應該會比較難懂，一兩天之后學習就會順利了。前端入門學習是比較簡單的，像CSS和HTML學習來比較容易，但建議不要一味的看書，最好結合着視頻一起學習，會比較高效。
像后面的js、CSS3+HTML5等等這些，可能會比較難，理解起來也沒有那么容易，最好能有前端大神在一旁指點迷津，在遇到不懂得問題時，及時解決，否則可能會成為潛藏的隱患，以后寫代碼時會出現bug。每天保持4個小時的左右的時間學習，最多三個月，就應該可以自己寫頁面了。
但自學時有一些問題要注意：
1.不要閉門造車，多和人交流經驗，避免走入歧途；
2.學習時一定要給自己制定計划、每天總結學習內容；
3.最好找一個人監督自己學習，避免三天打魚兩天曬網；一定要把學到的內容落實到實踐上面（這是最重要的）。
前端開發日新月異，只要我們把最基礎的知識掌握好了，尤其是javascript編程語言。無論它出現多少的開發框架，我們都可以快速掌握並使用它。當然使用這些框架或工具來開發項目只是我們必備的崗位技能，我們進一步需要學習的是如何掌握工作技巧，並且每天都有所進步，不管是技術上面還是項目管理上面。只有不斷學習不斷進步，保持成長性的思維，才不會被崗位和社會所淘汰。
為了幫助自學的朋友們檢測自學程度，特別整理了《95頁前端學習筆記》電子稿文件。
主要內容包括html，css，html5，css3，JavaScript，正則表達式，函數，BOM，DOM，jQuery，AJAX，vue 等等。
html5/css3
-
HTML5 的優勢
-
HTML5 廢棄元素
-
HTML5 新增元素
-
HTML5 表單相關元素和屬性
-
CSS3 新增選擇器
-
CSS3 新增屬性
-
新增變形動畫屬性
-
3D變形屬性
-
CSS3 的過渡屬性
-
CSS3 的動畫屬性
-
CSS3 新增多列屬性
-
CSS3新增單位
-
彈性盒模型
JavaScript
-
JavaScript基礎
-
JavaScript數據類型
-
算術運算
-
強制轉換
-
賦值運算
-
關系運算
-
邏輯運算
-
三元運算
-
分支循環
-
switch
-
while
-
do-while
-
for
-
break和continue
-
數組
-
數組方法
-
二維數組
-
字符串
正則表達式
-
創建正則表達式
-
元字符
-
模式修飾符
-
正則方法
-
支持正則的 String方法
js對象
-
定義對象
-
對象的數據訪問
-
JSON
-
內置對象
-
Math 方法
-
Date 方法
面向對象是一種編程思想
- 定義對象
- 原型和原型鏈
- 原型鏈
- 原型
常用的JavaScript設計模式
-
單體模式
-
工廠模式
-
例模式
函數
-
函數的定義
-
局部變量和全局變量
-
返回值
-
匿名函數
-
自運行函數
-
閉包
BOM
-
BOM概述
-
window方法
-
frames [ ] 框架集
-
history 歷史記錄
-
location 定位
-
navigator 導航
-
screen 屏幕
-
document 文檔
DOM
- DOM對象方法
- 操作DOM間的關系
- DOM節點屬性
事件
-
事件分類
-
事件對象
-
事件流
-
事件目標
-
事件委派(delegate)
-
事件監聽
jQuery
-
jQuery 選擇器
-
屬性選擇器
-
位置選擇器
-
后代選擇器
-
子代選擇器
-
選擇器對象
-
子元素
-
DOM操作
-
JQuery 事件
-
容器適應
-
標簽樣式操作
-
滑動
-
自定義動畫
AJAX
- 工作原理
- XMLHttpRequest對象
- XML和HTML的區別
- get() 和post()
HTTP
-
HTTP消息結構
-
url請求過程
性能優化
- JavaScript代碼優化
- 提升文件加載速度
webpack
-
webpack的特點
-
webpack的缺點
-
安裝
-
webpack基本應用
-
配置文件入門
vue
-
MVC模式
-
MVVM模式
-
基礎語法
-
實例屬性/方法
-
生命周期
-
計算屬性
-
數組的更新檢查
-
事件對象
-
Vue組件
-
路由使用
-
路由導航
-
嵌套路由
-
命名視圖
