前端大牛學習路徑和資源集合，小白入門必看（超級長，建議收藏）

GitHub 上有一個頗有名的 Roadmap：https://github.com/kamranahmedse/developer-roadmap

想成爲一名前端大牛，按照這個路線學習，足以幫助你快速成長。

從一名小白開始入門前端，到前端進階，再到成長爲技術大牛。

首先學習 HTML、CSS 和 JavaScript 的基礎知識。你能夠在如下幾個網站學習這些基礎知識：

W3school：http://www.w3school.com.cn/

MDN 官方教程：https://developer.mozilla.org/zh-CN/

W3C 官方文檔：https://www.w3.org/

freecodecamp 學習網站：https://www.freecodecamp.com/

以後你就須要學習一些包管理，包括 npm，yarn 等等。

接下來學習 CSS 預處理，CSS 的一些框架的使用，最多見的就是 Bootstrap 等。以及 CSS Architecture。

這裏推薦一些好用的前端庫：

• Sass: CSS的擴展，能夠聲明變量，引入模塊，嵌套屬性等等。
• Less: 爲CSS添加聲明變量，樣式模塊，命名空間，繼承等特性。
• Stylus: 寫CSS不再用寫煩人的括號啦～
• Bootstrap: 全世界最流行的響應式前端框架。
• Foundation: 提供了不少模版，針對網站、移動端、郵件提供了不少好用的模塊和樣式。
• Semantic UI: 我的很是喜歡的一個前端框架，樣式很是好看，更重要的是就像它語義UI的名稱同樣，類命名特別友好，寫網頁就像和人說話同樣。
• uikit: 漂亮、可定製，即將發佈uikit3版本，感興趣能夠試試看。

以後學習一些構建工具及其餘工具的使用，並儘可能明確其原理。包括但不限於如下工具：

• Grunt: JavaScript自動化工具。
• Gulp: 我的感受是最好用的自動化構建工具。
• webpack：模塊化加載構建一切，CSS/JS連圖片均可以
• npm: NPM雖好，不要太依賴襖。
• Bower: 前端框架包管理工具，各種框架和庫一鍵安裝。

以後進行前端框架的選擇和學習，包括但不限於如下框架：

• Vue：普遍使用的前端框架，認真學。
• React：也是一個普遍使用的前端框架，最好把這個和 Vue 都認真學習好。
• jQuery: 方便快捷，功能強大全面，居家旅行必備，近乎JS的替代品，你能夠不會js，可是不能不會jQuery。
• BackBoneJS: 模型、視圖、集合、事件，讓你的前端代碼更有框架感。
• D3.js: 數據可視化必學必會，只有你想不出來的，沒有D3畫不出來的。
• React: 學會React，再學學React-native，你就能從一個前端化身Web app工程師、IOS/Andorid開發者、桌面應用工程師……
• jQuery UI: 幾行代碼就能寫一個帶動畫帶ajax的Web應用。
• jQuery Mobile: 移動端專用js開發框架，和上面的相似襖。
• Underscore.js: 非入侵式框架，提供了衆多有用的函數方法，彌補jQuery的不足。
• Moment.js: 原生的JS顯示輸出日期時間真的很痛苦，Moment爲你解決了一切啦～
• Lodash: 模塊化且高效，lodash和underscore很類似。
• Ruby on Rails: Ruby on Rails 是一款用ruby語言編寫Web應用的MVC框架，github就是用它寫的！
• AngularJS: Google主導的Web開發框架，數據綁定、MVVM，很惋惜被後來更靈活的React、Vue等框架搶去了風頭。
• Ember.js: 用來開發單頁Web應用的JS前端MVC框架。
• Express: Node.js上的Web框架，搭建網站或API服務只要一秒鐘！
• Meteor: JS全端框架，是的，你只須要學習JavaScript一門語言，就能夠完成Web應用先後端、數據庫的開發。
• Django: Python的Web框架，人生苦短，請用Python.
• Flask: Python的Web框架，聽說只要學好flask就能隨意找到好工做？
• ASP.net: 老一輩人的最愛。
• Laravel: 最優雅性感的PHP Web框架，好用到不能再好用，優雅到不能再優雅，畢竟PHP是全世界最好的語言嘛。
• Phalcon: 用C語言擴展的，聽說是最快的PHP框架。

框架和知識學習好了，要學習如何進行測試，主要包括這部份內容：

