2016最新前端學習計劃

溫柔狠角色發表於2016-11-08
前端

 

 

 


一、前端學習路線圖

 



二、前端學習路線圖——視訊篇


六大

 

階段

學完後目標

知識點

視訊資源(附筆記+PPT+模板

 

+原始碼)

密碼

準備篇

學習週期：15天


學完後目標：

1、熟悉媒體查詢和響應式設計，使得設計有適配不同的移動;

2、熟悉基礎CSS的格式和CSS盒模式;

3、理解網頁間是如何連結的、如何設計多列布局，可以處理表單欄位和媒體元素;

4、理解如何建立和瀏覽一個基本的網頁。


市場價值：

熟練掌握之後，可以滿足市場靜態頁面佈局，但是市場就業工資相對較低，還需繼續往下學習。

開發工具的安裝配置的介紹

sublime、webstorm、Visual Studio Code

正在玩命更新中

HTML

理解如何瀏覽和建立網頁、基本的語法規範、常用標籤及屬性、網頁之間的連結與跳轉、標籤節點層級節點

《前端輕鬆入門： HTML超強視訊分享》

《前端輕鬆入門： HTML筆記+PPT+原始碼》

pt2p
bya5

CSS

基本語法和三種書寫位置、選擇器和格式化排版、盒模型的高階用法、常用佈局模型  

《前端輕鬆入門：CSS超強視訊分享》

《前端輕鬆入門：CSS筆記+PPT+原始碼》

《CSS梅蘭商城專案實戰視訊教程 傳智出品，無償分享！》

《CSS梅蘭商城專案實戰視訊教程—配套資源》

ha3i
u7k1
isx8
6scx

JavaScript入門

基礎語法和變數、資料型別和資料型別轉換、條件判斷、迴圈語句、函式、陣列等內建物件

《快速入門JavaScript 三天視訊教程分享》  

《快速入門JavaScript教程配套筆記+原始碼+PPT》

t4bw
3w93

京東首頁實戰

 CSS程式碼抽象與複用、 浮動的盒子佈局、padding 和 margin 使用、層級的使用、定位特性的各種使用場景

正在玩命更新中


基礎篇

學習週期：20天


學完後目標：

1、能夠基於jQuery實現炫酷效果和複雜的功能模組；

2、能創造或新增自定義效果到網頁上；

3、能熟練新增標準的動畫效果到網頁上；

4、熟練操作DOM模型。


市場價值：8-13K

JavaScript基礎

JS語言的基本構成、變數、資料型別、表示式、選擇結構、迴圈結構、短路語句、函式基礎

《五天Javascript基礎加強視訊分享！》

《【前端】Javascript基礎加強配套筆記+原始碼+PPT》

98ef
p23z

DOM + BOM

DOM基本結構、節點物件的操作、事件特性及使用、常見的內建DOM物件、常見的BOM功能

正在玩命更新中


網頁特效與進階

在網頁特效中常用的程式設計介面、動畫程式設計、事件物件和冒泡、緩動框架封裝和旋轉木馬案例、正規表示式及應用

正在玩命更新中


Jquery

選擇器、基本操作API、動畫API、事件API、外掛機制、原理分析、專案實戰

正在玩命更新中


核心篇

學習週期：20天


學完後目標：

1、能夠基於jQueryMobile/Zepto等框架進行移動端js功能開發；

2、能夠熟練使用html5/css3/ canvas進行移動端頁面和功能效果開發，並且能夠基於原生和框架進行響應式效果開發；

3、能夠基於jQuery、bootstrap等框架實現炫酷效果和複雜的功能模組；

4、能夠獨立製作電商類，企業類網站，以及常見js動態效果。


市場價值：13K-18K

HTML5 + CSS3

語義化結構、多媒體 、本地儲存、其他常見API、CSS3 選擇器、CSS3 邊框、背景、陰影、CSS3 過渡和動畫、CSS3 伸縮佈局、Canvas

《2016年最新H5+CSS3教程視訊》 

v53j

服務端程式設計

端的概念、Web 伺服器的概念、伺服器搭建、XML與JSON 

