更新時(shí)間:2023年04月04日17時(shí)22分 來源:傳智教育 瀏覽次數(shù):
黑馬前端大佬說:數(shù)字產(chǎn)業(yè)在,前端就在!大家最應(yīng)該做的是不斷提升自己的技術(shù)!技術(shù)是不斷發(fā)展,唯有不斷變強(qiáng),才能讓自己不被拍在沙灘上!
為了讓零基礎(chǔ)的同學(xué)更高起點(diǎn)的掌握前端技術(shù),黑馬重磅推出《從0到1學(xué)前端》教程,讓大家 15天便能輕松入門!給足大家應(yīng)對風(fēng)浪的底氣,用更全面、更實(shí)用的技術(shù),護(hù)你們周全!
先問大家一個(gè)問題:學(xué)IT最有效的途徑是什么?
答案:項(xiàng)目實(shí)戰(zhàn)!沒有項(xiàng)目實(shí)戰(zhàn)的教程一律按"假教程"判定!
本課程從前端開發(fā)環(huán)境開始講解,課程內(nèi)容既包含企業(yè)中制作網(wǎng)頁的基礎(chǔ)知識(shí),又包含企業(yè)PC端網(wǎng)頁和移動(dòng)端網(wǎng)頁的制作流程,通過每日案例、學(xué)成在線和小兔鮮兒、極速問診、酷我手機(jī)網(wǎng)頁、騰訊全端等多個(gè)項(xiàng)目掌握多端網(wǎng)頁制作技巧,輕松學(xué)習(xí)HTML5和CSS3。妥妥的真教程!
1.內(nèi)容更全面:全網(wǎng)更全面、實(shí)用的前端基礎(chǔ)課教程,包括PC端頁面布局、移動(dòng)端頁面布局、響應(yīng)式網(wǎng)頁布局;
2. 實(shí)戰(zhàn)式教學(xué):課程全程實(shí)戰(zhàn)教學(xué),讓學(xué)生學(xué)以致用。課程中的項(xiàng)目均來自一線大廠,類型豐富,包含教育、電商、醫(yī)療、娛樂等類型項(xiàng)目;
3. 貼近企業(yè)開發(fā):企業(yè)講啥,我們教啥!用流行布局方案 Flex,弱化過舊知識(shí)浮動(dòng);講解開發(fā)最常用的移動(dòng)端適配方案,rem和vw/vh;使用LESS預(yù)處理器開發(fā)頁面; 使用 PxCook 測量工具,100%還原設(shè)計(jì)稿;
4. 每日課后作業(yè):讓學(xué)生不只是紙上談兵,真正做到既能學(xué)到又能練到;
5. 豐富配套資料:代碼、講義、筆記、大綱等全部已打包,一鍵領(lǐng)取,輕松學(xué)習(xí)!
>初學(xué)者:在校生及應(yīng)屆畢業(yè)生;
>進(jìn)階者:對目前職業(yè)有進(jìn)一步提升需求的在職人員;
>感興趣者:希望快速入門前端開發(fā)的相關(guān)人員。
√ 掌握PC端網(wǎng)頁布局能力
- 網(wǎng)站開發(fā)流程
- 布局思路
√ 掌握移動(dòng)端網(wǎng)頁適配能力
- rem+flexible.js 適配方案
- vw 適配方案
√ 掌握響應(yīng)式網(wǎng)頁布局能力
- 媒體查詢
- Bootstrap UI 框架
√ 網(wǎng)頁性能優(yōu)化能力
- Logo優(yōu)化
- TDK優(yōu)化
- 代碼開發(fā)規(guī)范
- 布局技巧優(yōu)化最佳選擇
一、HTML5基礎(chǔ)
1. 掌握標(biāo)簽語法
2. 標(biāo)題標(biāo)簽
3. 圖像標(biāo)簽與路徑
4. 超鏈接標(biāo)簽
5. 多媒體標(biāo)簽(音頻、視頻)
6.綜合案例-個(gè)人簡介內(nèi)容排版
7.綜合案例-Vue簡介內(nèi)容排版
二、HTML5進(jìn)階
1. 列表
2. 表格
3. 表單
4.綜合案例-騰訊體育新聞區(qū)域布局
5.綜合案例-智聯(lián)注冊頁面制作
三、CSS3基礎(chǔ)
1.CSS引入方式
2.基礎(chǔ)選擇器
3.文字控制屬性
4.綜合案例-新浪新聞詳情內(nèi)容美化
5.綜合案例-mdn官方CSS簡介內(nèi)容美化
四、CSS3進(jìn)階
1.復(fù)合選擇器
2.CSS三大特性
3.background屬性
4.顯示模式
5.綜合案例-新浪搜索熱詞區(qū)域制作
6.綜合案例-微信banner效果制作
五、CSS3盒子模型
1.結(jié)構(gòu)偽類選擇器
2.偽元素選擇器
3.CSS3盒子模型詳解
4.圓角、陰影屬性
5.綜合案例-抖音產(chǎn)品卡片區(qū)域制作
6.綜合案例-新浪新聞區(qū)域制作
六、Flex布局
1.標(biāo)準(zhǔn)流
2.浮動(dòng)
3.Flex布局
4.綜合案例-小米產(chǎn)品區(qū)域布局
5.綜合案例-抖音解決方案區(qū)域制作
七、Flex實(shí)戰(zhàn)項(xiàng)目-學(xué)成在線
八、高級(jí)技巧
1.定位 position
2.CSS精靈技術(shù)
3.字體圖標(biāo)
4.綜合案例-京東服務(wù)區(qū)域制作
5.綜合案例-淘寶輪播圖區(qū)域制作
九、綜合實(shí)戰(zhàn)項(xiàng)目-小兔鮮兒
1.TDK優(yōu)化
2.小兔鮮兒公共模塊
十、綜合實(shí)戰(zhàn)項(xiàng)目-小兔鮮兒
十一、CSS3高級(jí)技巧
1.2D平面轉(zhuǎn)換 transform
2.漸變 linear-gradient
3.綜合實(shí)戰(zhàn)項(xiàng)目-喜馬拉雅官網(wǎng)
十二、CSS3高級(jí)技巧
1.3D空間轉(zhuǎn)換
2.動(dòng)畫 animation
3.綜合案例-制作走馬燈動(dòng)畫
4.綜合實(shí)戰(zhàn)項(xiàng)目-全民出游網(wǎng)頁布局
十三、移動(dòng)端網(wǎng)頁布局
1.屏幕分辨率
2.常見移動(dòng)端適配方案
3.rem適配方案
4.媒體查詢
5.less語法
6.綜合實(shí)戰(zhàn)項(xiàng)目-極速問診手機(jī)端網(wǎng)頁布局
十四、移動(dòng)端網(wǎng)頁布局
1.vw/vh適配方案
2.綜合實(shí)戰(zhàn)項(xiàng)目-酷我手機(jī)端網(wǎng)頁布局
十五、 響應(yīng)式網(wǎng)頁布局
1.媒體查詢 mediaQuery
2.Bootstrap UI框架使用
3.綜合實(shí)戰(zhàn)項(xiàng)目-騰訊全端響應(yīng)式網(wǎng)頁布局
立即點(diǎn)擊,跳轉(zhuǎn)B站開始學(xué)習(xí)↓↓↓
2023新版前端Web開發(fā)HTML5+CSS3+移動(dòng)web視頻教程
本套視頻教程所有配套資料↓↓↓
北京校區(qū)