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