正在玩命更新中

PHP

PHP基礎語法 、PHP服務端程式設計基礎

正在玩命更新中

AJAX

基本程式設計介面、非同步資料互動、模板引擎的使用、跨域的實現方案、增量載入

《2016年最新AJAX教程》

hj8n

移動Web開發

響應式佈局、Bootstrap框架深度使用、Zepto.js庫、預編譯CSS

《傳智前端就業班視訊分享：移動web開發課程》

《移動web開發課程原始碼+筆記+PPT》

n6mi

eq37

進階篇

學習週期：15天


學完後目標：

1、熟練使用閉包、高階函式、立即執行函式(匿名函式)等；

2、熟練使用超程式設計，解決Callback等；

3、熟悉JavaScript基本語法。


市場價值：18-22K

物件導向在JS中的體現與實踐

物件導向理論、物件的基本概念、物件的屬性和方法、通過字面量建立物件

《javaScript高階物件導向-傳智前端就業班視訊免費分享 》

《javaScript高階物件導向配套原始碼+筆記+PPT》

nwu6
8x2y

開發過程中常用的模式與思想

開閉原則、MVC思想、高內聚低耦合、工廠模式

正在玩命更新中

JavaScript高階特性

通過建構函式建立物件、原型物件、繼承的多種實現方式、原型鏈、函式的本質以及 Function 建構函式、作用域鏈、閉包、沙箱模式

正在玩命更新中

封裝一個自己框架

選擇器框架、CSS操作封裝、屬性操作封裝、其他DOM操作的封裝、事件框架的封裝


《傳智前端就業班視訊分享：JavaScript 高階框架設計》

《JavaScript 高階框架課程配套筆記+PPT+原始碼》


kcv9
8ega

高階篇

學習週期：20天


學完後目標：

1、瞭解主流的後臺技術和前後端協作方式，從全域性角度理解專案的整個生命週期；

2、熟悉nodejs的全棧式解決方案；

3、從前端的全域性角度認識相關的框架；

4、熟練使用VueJS，AngularJS等框架完成複雜的前端功能，熟悉前端工作流。


市場價值：22K+

前端工作流

自動化流程工具使用、原始碼版本控制工具使用、依賴項管理工具、專案模板腳手架

正在玩命更新中

流行框架

Angular基本使用、Angular高階特性、VueJS基本入門和路由、專案實戰：豆瓣電影

正在玩命更新中

模組化開發

模組化開發規範、常用的模組化開發工具、RequireJS、AMD/CMD、統一規範UMD、SeaJS

正在玩命更新中

NodeJS

Node介紹、基本操作、常用內建模組、高階特性、常用框架

正在玩命更新中

移動

APP 

開發

學習週期：8天


學完後目標：

1、深刻理解移動App的開發模式和技術選型；

2、熟練使用各種模式開發移動應用；

3、瞭解微信企業公共號開發。

市場價值：22K+

混合式應用開發

混合式平臺架構、混合式開發實踐、京東APP端實戰

正在玩命更新中

微信開發

微信公共號介紹、平臺API對接、X5相容處理、內建介面

正在玩命更新中

React

元件化思想、基本使用、核心特性、JSX、TODOMVC案例




正在玩命更新中

React Native

環境與工具、實現思路、常用元件、常用外掛、綜合案例：豆瓣電影

正在玩命更新中

移動其他APP開發框架

PhoneGap、AppCan、HTML5+、Framework7

正在玩命更新中 


三、前端學習路線圖——工具篇

 

 

前端

 

流行

 

框架