以後要學習 PWA，這是之後的發展趨勢：

以後學習一些更深刻的內容：

下面是學習路線和學習資源，有須要的請自取。

入門類

• 前端入門教程
• 瘳雪峯的Javascript教程
• 前端工程師必備的PS技能——切圖篇
• 結合我的經歷總結的前端入門方法
• 做者的簡書地址
• 做者的CSDN地址
• HTML 修真錄------初識"異界"
• HTML 修真錄------"深淵三君王"
• HTML 基礎入門
• HTML 基礎提高
• CSS 基礎入門
• CSS 盒模型
• CSS 浮動
• CSS 定位

HTML 5 部分

• 深刻理解HTML5標籤
• 如何寫出高效率的HTML
• HTML meta標籤總結與屬性使用介紹
• 戲說HTML5
• 編寫高質量的 HTML 代碼
• 如何解決 img 標籤上下出現的間隙
• 五分鐘學會 Canvas 基礎（一）
• 五分鐘學會 Canvas 基礎（二）
• 模仿 LED 燈的滾動文字效果
• 關於 Canvas 的兄弟 SVG 的基礎教程
• HTML 5 動態效果製做方法整理
• Canvas 效果實例
• 細數前端中的一些黑科技
• 前端 Meta 用法大彙總
• HTML5新特性

CSS 3 部分

• CSS 語法參考
• 如何編寫可維護的CSS
• CSS3動畫手冊
• 騰訊css3動畫製做工具
• 志爺css小工具集合
• css3 js 移動大雜燴
• bouncejs 觸摸庫
• animate.css
• 全局CSS的終結
• browserhacks
• CSS3其餘屬性
• 彈性盒模型詳解
• CSS3動畫
• 2D變形&3D變形
• 蒙版mask

JQuery

• YOU MIGHT NOT NEED JQUERY
• jQuery API 中文文檔
• hemin 在線版
• css88 jq api
• css88 jqui api
• 學習jquery
• jquery 源碼查找
• Web前端資源彙總(jQuery,Js,Css3等)

Angular JS

• Angular.js 的一些學習資源
• angularjs中文社區
• Angularjs源碼學習
• Angularjs源碼學習
• angular對bootstrap的封裝
• angularjs + nodejs
• 呂大豹 Angularjs
• AngularJS 最佳實踐
• Angular的一些擴展指令
• Angular數據綁定原理
• 一些擴展Angular UI組件
• Ember和AngularJS的性能測試
• 帶你走近AngularJS - 基本功能介紹
• Angularjs開發指南
• Angularjs學習
• 不要帶着jQuery的思惟去學習AngularJS
• angularjs 學習筆記
• angularjs 開發指南
• angularjs 英文資料
• angular bootstrap
• angular jq mobile
• angular ui
• 整合jQuery Mobile+AngularJS經驗談
• 有jQuery背景，該如何用AngularJS編程思想
• AngularJS在線教程
• angular學習筆記

React

• react.js中文論壇
• react.js官方網址
• react.js官方文檔
• react.jsmaterialUI
• react.jsTouchstoneJSUI
• react.jsamazeuiUI
• React入門實例教程-阮一峯
• ReactNative中文版
• Webpack和React小書-前端亂燉
• Webpack和React小書-gitbook
• webpack
• Webpack，101入門體驗
• webpack入門教程
• 基於webpack搭建前端工程解決方案探索

Vue

• Vue2.0
• Vue
• Vue Router
• Vuex
• Vue-Cli
• Vue 論壇
• Vue 聊天室
• Vue 入門指南
• Vue 的一些資源索引
• awesome-vue
• vue-syntax-highlight

Node JS

• Node.js 包教不包會
• 一個nodejs博客
• 【NodeJS 學習筆記04】新聞發佈系統
• 過年7天樂，學nodejs 也快樂
• 七天學會NodeJS
• Nodejs學習筆記（二）— 事件模塊
• nodejs入門
• angularjs nodejs
• 從零開始nodejs系列文章
• 理解nodejs
• nodejs事件輪詢
• node入門
• nodejs cms
• Node初學者入門，一本全面的NodeJS教程
• NodeJS的代碼調試和性能調優

JS Template

• template-chooser
• artTemplate
• tomdjs
• 淘寶模板juicer模板
• Fxtpl v1.0 繁星前端模板引擎
• laytpl
• mozilla - nunjucks
• Juicer
• dustjs
• etpl

