前端零基礎學習提綱

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

寫在最前面

前端學習比較好上手,但到了一定階段深入卻比較困難,一個合格的前端應該是個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. 用戶體驗層面性能優化(懶加載之類)

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

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章