angularangular-1.5.8離線文件http://pan.baidu.com/s/1pLVilLp rrbv
angular.js 線上中文文件：http://www.angularjsapi.cn/無
angular.js官方文件https://angular.io/docs/ts/latest/無
reactreact-15.3.1離線文件http://pan.baidu.com/s/1kUKkMTh 2vmp
React 線上文件 http://reactjs.cn/react/docs/getting-started-zh-CN.html無
ionicionic-1.x離線文件：http://pan.baidu.com/s/1nuFxaWT3jbd
ionic 線上文件 http://www.ionic.wang/js_doc-index.html無
node.jsnode.js 官方線上文件 https://nodejs.org/dist/latest-v6.x/docs/api/無
BootstrapBootstrap線上文件 http://www.bootcss.com/無
vuevue離線文件：http://pan.baidu.com/s/1c2LvllQ xp7e
vue.js 線上文件 http://cn.vuejs.org/guide/無
以上資源合併下載https://pan.baidu.com/s/1pLfbxnP i4mr

前端

 

開發

 

工具

CSS處理工具less 官方文件http://lesscss.cn/#download-options無
sass 官方文件 http://www.w3cplus.com/sassguide/無
構建工具GRUNT 官方文件http://www.gruntjs.net/getting-started無
Gulp  官方文件http://www.gulpjs.com.cn/docs/getting-started/無
字型庫iconfonthttp://www.iconfont.cn/無
fontawesome離線文件http://pan.baidu.com/s/1slTcqFbb3im
fontawesome線上文件

http://fontawesome.io/

無
程式碼編輯工具WebStorm 前端開發神器下載http://pan.baidu.com/s/1dEATsWhhjak
Sublime Text 下載+全套快捷鍵http://pan.baidu.com/s/1eSjxmTk2yka
常用編輯器Editplus下載http://pan.baidu.com/s/1dFidrpRgrnq
編碼必備：Adobe Dreamweaver CC下載   http://pan.baidu.com/s/1nvLIBbFz637
編輯利器：Atom下載https://pan.baidu.com/s/1i46H2dBs5ft
免費編輯器Brackets下載https://pan.baidu.com/s/1bYGa1g4152
編寫程式碼利器：Notepad++下載https://pan.baidu.com/s/1bp9lMyV83yy
其它工具YII框架軟體下載http://pan.baidu.com/s/1i5Ezk5vvnef
資料庫客戶端軟體navicat下載http://pan.baidu.com/s/1hr91pqcmnny
整合環境軟體WampServer下載http://pan.baidu.com/s/1i5uMxvfpkkc 
抓包工具Httpwatch下載https://pan.baidu.com/s/1skFo7spkph4
檔案及目錄對比神器Beyond Compare下載http://pan.baidu.com/s/1eS5bViici6t
nodejshttp://pan.baidu.com/s/1c2olq84cfn9
以上資源合併下載https://pan.baidu.com/s/1i518nvJm4gt

前端

 

手冊

HTML5html5參考手冊 api 下載https://pan.baidu.com/s/1jIQ8yBcee3z
CSSCSS2.0中文參考手冊 api 下載

https://pan.baidu.com/s/1dEJbf8X

u23n
CSS3.0中文參考手冊 api 下載https://pan.baidu.com/s/1bLPc7Ohxa3
css3.4 API 中文樣式表手冊下載https://pan.baidu.com/s/1jI8r3L099ar
CSS4.0中文參考手冊 api 下載https://pan.baidu.com/s/1dFsmGUXxs2y
JavaScriptJavaScript參考手冊http://pan.baidu.com/s/1jIqaPVK4ivy
javascript權威指南http://pan.baidu.com/s/1gfx867h66e7
JavaScript中文教程http://pan.baidu.com/s/1jHD1pIm2fth
JavaScript中文手冊api下載https://pan.baidu.com/s/1eSeD0cyrmhq
jQueryjQuery1.11.0_中文http://pan.baidu.com/s/1qXQMlU873rf
jQuery api 1.8 中文（離線）版下載https://pan.baidu.com/s/1c1WAaYWi2fm
BootstrapBootstrap中文api參考手冊https://pan.baidu.com/s/1cn9hsM6sd3
Bootstrap-v3.3.5中文apihttp://pan.baidu.com/s/1jHKmPOas5hv
Bootstrap3.2.0中文文件http://pan.baidu.com/s/1c155VpQigxj
其它手冊Zepto中文api參考手冊https://pan.baidu.com/s/1dFOGHqDzsic
AngularJS中文api離線參考手冊https://pan.baidu.com/s/1i5oaLYtgd57
MYSQL手冊https://pan.baidu.com/s/1boFHhwz7d1k
DOM手冊https://pan.baidu.com/s/1qXDUHm05s8p
w3school api文件下載 https://pan.baidu.com/s/1miuau16qvqi
seajs離線文件http://pan.baidu.com/s/1hrB31liaqzn
以上資源合併下載https://pan.baidu.com/s/1nuJ0Ivfhrxv