移動端

• fastclick
• no-click-delay
• 【敏捷開發】Android團隊開發規範
• Android 開發規範與應用
• ionic

移動端 API

• 99移動端知識集合
• 移動端前端開發知識庫
• 移動前端的一些坑和解決方法（外觀表現）
• 【原】移動web資源整理
• zepto 1.0 中文手冊
• zepto 1.0 中文手冊
• zepto 1.1.2
• zepto 中文註釋
• jqmobile 手冊
• 移動瀏覽器開發集合
• 移動開發大雜燴

綜合 API

• javascripting
• 各類流行庫搜索
• runoob.com-包含各類API集合
• 開源中國在線API文檔合集
• devdocs(英文綜合API網站)

其餘 API

• HTTP API 設計指南
• javascript流行庫彙總
• 驗證api
• underscore 中文手冊
• underscore源碼分析
• underscore源碼分析-亞里士朱德的博客
• underscrejs en api
• lodash - underscore的代替品
• ext4api
• qwrap手冊
• 緩動函數
• svg 中文參考
• svg mdn參考
• svg 導出 canvas
• svg 導出 png
• ai-to-svg
• localStorage 庫

服務器端

• Nodejs
• Node入門
• 7天學會NodeJS
• MongoDB
• NodeJS與MongoDB交互

技能圖譜

• StuQ技能圖譜
• Frontend Knowledge Structure

在線資源

• 大前端導航
• Frontend Stuff
• Frontend directory
• Frontend Interview Questions

在線書籍

• Front-end Developer HandBook
• Front-end Database
• Frontend Notebook

推薦書目

• 基礎
• 深刻淺出HTML與CSS、XHTML
• HTML & CSS設計與構建網站
• Pro Git中文版
• 鳥哥的linux私房菜
• 中級
• Head First HTML5 Programming
• JavaScript權威指南
• JavaScript語言精粹
• JavaScript & jQuery交互式Web前端開發
• 深刻淺出Ajax
• 高級
• JavaScript高級程序設計
• HTML5高級程序設計
• CSS權威指南
• 深刻淺出Node.js

開發工具

設計軟件

前端工程師最首要的任務就是把設計師的設計圖切好並翻譯成代碼，因此咱們要學習一些設計軟件的基礎操做和切圖方法。

• Photoshop 運用最普遍的設計軟件，大部分人都在用它，頗有必要學習一下
• 前端工程師必備的PS技能——切圖篇
• Sketch 輕量且功能強大，切圖迅速高效，爲UI設計而生的Mac App
• Sketch切圖教程

編輯器

工欲善其事，必先利其器。能夠用的編輯器和IDE有不少，在這裏我只推薦最棒的兩個。

• Sublime text 最性感的編輯器，搭配插件各類好用
• 配置和使用方法
• Webstorm 功能強大，學生能夠免費用的前端開發IDE

代碼管理

不光要學會寫代碼，也要學會管理你的代碼。在工做中你可能會遇到須要本身部署代碼的狀況；不停地修改迭代重構，固然也須要你掌握版本控制軟件。

• Linux 你須要學會在命令行打開移動複製文件等最基本的操做
• Linux最經常使用的20條命令
• 鳥哥的linux私房菜——基礎篇
• Git 寫代碼必定會用到的版本控制軟件，入門很快就能學會
• 猴子都能懂的Git入門

測試工具

預覽和調試必不可少，編寫前端代碼的大部分時間都是在編輯器和瀏覽器之間切來切去。

• Chrome Dev Tools 谷歌瀏覽器開發工具，想要預覽調試你的前端頁面必須在這裏啦

最後

說個題外話，我在一線互聯網企業工做十餘年裏，指導過很多同行後輩。幫助不少人獲得了學習和成長。

我意識到有不少經驗和知識值得分享給你們，也能夠經過咱們的能力和經驗解答你們在IT學習中的不少困惑，因此在工做繁忙的狀況下仍是堅持各類整理和分享。

我能夠將最近整理的前端面試題免費分享出來，其中包含HTML、CSS、JavaScript、服務端與網絡、Vue、瀏覽器等等，還在持續整理更新中，但願你們都能找到心儀的工做。

有須要的朋友點擊這裏免費領取題目+解析PDF。

點擊這裏免費領取題目+解析PDF。