前端很火隔节，想自學(xué)前端的人也多。作為過來人寂呛，知道自學(xué)的辛苦怎诫。所以小編精心制作這份學(xué)習(xí)路線圖，就是讓想自學(xué)前端的小伙伴們有一份系統(tǒng)專業(yè)的學(xué)習(xí)資源和學(xué)習(xí)指導(dǎo)贷痪。
此學(xué)習(xí)路線圖幻妓，歷經(jīng)兩個(gè)月的時(shí)間，無論你是剛?cè)腴T的小白劫拢，還是已經(jīng)工作的前端開發(fā)者肉津，都是必備的學(xué)習(xí)寶典！
在這里我還是要推薦下我自己建的web前端開發(fā)學(xué)習(xí)群：731669587舱沧，群里都是學(xué)web前端開發(fā)的妹沙，如果你正在學(xué)習(xí)前端 ，小編歡迎你加入熟吏，今天分享的這個(gè)案例已經(jīng)上傳到群文件距糖，大家都是軟件開發(fā)黨玄窝，不定期分享干貨（只有前端軟件開發(fā)相關(guān)的），包括我自己整理的一份2018最新的前端進(jìn)階資料和高級(jí)開發(fā)教程悍引，歡迎進(jìn)階中和進(jìn)想深入前端的小伙伴恩脂。
一、前端學(xué)習(xí)路線圖—流程篇
前端學(xué)習(xí)路線圖
二趣斤、前端學(xué)習(xí)路線圖—視頻教程篇：
前端視頻篇第一階段-準(zhǔn)備篇
本階段前端課程共計(jì)5個(gè)知識(shí)點(diǎn)俩块，小編為大家準(zhǔn)備了5個(gè)學(xué)習(xí)教程
1、周期與目標(biāo)
這一階段的學(xué)習(xí)需要15天的時(shí)間
2唬渗、學(xué)完后目標(biāo)
熟悉媒體查詢和響應(yīng)式設(shè)計(jì)，使得設(shè)計(jì)有適配不同的移動(dòng);
熟悉基礎(chǔ)CSS的格式和CSS盒模式;
理解網(wǎng)頁間是如何鏈接的奋渔、如何設(shè)計(jì)多列布局镊逝，可以處理表單字段和媒體元素;
理解如何創(chuàng)建和瀏覽一個(gè)基本的網(wǎng)頁。
3嫉鲸、知識(shí)點(diǎn):
1）開發(fā)工具的安裝配置的介紹
sublime撑蒜、webstorm、Visual Studio Code
2）HTML
理解如何瀏覽和創(chuàng)建網(wǎng)頁玄渗、基本的語法規(guī)范座菠、常用標(biāo)簽及屬性、網(wǎng)頁之間的鏈接與跳轉(zhuǎn)藤树、標(biāo)簽節(jié)點(diǎn)層級(jí)節(jié)點(diǎn)
3）CSS
基本語法和三種書寫位置浴滴、選擇器和格式化排版、盒模型的高級(jí)用法岁钓、常用布局模型
4）JavaScript入門
基礎(chǔ)語法和變量升略、數(shù)據(jù)類型和數(shù)據(jù)類型轉(zhuǎn)換、條件判斷屡限、循環(huán)語句品嚣、函數(shù)、數(shù)組等內(nèi)置對(duì)象
5）京東首頁實(shí)戰(zhàn)
CSS代碼抽象與復(fù)用钧大、 浮動(dòng)的盒子布局翰撑、padding 和 margin 使用、層級(jí)的使用啊央、定位特性的各種使用場(chǎng)景
4眶诈、小編整理的視頻教程如下
《前端與移動(dòng)開發(fā)基礎(chǔ)》?
《CSS梅蘭商城項(xiàng)目實(shí)戰(zhàn)視頻教程》
《JavaScript基礎(chǔ)視頻教程》
二、前端視頻篇第二階段-基礎(chǔ)篇
本階段前端課程共計(jì)4個(gè)知識(shí)點(diǎn)瓜饥，共計(jì)1個(gè)免費(fèi)配套視頻涵蓋
1册养、周期與目標(biāo)：
學(xué)習(xí)周期：20天
2、學(xué)完后目標(biāo)：
能夠基于jQuery實(shí)現(xiàn)炫酷效果和復(fù)雜的功能模塊压固；
能創(chuàng)造或添加自定義效果到網(wǎng)頁上球拦；
能熟練添加標(biāo)準(zhǔn)的動(dòng)畫效果到網(wǎng)頁上；
熟練操作DOM模型。
3坎炼、知識(shí)點(diǎn)：
JavaScript基礎(chǔ)
JS語言的基本構(gòu)成愧膀、變量、數(shù)據(jù)類型谣光、表達(dá)式檩淋、選擇結(jié)構(gòu)、循環(huán)結(jié)構(gòu)萄金、短路語句蟀悦、函數(shù)基礎(chǔ)
DOM + BOM
DOM基本結(jié)構(gòu)、節(jié)點(diǎn)對(duì)象的操作氧敢、事件特性及使用日戈、常見的內(nèi)置DOM對(duì)象、常見的BOM功能
網(wǎng)頁特效與進(jìn)階
在網(wǎng)頁特效中常用的編程接口孙乖、動(dòng)畫編程浙炼、事件對(duì)象和冒泡、緩動(dòng)框架封裝和旋轉(zhuǎn)木馬案例唯袄、正則表達(dá)式及應(yīng)用
Jquery
選擇器弯屈、基本操作API、動(dòng)畫API恋拷、事件API资厉、插件機(jī)制、原理分析蔬顾、項(xiàng)目實(shí)戰(zhàn)
4酌住、小編整理的視頻教程如下
《JavaScript 基礎(chǔ)加強(qiáng) 》
三、前端視頻篇第三階段——核心篇
本階段前端課程共計(jì)5個(gè)知識(shí)點(diǎn)阎抒，合計(jì)3個(gè)免費(fèi)視頻涵蓋
1酪我、周期與目標(biāo)：
學(xué)習(xí)周期：20天
2、學(xué)完后目標(biāo)：
能夠基于jQueryMobile/Zepto等框架進(jìn)行移動(dòng)端js功能開發(fā)且叁；
能夠熟練使用html5/css3/ canvas進(jìn)行移動(dòng)端頁面和功能效果開發(fā)都哭，并且能夠基于原生和框架進(jìn)行響應(yīng)式效果開發(fā)；
能夠基于jQuery逞带、bootstrap等框架實(shí)現(xiàn)炫酷效果和復(fù)雜的功能模塊欺矫；
能夠獨(dú)立制作電商類，企業(yè)類網(wǎng)站展氓，以及常見js動(dòng)態(tài)效果穆趴。
3、知識(shí)點(diǎn)：
HTML5 + CSS3
語義化結(jié)構(gòu)遇汞、多媒體 未妹、本地存儲(chǔ)簿废、其他常見API、CSS3 選擇器络它、CSS3 邊框族檬、背景、陰影化戳、CSS3 過渡和動(dòng)畫单料、CSS3 伸縮布局、Canvas
服務(wù)端編程
端的概念点楼、Web 服務(wù)器的概念扫尖、服務(wù)器搭建、XML與JSON
PHP
PHP基礎(chǔ)語法 掠廓、PHP服務(wù)端編程基礎(chǔ)
AJAX
基本編程接口换怖、異步數(shù)據(jù)交互、模板引擎的使用却盘、跨域的實(shí)現(xiàn)方案狰域、增量加載
移動(dòng)Web開發(fā)
響應(yīng)式布局媳拴、Bootstrap框架深度使用黄橘、Zepto.js庫、預(yù)編譯CSS
4屈溉、小編整理的視頻教程如下
《最新H5+CSS3教程視頻》 《最新AJAX教程》《傳智前端就業(yè)班視頻分享：移動(dòng)web開發(fā)課程 》
四塞关、前端視頻篇第四階段——進(jìn)階篇
本階段前端課程共計(jì)4個(gè)知識(shí)點(diǎn)，合計(jì)2個(gè)免費(fèi)視頻涵蓋
1子巾、周期與目標(biāo)：
學(xué)習(xí)周期：15天
2帆赢、學(xué)完后目標(biāo)：
熟練使用閉包、高級(jí)函數(shù)线梗、立即執(zhí)行函數(shù)(匿名函數(shù))等椰于；
熟練使用元編程，解決Callback等仪搔；
熟悉JavaScript基本語法瘾婿。
3、知識(shí)點(diǎn)：
面向?qū)ο笤贘S中的體現(xiàn)與實(shí)踐
面向?qū)ο罄碚摽具帧?duì)象的基本概念偏陪、對(duì)象的屬性和方法、通過字面量創(chuàng)建對(duì)象
2）開發(fā)過程中常用的模式與思想
開閉原則煮嫌、MVC思想笛谦、高內(nèi)聚低耦合、工廠模式
3）JavaScript高級(jí)特性
通過構(gòu)造函數(shù)創(chuàng)建對(duì)象昌阿、原型對(duì)象饥脑、繼承的多種實(shí)現(xiàn)方式恳邀、原型鏈、函數(shù)的本質(zhì)以及 Function 構(gòu)造函數(shù)好啰、作用域鏈轩娶、閉包、沙箱模式
4）封裝一個(gè)自己框架
選擇器框架框往、CSS操作封裝鳄抒、屬性操作封裝、其他DOM操作的封裝椰弊、事件框架的封裝
4许溅、小編整理的視頻教程如下：
《JavaScript-高級(jí)面向?qū)ο笠曨l教程》《JavaScript高級(jí)框架設(shè)計(jì)》
想獲得教程，都可以私信小編哦秉版！
