如果你在學習前端,千萬不要錯過這次的尚大前端視頻四連發!
本套教程是尚矽谷李立超老師2019年全新錄製,將前端學習的基礎內容融匯為148節課,涵蓋了HTML、CSS、HTML5和CSS3的核心技術點。通過對本教程的學習,可以幫助初學者快速上手,並完成大部分靜態網頁的開發。
教程的具體內容包括:基本的HTML標籤、HTML5新標籤、CSS的基本用法、盒子模型、浮動、定位、flexbox、css sprite、 iconfont、transform、transition、animation、media query、less、vs code、PhotoShop等;還包含了移動端開發的基礎知識,如視口、移動端的適配等(這些內容使我們可以在不應用任何JS代碼的情況下即完成移動端的適配)。
除此之外,課程涵蓋大量的CSS技巧、動畫、交互效果,對傳統浮動和定位的布局方式,以及CSS3中的彈性盒和響應式布局都有深入講解。
教程目錄:
001.H5&C3基礎_課程簡介
002.H5&C3基礎_網頁簡史
003.H5&C3基礎_HTML簡介
004.H5&C3基礎_編寫你的第一個網頁
005.H5&C3基礎_安裝notepad++
006.H5&C3基礎_自結束標籤和注釋
007.H5&C3基礎_標籤中的屬性
008.H5&C3基礎_文檔聲明
009.H5&C3基礎_關於進位
010.H5&C3基礎_字符編碼
011.H5&C3基礎_1文檔的使用
012.H5&C3基礎_VSCode的安裝
013.H5&C3基礎_配置liveServer
014.H5&C3基礎_實體
015.H5&C3基礎_meta標籤
016.H5&C3基礎_語義化標籤(1)
017.H5&C3基礎_塊和行內
018.H5&C3基礎_語義化標籤(2)
019.H5&C3基礎_列表
020.H5&C3基礎_超連結簡介
021.H5&C3基礎_相對路徑
022.H5&C3基礎_超連結的其他用法
023.H5&C3基礎_圖片標籤
024.H5&C3基礎_圖片的格式
025.H5&C3基礎_內聯框架
026.H5&C3基礎_音視頻播放
027.H5&C3基礎_CSS簡介
028.H5&C3基礎_CSS編寫的位置
029.H5&C3基礎_CSS的基本語法
030.H5&C3基礎_常用選擇器
031.H5&C3基礎_複合選擇器
032.H5&C3基礎_關係選擇器
033.H5&C3基礎_屬性選擇器
034.H5&C3基礎_偽類選擇器
035.H5&C3基礎_超連結的偽類
036.H5&C3基礎_偽元素
037.H5&C3基礎_餐廳練習介紹
038.H5&C3基礎_繼承
039.H5&C3基礎_選擇器的權重
040.H5&C3基礎_像素和百分比
041.H5&C3基礎_em和rem
042.H5&C3基礎_RGB值
043.H5&C3基礎_HSL值
044.H5&C3基礎_文檔流
045.H5&C3基礎_盒子模型
046.H5&C3基礎_盒子模型-邊框
047.H5&C3基礎_盒子模型-內邊距
048.H5&C3基礎_盒子模型-外邊距
049.H5&C3基礎_盒子模型-水平方向的布局
050.H5&C3基礎_盒子模型-垂直方向的布局
051.H5&C3基礎_盒子模型-外邊距的摺疊
052.H5&C3基礎_行內元素的盒模型
053.H5&C3基礎_瀏覽器的默認樣式
054.H5&C3基礎_布置練習
055.H5&C3基礎_京東圖片列表
056.H5&C3基礎_京東左側導航欄
057.H5&C3基礎_網易新聞列表
058.H5&C3基礎_盒子的大小
059.H5&C3基礎_輪廓陰影和圓角
060.H5&C3基礎_浮動的簡介
061.H5&C3基礎_浮動的特點
062.H5&C3基礎_導航條練習
063.H5&C3基礎_簡單的布局
064.H5&C3基礎_高度塌陷和BFC
065.H5&C3基礎_BFC的演示
066.H5&C3基礎_clear
067.H5&C3基礎_使用after偽類解決高度塌陷
068.H5&C3基礎_clearfix
069.H5&C3基礎_相對定位
070.H5&C3基礎_絕對定位
071.H5&C3基礎_固定定位
072.H5&C3基礎_粘滯定位
073.H5&C3基礎_絕對定位元素的位置
074.H5&C3基礎_元素的層級
075.H5&C3基礎_京東輪播圖練習
076.H5&C3基礎_字體族
077.H5&C3基礎_圖標字體簡介
078.H5&C3基礎_圖標字體的其他使用方式
079.H5&C3基礎_iconfont
080.H5&C3基礎_行高
081.H5&C3基礎_字體的簡寫屬性
082.H5&C3基礎_文本的水平和垂直對齊
083.H5&C3基礎_其他的文本樣式
084.H5&C3基礎_京東頂部導航條-結構
085.H5&C3基礎_京東頂部導航條-基本樣式
086.H5&C3基礎_京東頂部導航條-下拉框
087.H5&C3基礎_PS的安裝
088.H5&C3基礎_背景(一)
089.H5&C3基礎_背景(二)
090.H5&C3基礎_背景練習1
091.H5&C3基礎_背景練習2
092.H5&C3基礎_雪碧圖
093.H5&C3基礎_線性漸變
094.H5&C3基礎_徑向漸變
095.H5&C3基礎_電影卡片練習
096.H5&C3基礎_表格的簡介
097.H5&C3基礎_長表格
098.H5&C3基礎_表格的樣式
099.H5&C3基礎_表單簡介
100.H5&C3基礎_表單補充
101.H5&C3基礎_項目搭建
102.H5&C3基礎_導航條結構的搭建
103.H5&C3基礎_導航條基本樣式
104.H5&C3基礎_二維碼下拉
105.H5&C3基礎_添加過渡效果
106.H5&C3基礎_頭部logo
107.H5&C3基礎_頭部導航條
108.H5&C3基礎_頭部導航下拉層
109.H5&C3基礎_右側的搜索框
110.H5&C3基礎_左側的導航條
111.H5&C3基礎_完成banner
112.H5&C3基礎_右側工具條
113.H5&C3基礎_中間的廣告欄
114.H5&C3基礎_項目補充
115.H5&C3基礎_過渡
116.H5&C3基礎_米兔練習
117.H5&C3基礎_動畫
118.H5&C3基礎_奔跑的少年
119.H5&C3基礎_關鍵幀
120.H5&C3基礎_變形平移
121.H5&C3基礎_z軸平移
122.H5&C3基礎_旋轉
123.H5&C3基礎_鴨子表
124.H5&C3基礎_復仇者聯盟
125.H5&C3基礎_縮放
126.H5&C3基礎_less簡介
127.H5&C3基礎_less中的變量
128.H5&C3基礎_父元素和擴展
129.H5&C3基礎_混合函數
130.H5&C3基礎_less的補充
131.H5&C3基礎_彈性盒簡介
132.H5&C3基礎_會彈的導航條
133.H5&C3基礎_彈性容器上的樣式
134.H5&C3基礎_彈性元素上的樣式
135.H5&C3基礎_淘寶導航
136.H5&C3基礎_聊聊像素
137.H5&C3基礎_手機像素
138.H5&C3基礎_完美視口
139.H5&C3基礎_vw單位
140.H5&C3基礎_vw適配
141.H5&C3基礎_移動端頁面上部分
142.H5&C3基礎_完成移動端頁面
143.H5&C3基礎_媒體查詢簡介
144.H5&C3基礎_媒體查詢簡介
145.H5&C3基礎_美圖手機導航結構
146.H5&C3基礎_美圖手機左側圖標
147.H5&C3基礎_美圖手機左側下拉菜單
148.H5&C3基礎_美圖手機完成
axios是前端必備的前後交互ajax請求庫, vue/react官方推薦使用。本視頻教程從基本的HTTP請求協議開始,到封裝XHR定義簡潔版axios;從axios的基本語法使用,到難點技術使用分析,最後進行axios源碼的深入分析,幫助學習者深入掌握axios技術。
教程目錄:
01.課程介紹
02.HTTP相關複習
03.json-server搭建REST接口_瀏覽器測試
04.使用axios請求REST接口
05.區別ajax請求與一般的http請求
06.XHR的API
07.分析axios請求函數
08.ajax封裝_發請求
09.ajax封裝_post請求攜帶參數數據
10.ajax封裝_get請求攜帶參數
11.ajax封裝_讀取請求結果數據
12.ajax封裝_PUT和DELETE請求
13.axios的介紹和特點
14.axios的文檔說明
15.axios使用_發ajax請求
16.axios使用_create方法
17.axios使用_攔截器及運行流程
18.axios使用_取消請求1
19.axios使用_取消請求2
20.axios源碼分析_整體結構分析
21.axios源碼分析_axios與Axios的關係
22.axios源碼分析_axios與Axios的關係_debug
23.axios源碼分析_axios與instance的區別
24.axios源碼分析_流程圖分析
25.axios源碼分析_request串連整個流程
26.axios源碼分析_request串連整個流程圖
27.axios源碼分析_dispatchRuest函數
28.axios源碼分析_xhrAdapter函數
29.axios源碼分析_取消請求
Promise是ES6中最重要也是最難的技術。中大型公司面試前端工程師,Promise的實現是必考題。本視頻教程從最基本的回調/異常語法開始,到Promise的基本使用;從Promise難點技術分析,到一步步手寫Promise的實現、擴展async和await深入分析、宏隊列與微隊列詳解;最後通過經典的面試題,檢驗Promise學習的效果。通關之後,你就成為了Promise高級工程師!
教程目錄:
01.課程介紹
02.函數對象與實例對象
03.2種回調函數(同步與異步)
04.常見的內置錯誤
05.錯誤的處理(捕獲與拋出)
06.Promise的理解
07.promise的狀態和狀態改變
08.Promise的基本運行流程
09.promise的基本使用
10.為什麼要用Promise
11.Promise的API說明
12.Promise的API使用1
13.Promise的API使用2
14.Promise的幾個關鍵問題1
15.Promise的幾個關鍵問題2
16.Promise的幾個關鍵問題3
17.Promise的幾個關鍵問題4
18.Promise的幾個關鍵問題5
20.自定義Promise_說明
21.自定義Promise_整體結構
22.自定義Promise_構造函數實現1
23.自定義Promise_構造函數實現2
24.自定義Promise_構造函數測試和完善
25.自定義Promise_then方法實現1
26.自定義Promise_then方法實現2
27.自定義Promise_then方法實現3
28.自定義Promise_then方法測試和完善
29.自定義Promise_then方法實現(第2遍)
30.自定義Promise_Promise的resolve和reject方法
31.自定義Promise_Promise的all方法
32.自定義Promise_Promise的race方法
33.自定義Promise_完善all和race方法
34.自定義Promise_Promise的resolveDelay和rejectDelay方法
35.自定義Promise_class版本
36.async與await
37.JS異步之宏隊列與微隊列
38.面試題1
39.面試題2
40.面試題3
41.面試題4
本項目使用的框架是美團團隊推出的小程序框架mpvue,項目為模塊化、組件化、工程化的項目。涵蓋了原生小程序API的使用、Vue.js核心語法及flyio第三方Ajax請求庫,後端使用Koa框架進行搭建。學習本課程內容可以快速上手mpvue,熟悉小程序同後端交互,及同微信官方的交互流程。
教程目錄:
01.mpvue簡介
02.Mpvue初始化簡介
03.mpvue項目初始化搭建
04.firstView頁面搭建
05.firstView頁面搭建2
06.路由跳轉
07.窗口配置
08.底部tab欄搭建
09.index靜態頁面搭建
10.index數據動態展示
11.詳情頁靜態頁面搭建
12.詳情頁數據動態渲染
13.分享功能實現
14.列表頁功能完成
15.伺服器初始化搭建
16.搜索圖書接口完成
17.伺服器nodemon自動編譯
18.搜索頁面頭部功能完成
19.前後端交互實現
20.搜索界面完成
21.個人中心靜態頁面搭建
22.獲取用戶登錄信息,授權彈窗
23.打開本地攝像頭掃碼
24.封裝ajax請求功能函數
25.圖解說明如何獲取用戶唯一標識openId
26.獲取用戶臨時登錄憑證code
27.伺服器端獲取openId接口設計
28.驗證接口獲取openId
29.自定義登錄狀態,生成token
30.token驗證測試
獲取四套前端視頻教程,請關注尚矽谷教育1024程式設計師狂歡節活動,猛擊文章左下角「閱讀原文」了解詳情!