前言
前端從零自學(xué)路線，哪怕你一丁點基礎(chǔ)都沒有，也可以按照本教程設(shè)置的路線由簡到難的學(xué)下去。如能堅持獨立看完，找一份前端開發(fā)的工作不難。
編輯器
- WebStorm安裝與使用
-
WebStrom破解和漢化
如實在破解不了，可以某寶花1塊錢買現(xiàn)成的
HTML 和 CSS 基礎(chǔ)
頁面布局
HTML5 和 CSS3
- HTML5之元素與標(biāo)簽結(jié)構(gòu)
- 十天精通CSS3
- CSS3實現(xiàn)漂亮ToolTips效果
- CSS3實現(xiàn)網(wǎng)頁平滑過渡效果
- CSS3實現(xiàn)“圖片陰影效果
Emmet
Flex
中期考核
下載標(biāo)注圖（https://share.weiyun.com/5opxTkI），并用 HTML + CSS 完成該項目
要求：
- CSS 里不能出現(xiàn) float，出現(xiàn)一處代表考核失敗
- 布局盡可能不用的或者完全不用 position，每出現(xiàn)一處 position ，扣一分
JavaScript
- JS 基礎(chǔ)
- JS 進階
- DOM探索之基礎(chǔ)詳解篇
- 回到頂部效果
- 瀏覽器開發(fā)者工具使用技巧
- 用JavaScript實現(xiàn)圖片緩慢縮放效果
- 用 JS 實現(xiàn)購物車效果
- 用 JS 實現(xiàn)放大鏡效果
- 日期選擇組件
命令行工具
CSS預(yù)處理器
Git
Vue 入門
- Vue 2.5 入門
- Vue 入門
-
Vue官網(wǎng)教程 下面的框選部分至少看三遍以上 ↓
image.png - Vue 開發(fā)購物車
-
Vue 官網(wǎng)練手小項目，只需要關(guān)注紅色框選的部分，其他的不用看。首先不要看代碼，根據(jù)效果自己去實現(xiàn)，如果自己實現(xiàn)不出來，再看代碼。如果代碼看不懂，就對著敲一遍，如果還不懂，就再敲一遍、三遍，十遍，直到自己能獨立實現(xiàn)出來為止
image.png
Vue 進階
- 安裝 nodeJS 最新版
- npm 入門
- 3小時速成 Vue2.x 核心技術(shù)
- Vue 開發(fā)去哪網(wǎng) APP
- vue-router 文檔，過一遍
- vuex 文檔，過一遍
ES6
- ES6 入門
- 購買書籍《ES6標(biāo)準入門》第三版，也可在線閱讀
看完下面的框選章節(jié)，沒有框選的部分以后再看
image.png - Promise 入門
ES6 練習(xí)
-
通過一個簡單的 TODO 項目來練習(xí) ES6 和 Vue
把下代碼克隆下來，閱讀 README 文檔 - 把 Vue 官網(wǎng)練手小項目 改為 ES6
HTTP（以下課程過一遍即可，無需敲代碼）
- 互聯(lián)網(wǎng)協(xié)議入門
- 互聯(lián)網(wǎng)協(xié)議入門 二
- DNS 原理入門
- HTTP協(xié)議原理（只看前三章）
- 什么是跨域
- 如何上線一個 web 網(wǎng)站
- 把《圖解 HTTP》書過一遍
如已獨立完成以上全部內(nèi)容，恭喜你已經(jīng)入門前端！
前端進階學(xué)習(xí)路線待更新...
2019-07-10 更新：
更新了HTTP 相關(guān)的內(nèi)容
