前端很火，想自學(xué)前端的人也多椎木。作為過來人违柏，知道自學(xué)的辛苦。所以小編精心制作這份學(xué)習(xí)路線圖香椎，就是讓想自學(xué)前端的小伙伴們有一份系統(tǒng)專業(yè)的學(xué)習(xí)資源和學(xué)習(xí)指導(dǎo)漱竖。
此學(xué)習(xí)路線圖，歷經(jīng)兩個月的時間士鸥，無論你是剛?cè)腴T的小白闲孤，還是已經(jīng)工作的前端開發(fā)者，都是必備的學(xué)習(xí)寶典！
一讼积、前端學(xué)習(xí)路線圖—流程篇
前端學(xué)習(xí)路線圖
二肥照、前端學(xué)習(xí)路線圖—視頻教程篇：
前端視頻篇第一階段-準備篇
本階段前端課程共計5個知識點，小編為大家準備了5個學(xué)習(xí)教程
1勤众、周期與目標
這一階段的學(xué)習(xí)需要15天的時間
2舆绎、學(xué)完后目標
熟悉媒體查詢和響應(yīng)式設(shè)計，使得設(shè)計有適配不同的移動;
熟悉基礎(chǔ)CSS的格式和CSS盒模式;
理解網(wǎng)頁間是如何鏈接的们颜、如何設(shè)計多列布局吕朵，可以處理表單字段和媒體元素;
理解如何創(chuàng)建和瀏覽一個基本的網(wǎng)頁。
3窥突、知識點:
1）開發(fā)工具的安裝配置的介紹
sublime努溃、webstorm、Visual Studio Code
2）HTML
理解如何瀏覽和創(chuàng)建網(wǎng)頁阻问、基本的語法規(guī)范梧税、常用標簽及屬性、網(wǎng)頁之間的鏈接與跳轉(zhuǎn)称近、標簽節(jié)點層級節(jié)點
3）CSS
基本語法和三種書寫位置第队、選擇器和格式化排版、盒模型的高級用法刨秆、常用布局模型
4）JavaScript入門
基礎(chǔ)語法和變量凳谦、數(shù)據(jù)類型和數(shù)據(jù)類型轉(zhuǎn)換、條件判斷衡未、循環(huán)語句尸执、函數(shù)、數(shù)組等內(nèi)置對象
5）京東首頁實戰(zhàn)
CSS代碼抽象與復(fù)用眠屎、 浮動的盒子布局剔交、padding 和 margin 使用、層級的使用改衩、定位特性的各種使用場景
4岖常、小編整理的視頻教程如下
《前端與移動開發(fā)基礎(chǔ)》
《CSS梅蘭商城項目實戰(zhàn)視頻教程》
《JavaScript基礎(chǔ)視頻教程》
二、前端視頻篇第二階段-基礎(chǔ)篇
本階段前端課程共計4個知識點葫督，共計1個免費配套視頻涵蓋
1竭鞍、周期與目標：
學(xué)習(xí)周期：20天
2、學(xué)完后目標：
能夠基于jQuery實現(xiàn)炫酷效果和復(fù)雜的功能模塊橄镜；
能創(chuàng)造或添加自定義效果到網(wǎng)頁上偎快；
能熟練添加標準的動畫效果到網(wǎng)頁上；
熟練操作DOM模型洽胶。
3晒夹、知識點：
JavaScript基礎(chǔ)
JS語言的基本構(gòu)成、變量、數(shù)據(jù)類型丐怯、表達式喷好、選擇結(jié)構(gòu)、循環(huán)結(jié)構(gòu)读跷、短路語句梗搅、函數(shù)基礎(chǔ)
DOM + BOM
DOM基本結(jié)構(gòu)、節(jié)點對象的操作效览、事件特性及使用无切、常見的內(nèi)置DOM對象、常見的BOM功能
網(wǎng)頁特效與進階
在網(wǎng)頁特效中常用的編程接口丐枉、動畫編程哆键、事件對象和冒泡、緩動框架封裝和旋轉(zhuǎn)木馬案例瘦锹、正則表達式及應(yīng)用
Jquery
選擇器洼哎、基本操作API、動畫API沼本、事件API、插件機制锭沟、原理分析抽兆、項目實戰(zhàn)
4、小編整理的視頻教程如下
《JavaScript 基礎(chǔ)加強 》
三族淮、前端視頻篇第三階段——核心篇
本階段前端課程共計5個知識點辫红，合計3個免費視頻涵蓋
1、周期與目標：
學(xué)習(xí)周期：20天
2祝辣、學(xué)完后目標：
能夠基于jQueryMobile/Zepto等框架進行移動端js功能開發(fā)贴妻；
能夠熟練使用html5/css3/ canvas進行移動端頁面和功能效果開發(fā)蝙斜，并且能夠基于原生和框架進行響應(yīng)式效果開發(fā)名惩；
能夠基于jQuery、bootstrap等框架實現(xiàn)炫酷效果和復(fù)雜的功能模塊孕荠；
能夠獨立制作電商類锈嫩，企業(yè)類網(wǎng)站，以及常見js動態(tài)效果。
3呼寸、知識點：
HTML5 + CSS3
語義化結(jié)構(gòu)艳汽、多媒體 、本地存儲等舔、其他常見API骚灸、CSS3 選擇器、CSS3 邊框慌植、背景甚牲、陰影、CSS3 過渡和動畫蝶柿、CSS3 伸縮布局丈钙、Canvas
服務(wù)端編程
端的概念、Web 服務(wù)器的概念交汤、服務(wù)器搭建雏赦、XML與JSON
PHP
PHP基礎(chǔ)語法 、PHP服務(wù)端編程基礎(chǔ)
AJAX
基本編程接口芙扎、異步數(shù)據(jù)交互星岗、模板引擎的使用、跨域的實現(xiàn)方案戒洼、增量加載
移動Web開發(fā)
響應(yīng)式布局俏橘、Bootstrap框架深度使用、Zepto.js庫圈浇、預(yù)編譯CSS
4寥掐、小編整理的視頻教程如下
《最新H5+CSS3教程視頻》 《最新AJAX教程》《傳智前端就業(yè)班視頻分享：移動web開發(fā)課程 》
四、前端視頻篇第四階段——進階篇
本階段前端課程共計4個知識點磷蜀，合計2個免費視頻涵蓋
1召耘、周期與目標：
學(xué)習(xí)周期：15天
2、學(xué)完后目標：
熟練使用閉包褐隆、高級函數(shù)污它、立即執(zhí)行函數(shù)(匿名函數(shù))等；
熟練使用元編程妓灌，解決Callback等轨蛤；
熟悉JavaScript基本語法。
3虫埂、知識點：
面向?qū)ο笤贘S中的體現(xiàn)與實踐
面向?qū)ο罄碚撓樯健ο蟮幕靖拍睢ο蟮膶傩院头椒ǖ舴⑼ㄟ^字面量創(chuàng)建對象
2）開發(fā)過程中常用的模式與思想
開閉原則缝呕、MVC思想澳窑、高內(nèi)聚低耦合、工廠模式
3）JavaScript高級特性
通過構(gòu)造函數(shù)創(chuàng)建對象供常、原型對象摊聋、繼承的多種實現(xiàn)方式、原型鏈栈暇、函數(shù)的本質(zhì)以及 Function 構(gòu)造函數(shù)麻裁、作用域鏈、閉包源祈、沙箱模式
4）封裝一個自己框架
選擇器框架煎源、CSS操作封裝、屬性操作封裝香缺、其他DOM操作的封裝手销、事件框架的封裝
4、小編整理的視頻教程如下：
《JavaScript-高級面向?qū)ο笠曨l教程》《JavaScript高級框架設(shè)計》
視頻的價值取決于領(lǐng)取后的行動图张，大家千萬別做收藏黨锋拖。和志同道合的人一起深入討論與學(xué)習(xí) Web前端技術(shù)，也歡迎轉(zhuǎn)給需要的朋友祸轮！
通過怎么樣的學(xué)習(xí)兽埃，才能成為合格的WEB前端工程師？如果現(xiàn)在的你很迷茫适袜，可以＋web前端扣扣裙：956766604 免費網(wǎng)課在線學(xué)習(xí)以及問題解答讲仰、項目指導(dǎo)服務(wù)，配合強大的學(xué)習(xí)工具痪蝇，帶你完成九大實戰(zhàn)項目，經(jīng)歷從零基礎(chǔ)到專業(yè)前端工程師的完美蛻變冕房。
歡迎初學(xué)和進階中的小伙伴躏啰。裙里有免費的學(xué)習(xí)資料，還有專業(yè)老師為你解惑耙册，更有免費體驗課给僵、免費直播課等福利不定期放送。
