前端零基礎學習提綱

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

寫在最前面

前端學習比較好上手，但到了必定階段深刻卻比較困難，一個合格的前端應該是個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
2. history
3. placeholder
4. postMessage
5. requestAnimationFrame
6. Canvas & SVG

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

JavaScript

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

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

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

jQuery就很少說了

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

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

HTTP

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

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

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

進階

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

預處理

Sass、Less

模塊化

CommonJS、AMD、CMD

工程化

gulp、webpack、NodeJS

MVVM 等框架

React、AngularJS、Vue.js

最後

順着這幾個領域走，各類知識層出不窮，耐心享受吧

其實前端和全部計算機工做同樣，終極目標都是解決問題，千萬不要沉迷於框架或者語言的無謂之爭上