來源:Wz1135640 發(fā)布時間:2018-11-16 16:41:14 閱讀量:1545
前端很火,想自學前端的人也多。作為過來人,知道自學的辛苦。制作這份學習路線圖的初心,就是讓想自學前端的小伙伴們有一份系統(tǒng)專業(yè)的學習資源和學習指導。于是,在為時將近兩個月的整理之后,就有了這份全面的前端學習資源大禮包!無論你是剛?cè)腴T的小白,還是已經(jīng)工作的前端開發(fā)者都能從中獲取到你想要的資料,文章由黑馬程序員老師整理發(fā)送!
前端學習路線圖—流程篇
二、前端學習路線圖—視頻篇:
前端視頻篇第一階段-準備篇
本階段前端課程共計5個知識點,5個免費視頻涵蓋
1、周期與目標:
學習周期:15天
學完后目標:
1、熟悉媒體查詢和響應式設計,使得設計有適配不同的移動;
2、熟悉基礎CSS的格式和CSS盒模式;
3、理解網(wǎng)頁間是如何鏈接的、如何設計多列布局,可以處理表單字段和媒體元素;
4、理解如何創(chuàng)建和瀏覽一個基本的網(wǎng)頁。
2、知識點:
1)開發(fā)工具的安裝配置的介紹
sublime、webstorm、Visual Studio Code
2)HTML
理解如何瀏覽和創(chuàng)建網(wǎng)頁、基本的語法規(guī)范、常用標簽及屬性、網(wǎng)頁之間的鏈接與跳轉(zhuǎn)、標簽節(jié)點層級節(jié)點
3)CSS
基本語法和三種書寫位置、選擇器和格式化排版、盒模型的高級用法、常用布局模型
4)JavaScript入門
基礎語法和變量、數(shù)據(jù)類型和數(shù)據(jù)類型轉(zhuǎn)換、條件判斷、循環(huán)語句、函數(shù)、數(shù)組等內(nèi)置對象
5)京東首頁實戰(zhàn)
CSS代碼抽象與復用、 浮動的盒子布局、padding 和 margin 使用、層級的使用、定位特性的各種使用場景
教程下載:
前端與移動開發(fā)基礎 :(鏈接)(此教程對應知識點1 2 3 5知識點)
2、CSS梅蘭商城項目實戰(zhàn)視頻教程 (鏈接)
Javascript教程:
JavaScript基礎視頻教程:(鏈接)
JavaScript 基礎加強:(鏈接)
(此教程對應4知識點)
前端視頻篇第二階段-基礎篇
本階段前端課程共計4個知識點,共計1個免費配套視頻涵蓋
1、周期與目標:
學習周期:20天
學完后目標:
1、能夠基于jQuery實現(xiàn)炫酷效果和復雜的功能模塊;
2、能創(chuàng)造或添加自定義效果到網(wǎng)頁上;
3、能熟練添加標準的動畫效果到網(wǎng)頁上;
4、熟練操作DOM模型。
2、知識點:
1)JavaScript基礎
JS語言的基本構(gòu)成、變量、數(shù)據(jù)類型、表達式、選擇結(jié)構(gòu)、循環(huán)結(jié)構(gòu)、短路語句、函數(shù)基礎
2)DOM + BOM
DOM基本結(jié)構(gòu)、節(jié)點對象的操作、事件特性及使用、常見的內(nèi)置DOM對象、常見的BOM功能
3)網(wǎng)頁特效與進階
在網(wǎng)頁特效中常用的編程接口、動畫編程、事件對象和冒泡、緩動框架封裝和旋轉(zhuǎn)木馬案例、正則表達式及應用
4)Jquery
選擇器、基本操作API、動畫API、事件API、插件機制、原理分析、項目實戰(zhàn)
推薦教程
JavaScript 基礎加強 :(鏈接)(對應知識點1)
前端視頻篇第三階段——核心篇
本階段前端課程共計5個知識點,合計3個免費視頻涵蓋
1、周期與目標:
學習周期:20天
學完后目標:
1、能夠基于jQueryMobile/Zepto等框架進行移動端js功能開發(fā);2、能夠熟練使用html5/css3/ canvas進行移動端頁面和功能效果開發(fā),并且能夠基于原生和框架進行響應式效果開發(fā);3、能夠基于jQuery、bootstrap等框架實現(xiàn)炫酷效果和復雜的功能模塊;4、能夠獨立制作電商類,企業(yè)類網(wǎng)站,以及常見js動態(tài)效果。
2、知識點:
1)HTML5 + CSS3
語義化結(jié)構(gòu)、多媒體 、本地存儲、其他常見API、CSS3 選擇器、CSS3 邊框、背景、陰影、CSS3 過渡和動畫、CSS3 伸縮布局、Canvas
2)服務端編程
端的概念、Web 服務器的概念、服務器搭建、XML與JSON
3)PHP
PHP基礎語法 、PHP服務端編程基礎
4)AJAX
基本編程接口、異步數(shù)據(jù)交互、模板引擎的使用、跨域的實現(xiàn)方案、增量加載
5)移動Web開發(fā)
響應式布局、Bootstrap框架深度使用、Zepto.js庫、預編譯CSS
推薦視頻:
最新H5+CSS3教程視頻 :(鏈接)(此免費視頻對應上述1知識點)
《年最新AJAX教程:(鏈接)(此免費視頻對應上述 4知識點)
《傳智黑馬前端就業(yè)班視頻分享:移動web開發(fā)課程》(鏈接) (此免費視頻對應上述 5知識點)
前端視頻篇第四階段——進階篇
本階段前端課程共計4個知識點,合計2個免費視頻涵蓋
1、周期與目標:
學習周期:15天
學完后目標:
1、熟練使用閉包、高級函數(shù)、立即執(zhí)行函數(shù)(匿名函數(shù))等;2、熟練使用元編程,解決Callback等;
3、熟悉JavaScript基本語法。
2、知識點:
1)面向?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操作的封裝、事件框架的封裝
視頻教程推薦:
JavaScript-高級面向?qū)ο笠曨l教程:(鏈接)
JavaScript高級框架設計:(鏈接)
---------------------