前端

 

外掛

Canvas圖表外掛

echartshttp://echarts.baidu.com/index.html無

模板

 

引擎

underscorejs underscorejs官方文件 http://underscorejs.org/無
underscorejs中文文件 http://www.css88.com/doc/underscore/
artTemplate artTemplate離線文件https://pan.baidu.com/s/1qXHsMGObaer
artTemplate官方文件 https://github.com/aui/artTemplate
以上資源合併下載https://pan.baidu.com/s/1dEErv1Jc865



四、前端學習路線圖——經驗篇

 

 

前端技術

 

文章

 

（新人篇）

從零基礎到精通的前端學習路線http://bbs.itheima.com/thread-318332-1-1.html無
為什麼整個網際網路行業都缺前端工程師？http://bbs.itheima.com/thread-329957-1-1.html無
如何成為一名優秀的前端工程師http://bbs.itheima.com/thread-329959-1-1.html無
前端開發需要學什麼？http://bbs.itheima.com/thread-329958-1-1.html無
高效的前端程式設計入門訓練方法http://bbs.itheima.com/thread-324088-1-1.html無
寫給剛入門的前端工程師的前後端互動指南http://bbs.itheima.com/thread-330979-1-1.html無
寫給前端新人：前端開發必會的二十五個知識點http://bbs.itheima.com/thread-329964-1-1.html無
【乾貨】最全面的前端開發指南：HTML、CSShttp://bbs.itheima.com/thread-330971-1-1.html無
【乾貨】最全面的前端開發指南：JavaScript http://bbs.itheima.com/thread-330976-1-1.html無
HTML5新手入門指南http://bbs.itheima.com/thread-330655-1-1.html無
HTML5 如何重新定義webhttp://bbs.itheima.com/thread-330656-1-1.html無
HTML5標籤使用的常見誤區http://bbs.itheima.com/thread-330652-1-1.html無
20 個重要的 HTML5 面試題及答案http://bbs.itheima.com/thread-330969-1-1.html無
css工作中常用的效果總結http://bbs.itheima.com/thread-330963-1-1.html無
CSS編碼規範http://bbs.itheima.com/thread-330644-1-1.html無
20個很有用的CSS技巧http://bbs.itheima.com/thread-330983-1-1.html無
流行的CSS思想之——淺析OOCSS必須看這個貼 http://bbs.itheima.com/thread-329965-1-1.html無
41個Web開發者必須收藏的JavaScript實用技巧http://bbs.itheima.com/thread-330982-1-1.html無
10+ 實用的 JavaScript 除錯小技巧http://bbs.itheima.com/thread-330977-1-1.html無
新人拒繞暈： JS中toFixed四捨五入的坑http://bbs.itheima.com/thread-329961-1-1.html無
流行的CSS思想之——淺析OOCSS必須看這個貼 http://bbs.itheima.com/thread-329965-1-1.html無
8種CSS樣式使用技巧http://bbs.itheima.com/thread-332570-1-1.html無
如何寫出小而清晰的函式http://bbs.itheima.com/thread-332579-1-1.html無
Web前端有哪些職位？http://bbs.itheima.com/thread-332574-1-1.html無
CSS消失的邊界問題http://bbs.itheima.com/thread-332606-1-1.html無
網頁前端學習總結（一）http://bbs.itheima.com/thread-332609-1-1.html無
網頁前端學習總結（二）http://bbs.itheima.com/thread-332612-1-1.html無
以上資源合併下載http://pan.baidu.com/s/1slcVfvJgjqg

前端技術

 

文章

 

（經驗篇）

