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