前端零基礎學習提綱

這篇文章只對接觸前端不到兩個月，以爲一堆東西要學，但又不知道從何開始的同窗有用

寫在最前面

前端學習比較好上手，但到了必定階段深刻卻比較困難，一個合格的前端應該是個web工程師，而不是JavaScript程序員，所以簡單的學習目標

1. CSS、CSS3
2. HTML、HTML5
3. JavaScript、ES6
4. HTTP協議
5. 性能優化
6. 一門後端語言
7. 更好的方式寫代碼
8. 線下開發和代碼發佈

學習路徑比較長，對於初級學習有些合理的路徑

1. 學會 Markdown，平時多寫文檔

2. 堅持寫博客，收益絕對超出你想象，但要寫在大衆的地方，不要本身搞個網站，不然沒人關注，漸漸就沒了興趣

3. 瞭解一下GitHub，讓你的代碼不在停留在本地。也許這兩篇教程能夠幫着你理解Git語法 git - 簡易指南、Pro Git

CSS

不少初學者認爲前端難在JavaScript，CSS和HTML比較簡單，這種觀點有必定道理，CSS和HTML的語法比較簡單，但運用的好能夠幫咱們減小不少JavaScript代碼

對於CSS的學習經常使用屬性的瞭解 w3school就不錯，但CSS有幾個核心知識必定要很是瞭解

1. position和z-index
2. display
3. float
4. margin

這幾個會附帶BFC啊什麼的一堆相關知識點，每一個屬性的值含義都要很是清楚才行

MDN上有不少基礎知識的文章，很全面，例子也很詳盡 CSS入門教程，實在是學習的好材料

另外CSS的一些佈局技巧也須要掌握，聖盃佈局雙飛翼啊，聽起來很玄妙，不妨從最簡單的開始 學習CSS佈局

張鑫旭大神也教咱們如何作人 說說CSS學習中的瓶頸

對於CSS3也是要了解的，有幾個經常使用的

1. 變形
2. 動畫
3. 圓角、陰影
4. box-sizing
5. flex

HTML

HTML學習基礎仍是推薦 w3school 和 MDN

HTML5看場景，若是是移動端，應該開始全面掌握了，PC的話也有幾個經常使用的，能作到兼容或者退化的

1. localstorage & sessionStorage
2. history API
3. placeholder
4. postMessage
5. requestAnimationFrame
6. 自定義屬性 data-*
7. audio & video 標籤

全面瞭解的話 MDN依舊是個好去處

JavaScript

網上有不少JavaScript方面的教程，但對於初學者基礎仍是比較重要，不然都沒有篩選教程的能力

我強烈推薦 JavaScript高級程序設計，不要被書名嚇到，這真的是一本由淺入深的學習書，值得全部基礎很差的同窗讀三遍，每次確定有新收穫，並且書的後面有不少高級些的技巧

JavaScript權威指南作工具書更合適一些

jQuery就很少說了

關於ES6看看阮一峯的 ECMAScript 6 入門，最近還改版了，有餘力的同窗能夠買一下書支持阮老師

另外阮老師的博客裏入門教程類的乾貨真心很多，挑着讀讀

幾個基礎知識

HTTP

HTTP很難去介紹這是什麼，可是很是重要，尤爲是對入門後的進步階段，建議不要在網上找教程了，直接推薦兩本書

對計算機體系不是很瞭解的能夠先看本輕鬆的 圖解HTTP

幾個基礎知識

1. URL 組成
2. 狀態碼
   1. 200
   2. 301
   3. 304
   4. 307
   5. 403
   6. 404
   7. 500
3. HTTP 方法
   1. GET
   2. POST
   3. PUT
   4. DELETE
   5. HEAD
   6. OPTIONS
   7. TRACE
4. HTTP 首部
   1. cache-control
   2. connection
   3. date
   4. accept
   5. if-Modified-Since
   6. if-Match
   7. ETag
   8. content-encoding
5. cookie & session

HTTP權威指南也很不錯，但預讀有一些難度

進階

前端天地無限廣闊，關於進階那就百花齊放了，有幾個流行的領域

預處理

Sass、Less

模塊化

CommonJS、AMD、CMD

工程化

gulp、webpack、NodeJS

MVVM 等框架

React、AngularJS、Vue.js

最後

前端面試幾乎都會問的兩個問題

1. 性能優化
2. 從輸入 URL 到頁面呈現發生了什麼

這兩個問題至關於開卷面試，不一樣水平的同窗給出的答案大相徑庭，也沒有標準回答，關於性能優化能夠從幾個大的角度回答

首先你必須看過關於性能優化的雅虎軍規，沒看過能夠看看園友的解讀 毫秒必爭，前端網頁性能最佳實踐

1. 針對瀏覽器渲染頁面原理的 CSS、JavaScript 語法層面優化
2. 針對 HTTP 協議特性網絡性能優化（合併資源、壓縮、多個域名等）
3. 用戶體驗層面性能優化（懶加載之類）

在如今計算機運行速度下，只要代碼寫的不是特別過度，第一點對性能優化能作的不多，咱們使用了更好的語法也不會對網頁提速不少。
第二點是必需要作的，兒第三點如今主要成了性能優化的主要發力點

其實前端和全部計算機工做同樣，終極目標都是解決問題，千萬不要沉迷於框架或者語言的無謂之爭上。各類知識層出不窮，耐心享受吧