【前端技術分享】Web前端效能優化的9大問題http://bbs.itheima.com/thread-329968-1-1.html無
JavaScript學習筆記之判斷語句的使用http://bbs.itheima.com/thread-329969-1-1.html無
Nodejs --- 丟掉flash，相容IE789的進度http://bbs.itheima.com/thread-329970-1-1.html無
如何實現點對點隨機匹配聊天http://bbs.itheima.com/thread-329972-1-1.html無
一看就懂的ReactJs入門教程http://bbs.itheima.com/thread-329973-1-1.html無
談一談迴圈的效能提升http://bbs.itheima.com/thread-329975-1-1.html無
超強的JS總結（一）http://bbs.itheima.com/thread-329984-1-1.html無
zepto和jquery的區別，zepto的不同使用小結http://bbs.itheima.com/thread-330314-1-1.html無
CSS3圖片倒影技術http://bbs.itheima.com/thread-330315-1-1.html無
HTML5標籤使用的常見誤區http://bbs.itheima.com/thread-330316-1-1.html無
JavaScript中的資料型別判斷http://bbs.itheima.com/thread-330495-1-1.html無
web前端35個jQuery小技巧！http://bbs.itheima.com/thread-330632-1-1.html無
前端效能之----減少DNS查詢次數http://bbs.itheima.com/thread-330913-1-1.html無
vue中引入swiper關鍵問題解決http://bbs.itheima.com/thread-330915-1-1.html無
理解ionic2 + angular2開發方案http://bbs.itheima.com/thread-330931-1-1.html無
Ajax同步與非同步優缺點與使用http://bbs.itheima.com/thread-330938-1-1.html無
Bootstrap滾動監控器的設計http://bbs.itheima.com/thread-330645-1-1.html無
JS家的十大經典排序演算法（上）http://bbs.itheima.com/thread-331275-1-1.html無
JS家的十大經典排序演算法（下）http://bbs.itheima.com/thread-331290-1-1.html無
詳解JavaScript儲存http://bbs.itheima.com/thread-332646-1-1.html無
有趣的CSS題目（2）： 從條紋邊框的實現談盒子模型

http://bbs.itheima.com/thread-332647-1-1.html

無
以上資源合併下載http://pan.baidu.com/s/1slpMuBze56b



五、前端學習路線圖——面試篇

 

 

前端面試

寶典

技術篇大牛教你如何寫出優秀的前端工程師簡歷http://bbs.itheima.com/thread-318331-1-1.html 無
近期整理前端面試題，供大家參考http://bbs.itheima.com/thread-330105-1-1.html無
前端開發工程師面試題http://bbs.itheima.com/thread-330106-1-1.html無
百度2016校招筆試題（含答案、解析）http://bbs.itheima.com/thread-330107-1-1.html無
前端面試常見問答http://bbs.itheima.com/thread-330633-1-1.html無
超實用的前端面試題http://bbs.itheima.com/thread-330627-1-1.html無
薪資篇面試官如何評判應聘者的工資

http://bbs.itheima.com/thread-330108-1-1.html

無
當HR問“你對薪資有什麼要求”時怎麼回答
HR指責要薪太高怎麼辦？
自我介紹篇如何進行自我介紹？ 

http://bbs.itheima.com/thread-330109-1-1.html

無
“你有什麼優劣勢？”
“你為什麼選擇我們公司？”
專案篇如何介紹簡歷中的專案？http://bbs.itheima.com/thread-330110-1-1.html無
HR貶低專案時你該怎麼辦“
專案經驗少該怎麼辦？
學歷年齡篇你學歷低，為什麼要錄用你？http://bbs.itheima.com/thread-330111-1-1.html無
你是不是年齡太大了？
你太小了，你能承擔專案嗎？
規劃篇你準備在我們這家單位做多久？http://bbs.itheima.com/thread-330112-1-1.html無
未來五年的規劃是怎樣的？
以上資源合併下載    

https://pan.baidu.com/s/1geXjXvl

byn6


前端小白到大牛的華麗變身，學上面的資源就足夠了！

 


相關文章