這篇文章只對接觸前端不到兩個月,覺得一堆東西要學,但又不知道從何開始的同學有用
寫在最前面
前端學習比較好上手,但到了一定階段深入卻比較困難,一個合格的前端應該是個web工程師,而不是JavaScript程序員,因此簡單的學習目標
- CSS、CSS3
- HTML、HTML5
- JavaScript、ES6
- HTTP協議
- 性能優化
- 一門后端語言
- 更好的方式寫代碼
- 線下開發和代碼發布
學習路徑比較長,對于初級學習有些合理的路徑
學會 Markdown,平時多寫文檔
堅持寫博客,收益絕對超出你想象,但要寫在大眾的地方,不要自己搞個網站,否則沒人關注,漸漸就沒了興趣
了解一下GitHub,讓你的代碼不在停留在本地。也許這兩篇教程可以幫著你理解Git語法 git - 簡易指南、Pro Git
CSS
很多初學者認為前端難在JavaScript,CSS和HTML比較簡單,這種觀點有一定道理,CSS和HTML的語法比較簡單,但運用的好可以幫我們減少很多JavaScript代碼
對于CSS的學習常用屬性的了解 w3school就不錯,但CSS有幾個核心知識一定要非常了解
- position和z-index
- display
- float
- margin
這幾個會附帶BFC啊什么的一堆相關知識點,每個屬性的值含義都要非常清楚才行
MDN上有很多基礎知識的文章,很全面,例子也很詳盡 CSS入門教程,實在是學習的好材料
另外CSS的一些布局技巧也需要掌握,圣杯布局雙飛翼啊,聽起來很玄妙,不妨從最簡單的開始 學習CSS布局
張鑫旭大神也教我們如何做人 說說CSS學習中的瓶頸
對于CSS3也是要了解的,有幾個常用的
- 變形
- 動畫
- 圓角、陰影
- box-sizing
- flex
HTML
HTML5看場景,如果是移動端,應該開始全面掌握了,PC的話也有幾個常用的,能做到兼容或者退化的
- localstorage & sessionStorage
- history API
- placeholder
- postMessage
- requestAnimationFrame
- 自定義屬性 data-*
- audio & video 標簽
全面了解的話 MDN依舊是個好去處
JavaScript
網上有很多JavaScript方面的教程,但對于初學者基礎還是比較重要,否則都沒有篩選教程的能力
我強烈推薦 JavaScript高級程序設計,不要被書名嚇到,這真的是一本由淺入深的學習書,值得所有基礎不好的同學讀三遍,每次肯定有新收獲,而且書的后面有很多高級些的技巧
JavaScript權威指南做工具書更合適一些
jQuery就不多說了
關于ES6看看阮一峰的 ECMAScript 6 入門,最近還改版了,有余力的同學可以買一下書支持阮老師
另外阮老師的博客里入門教程類的干貨真心不少,挑著讀讀
幾個基礎知識
HTTP
HTTP很難去介紹這是什么,但是非常重要,尤其是對入門后的進步階段,建議不要在網上找教程了,直接推薦兩本書
對計算機體系不是很了解的可以先看本輕松的 圖解HTTP
幾個基礎知識
- URL 組成
- 狀態碼
- 200
- 301
- 304
- 307
- 403
- 404
- 500
- HTTP 方法
- GET
- POST
- PUT
- DELETE
- HEAD
- OPTIONS
- TRACE
- HTTP 首部
- cache-control
- connection
- date
- accept
- if-Modified-Since
- if-Match
- ETag
- content-encoding
- cookie & session
HTTP權威指南也很不錯,但預讀有一些難度
進階
前端天地無限廣闊,關于進階那就百花齊放了,有幾個流行的領域
預處理
Sass、Less
模塊化
CommonJS、AMD、CMD
工程化
gulp、webpack、NodeJS
MVVM 等框架
React、AngularJS、Vue.js
最后
前端面試幾乎都會問的兩個問題
- 性能優化
- 從輸入 URL 到頁面呈現發生了什么
這兩個問題相當于開卷面試,不同水平的同學給出的答案截然不同,也沒有標準回答,關于性能優化可以從幾個大的角度回答
首先你必須看過關于性能優化的雅虎軍規,沒看過可以看看園友的解讀 毫秒必爭,前端網頁性能最佳實踐
- 針對瀏覽器渲染頁面原理的 CSS、JavaScript 語法層面優化
- 針對 HTTP 協議特性網絡性能優化(合并資源、壓縮、多個域名等)
- 用戶體驗層面性能優化(懶加載之類)
在現在計算機運行速度下,只要代碼寫的不是特別過分,第一點對性能優化能做的很少,我們使用了更好的語法也不會對網頁提速很多。
第二點是必須要做的,兒第三點現在主要成了性能優化的主要發力點
其實前端和所有計算機工作一樣,終極目標都是解決問題,千萬不要沉迷于框架或者語言的無謂之爭上。各種知識層出不窮,耐心享受吧
文章列表