前端很火螟深，想自學(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í)群：965747894蒋歌，群里都是學(xué)web前端開發(fā)的帅掘，如果你正在學(xué)習(xí)前端 委煤，小編歡迎你加入，今天分享的這個(gè)案例已經(jīng)上傳到群文件修档，大家都是軟件開發(fā)黨碧绞，不定期分享干貨（只有前端軟件開發(fā)相關(guān)的），包括我自己整理的一份2018最新的前端進(jìn)階資料和高級開發(fā)教程吱窝，歡迎進(jìn)階中和進(jìn)想深入前端的小伙伴讥邻。
一、前端學(xué)習(xí)路線圖—流程篇
前端學(xué)習(xí)路線圖
二院峡、前端學(xué)習(xí)路線圖—視頻教程篇：
前端視頻篇第一階段-準(zhǔn)備篇
本階段前端課程共計(jì)5個(gè)知識點(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、知識點(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)層級節(jié)點(diǎn)
3）CSS
基本語法和三種書寫位置辣卒、選擇器和格式化排版掷贾、盒模型的高級用法、常用布局模型
4）JavaScript入門
基礎(chǔ)語法和變量荣茫、數(shù)據(jù)類型和數(shù)據(jù)類型轉(zhuǎn)換想帅、條件判斷、循環(huán)語句啡莉、函數(shù)港准、數(shù)組等內(nèi)置對象
5）京東首頁實(shí)戰(zhàn)
CSS代碼抽象與復(fù)用、 浮動(dòng)的盒子布局咧欣、padding 和 margin 使用浅缸、層級的使用、定位特性的各種使用場景
4魄咕、小編整理的視頻教程如下
《前端與移動(dòng)開發(fā)基礎(chǔ)》?
《CSS梅蘭商城項(xiàng)目實(shí)戰(zhàn)視頻教程》
《JavaScript基礎(chǔ)視頻教程》
二衩椒、前端視頻篇第二階段-基礎(chǔ)篇
本階段前端課程共計(jì)4個(gè)知識點(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、知識點(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)對象的操作、事件特性及使用婿斥、常見的內(nèi)置DOM對象劝篷、常見的BOM功能
網(wǎng)頁特效與進(jìn)階
在網(wǎng)頁特效中常用的編程接口、動(dòng)畫編程民宿、事件對象和冒泡娇妓、緩動(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è)知識點(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招驴、知識點(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è)知識點(diǎn)吱抚，合計(jì)2個(gè)免費(fèi)視頻涵蓋
1、周期與目標(biāo)：
學(xué)習(xí)周期：15天
2考廉、學(xué)完后目標(biāo)：
熟練使用閉包秘豹、高級函數(shù)、立即執(zhí)行函數(shù)(匿名函數(shù))等昌粤；
熟練使用元編程既绕，解決Callback等；
熟悉JavaScript基本語法涮坐。
3凄贩、知識點(diǎn)：
面向?qū)ο笤贘S中的體現(xiàn)與實(shí)踐
面向?qū)ο罄碚摗ο蟮幕靖拍罡ざ铩ο蟮膶傩院头椒ㄆＴ⑼ㄟ^字面量創(chuàng)建對象
2）開發(fā)過程中常用的模式與思想
開閉原則、MVC思想、高內(nèi)聚低耦合椒丧、工廠模式
3）JavaScript高級特性
通過構(gòu)造函數(shù)創(chuàng)建對象壹甥、原型對象、繼承的多種實(shí)現(xiàn)方式壶熏、原型鏈句柠、函數(shù)的本質(zhì)以及 Function 構(gòu)造函數(shù)、作用域鏈棒假、閉包溯职、沙箱模式
4）封裝一個(gè)自己框架
選擇器框架、CSS操作封裝淆衷、屬性操作封裝缸榄、其他DOM操作的封裝、事件框架的封裝
如果對于學(xué)習(xí)編程有很多疑惑祝拯，沒有思路甚带，不知道如何有效率的學(xué)習(xí)，可以添加我的前端交流學(xué)習(xí)群 965747894佳头，需要最新系統(tǒng)的學(xué)習(xí)教程也可以管我要鹰贵。做了很多年開發(fā)，對于學(xué)習(xí)方式康嘉，如何提高自己的技術(shù)有一定的經(jīng)驗(yàn)碉输，術(shù)業(yè)有專攻，多跟有經(jīng)驗(yàn)的人交流學(xué)習(xí)亭珍，對這個(gè)行業(yè)信息了解的多敷钾，職業(yè)發(fā)展的空間就越大
