前端零基礎學習提綱

茶花盛開發表於2017-10-20
前端

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

寫在最前面

前端學習比較好上手，但到了一定階段深入卻比較困難，一個合格的前端應該是個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就不多說了.

HTTP

HTTP很難去介紹這是什麼，但是非常重要，尤其是對入門後的進步階段，建議不要在網上找教程了，直接推薦兩本書對計算機體系不是很瞭解的可以先看本輕鬆的 圖解HTTP 
（web前端學習交流群：291851189 禁止閒聊，非喜勿進！）

幾個基礎知識

  1. URL 組成

  2. 狀態碼200

    • 301
    • 304
    • 307
    • 403
    • 404
    • 500

  3. HTTP 方法GET

    • POST
    • PUT
    • DELETE
    • HEAD
    • OPTIONS
    • TRACE

  4. HTTP 首部cache-control

    • connection
    • date
    • accept
    • if-Modified-Since
    • if-Match
    • ETag
    • content-encoding

5.cookie & session 
HTTP權威指南也很不錯，但預讀有一些難度

進階

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

預處理

Sass、Less

模組化

CommonJS、AMD、CMD

工程化

gulp、webpack、NodeJS

bMVVM 等框架

React、AngularJS、Vue.js

最後

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

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

這兩個問題相當於開卷面試，不同水平的同學給出的答案截然不同，也沒有標準回答，關於效能優化可以從幾個大的角度回答 
首先你必須看過關於效能優化的雅虎軍規，沒看過可以看看園友的解讀 毫秒必爭，前端網頁效能最佳實踐

如果你想學習前端可以來這個群，首先是291，中間是851，最後是189，裡面可以學習和交流，也有資料可以下載。

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

在現在計算機執行速度下，只要程式碼寫的不是特別過分，第一點對效能優化能做的很少，我們使用了更好的語法也不會對網頁提速很多。第二點是必須要做的，兒第三點現在主要成了效能優化的主要發力點 
其實前端和所有計算機工作一樣，終極目標都是解決問題，千萬不要沉迷於框架或者語言的無謂之爭上。各種知識層出不窮，耐心享受吧


相關文章