更新時間:2023年04月18日16時08分 來源:傳智教育 瀏覽次數(shù):
Web前端在如今非常重要,因為它是用戶與網(wǎng)站或應(yīng)用程序交互的第一層。它是構(gòu)建網(wǎng)站或應(yīng)用程序的前端部分,包括頁面布局、設(shè)計、樣式、交互和用戶體驗。
全網(wǎng)較全面、實(shí)用的前端基礎(chǔ)教程,45小時掌握網(wǎng)頁制作流程和技巧,學(xué)完后可以獨(dú)立完成PC端/移動端網(wǎng)頁制作。
只要大家有需求
我們的視頻教程就絕不會缺席
黑馬程序員重磅發(fā)布新教程
本課程從前端開發(fā)環(huán)境開始講解,課程內(nèi)容既包含企業(yè)中制作網(wǎng)頁的基礎(chǔ)知識,又包含企業(yè)PC端網(wǎng)頁和移動端網(wǎng)頁的制作流程,通過每日案例、學(xué)成在線和小兔鮮兒、極速問診、酷我手機(jī)網(wǎng)頁、騰訊全端等多個項目掌握多端網(wǎng)頁制作技巧,輕松學(xué)習(xí)HTML5和CSS3。
課程共分為:HTML5基礎(chǔ)、HTML5進(jìn)階、CSS3基礎(chǔ)、CSS3進(jìn)階、CSS3盒子模型、Flex 布局、Flex實(shí)戰(zhàn)項目-學(xué)成在線、定位和高級技巧、綜合實(shí)戰(zhàn)項目-小兔鮮兒、平面與空間轉(zhuǎn)換、動畫、移動端網(wǎng)頁布局、響應(yīng)式網(wǎng)頁布局。
課程亮點(diǎn)
1.全網(wǎng)更全面、實(shí)用的前端基礎(chǔ)課教程,內(nèi)容包含 PC 端和移動端網(wǎng)頁制作;
2.內(nèi)容更貼合企業(yè)開發(fā):采用流行布局方案 Flex,弱化過舊知識浮動;講解開發(fā)最常用的移動端適配方案,rem和vw/vh;使用LESS預(yù)處理器開發(fā)頁面; 使用 PxCook 測量工具,100%還原設(shè)計稿;
3.每日課程都配備企業(yè)實(shí)際案例;
4.每日作業(yè)齊全:既學(xué)又習(xí);
5.豐富的配套資料:代碼、講義、筆記、大綱等;
適用人群
· 對前端開發(fā)感興趣的在校生及應(yīng)屆畢業(yè)生;
· 對目前職業(yè)有進(jìn)一步提升需求,希望從事前端行業(yè)高薪崗位的在職人員;
· 對前端開發(fā)感興趣,希望快速入門前端開發(fā)的相關(guān)人員;
課程內(nèi)容
2023新版前端基礎(chǔ)入門教程HTML5+CSS3+移動Web(滑動查看)
第1節(jié) - 01-前端基礎(chǔ)導(dǎo)學(xué)課程
第2節(jié) - 02-第一天課程介紹
第3節(jié) - 03-標(biāo)簽語法
第4節(jié) - 04-HTML的基本骨架
第5節(jié) - 05-標(biāo)簽的關(guān)系
第6節(jié) - 06-注釋
第7節(jié) - 07-排版標(biāo)簽-標(biāo)題和段落
第8節(jié) - 08-換行和水平線標(biāo)簽
第9節(jié) - 09-文本格式化標(biāo)簽
第10節(jié) - 10-圖像標(biāo)簽
第11節(jié) - 11-路徑-相對和絕對
第12節(jié) - 12-超鏈接標(biāo)簽
第13節(jié) - 13-多媒體標(biāo)簽-音頻和視頻
第14節(jié) - 14-綜合案例1-個人簡介
第15節(jié) - 15-綜合案例2-vue簡介
第16節(jié) - 16-第二天課程介紹
第17節(jié) - 17-列表-無序和有序和定義列表
第18節(jié) - 18-表格-基本使用與表格結(jié)構(gòu)標(biāo)簽
第19節(jié) - 19-合并單元格
第20節(jié) - 20-表單-input標(biāo)簽
第21節(jié) - 21-表單-下拉菜單
第22節(jié) - 22-表單-文本域
第23節(jié) - 23-表單-label標(biāo)簽
第24節(jié) - 24-表單-按鈕
第25節(jié) - 25-div和span標(biāo)簽和字體實(shí)體
第26節(jié) - 26-綜合案例1-體育新聞列表
第27節(jié) - 27-綜合案例2-注冊信息
第28節(jié) - 28-第三天課程介紹
第29節(jié) - 29-體驗CSS
第30節(jié) - 30-CSS引入方式
第31節(jié) - 31-選擇器-標(biāo)簽和類
第32節(jié) - 32-選擇器-id和通配符
第33節(jié) - 33-畫盒子
第34節(jié) - 34-字體修飾屬性-大小和粗細(xì)和傾斜
第35節(jié) - 35-行高
第36節(jié) - 36-字體族
第37節(jié) - 37-font屬性
第38節(jié) - 38-文本修飾屬性-縮進(jìn)和對齊和修飾線
第39節(jié) - 39-文字顏色
第40節(jié) - 40-調(diào)試工具
第41節(jié) - 41-綜合案例一-新聞詳情
第42節(jié) - 42-綜合案例二-CSS簡介
第43節(jié) - 43-第四天課程介紹
第44節(jié) - 44-復(fù)合選擇器
第45節(jié) - 45-偽類選擇器.
第46節(jié) - 46-CSS三大特性
第47節(jié) - 47-Emmet寫法
第48節(jié) - 48-背景屬性-拆分寫法
第49節(jié) - 49-背景屬性-復(fù)合寫法
第50節(jié) - 50-顯示模式
第51節(jié) - 51-綜合案例一-熱詞
第52節(jié) - 52-綜合案例二-banner效果
第53節(jié) - 53-第五天課程介紹
第54節(jié) - 54-結(jié)構(gòu)偽類選擇器
第55節(jié) - 55-偽元素選擇器
第56節(jié) - 56-PxCook用法
第57節(jié) - 57-盒子模型-組成
第58節(jié) - 58-盒子模型-邊框線
第59節(jié) - 59-盒子模型-內(nèi)邊距
第60節(jié) - 60-盒子模型-尺寸計算
第61節(jié) - 61-版心居中
第62節(jié) - 62-清除默認(rèn)樣式
第63節(jié) - 63-內(nèi)容溢出overflow屬性
第64節(jié) - 64-外邊距問題-合并和塌陷
第65節(jié) - 65-行內(nèi)元素垂直內(nèi)外邊距
第66節(jié) - 66-圓角與盒子陰影
第67節(jié) - 67-綜合案例一-產(chǎn)品卡片
第68節(jié) - 68-綜合案例二-新浪新聞
第69節(jié) - 69-第六天課程介紹
第70節(jié) - 70-標(biāo)準(zhǔn)流
第71節(jié) - 71-浮動-基本使用與布局
第72節(jié) - 72-浮動-清除浮動
第73節(jié) - 73-浮動-總結(jié)
第74節(jié) - 74-flex布局-體驗
第75節(jié) - 75-flex布局-組成
第76節(jié) - 76-flex布局-主軸與側(cè)軸對齊方式
第77節(jié) - 77-flex布局-修改主軸方向
第78節(jié) - 78-flex布局-彈性伸縮比
第79節(jié) - 79-flex布局-彈性換行與行對齊方式
第80節(jié) - 80-綜合案例-抖音解決方案
第81節(jié) - 81-第七天課程介紹
第82節(jié) - 82-準(zhǔn)備工作-項目目錄與版心
第83節(jié) - 83-網(wǎng)頁制作思路
第84節(jié) - 84-header區(qū)域-整體布局
第85節(jié) - 85-header區(qū)域-logo
第86節(jié) - 86-header區(qū)域-導(dǎo)航
第87節(jié) - 87-header區(qū)域-搜索區(qū)域
第88節(jié) - 88-header區(qū)域-用戶區(qū)域
第89節(jié) - 89-banner區(qū)域
第90節(jié) - 90-精品推薦區(qū)域
第91節(jié) - 91-推薦課程區(qū)域
第92節(jié) - 92-前端開發(fā)工程師區(qū)域
第93節(jié) - 93-版權(quán)區(qū)域
第94節(jié) - 94-第八天課程介紹
第95節(jié) - 95-定位-相對和絕對和固定
第96節(jié) - 96-堆疊順序z-index
第97節(jié) - 97-定位總結(jié)
第98節(jié) - 98-CSS精靈-基本使用
第99節(jié) - 99-案例-CSS精靈-京東服務(wù)
第100節(jié) - 100-字體圖標(biāo)-下載和使用
第101節(jié) - 101-字體圖標(biāo)-上傳
第102節(jié) - 102-垂直對齊方式vertical-align
第103節(jié) - 103-過渡屬性
第104節(jié) - 104-修飾屬性-透明度與光標(biāo)類型
第105節(jié) - 105-綜合案例-淘寶輪播圖
第106節(jié) - 106-第九天課程介紹
第107節(jié) - 107-搭建項目目錄
第108節(jié) - 108-網(wǎng)頁頭部SEO三大標(biāo)簽
第109節(jié) - 109-Favicon圖標(biāo)與版心
第110節(jié) - 110-快捷導(dǎo)航
第111節(jié) - 111-頭部-布局
第112節(jié) - 112-頭部-logo
第113節(jié) - 113-頭部-導(dǎo)航
第114節(jié) - 114-頭部-搜索
第115節(jié) - 115-頭部-購物車
第116節(jié) - 116-底部-布局
第117節(jié) - 117-底部-服務(wù)區(qū)域
第118節(jié) - 118-底部-幫助中心
第119節(jié) - 119-底部-版權(quán)
第120節(jié) - 120-banner區(qū)域
第121節(jié) - 121-新鮮好物區(qū)域
第122節(jié) - 122-人氣推薦
第123節(jié) - 123-熱門品牌區(qū)域
第124節(jié) - 124-生鮮-標(biāo)題
第125節(jié) - 125-生鮮-內(nèi)容布局
第126節(jié) - 126-生鮮-產(chǎn)品內(nèi)容
第127節(jié) - 127-生鮮-過渡效果
第128節(jié) - 128-最新專題-布局
第129節(jié) - 129-最新專題-內(nèi)容
第130節(jié) - 130-最新專題-定位文字
未完待續(xù),黑馬老師996更新中......
掌握行業(yè)熱門技術(shù)
是每個程序員都應(yīng)該重視的事情
2023新版前端基礎(chǔ)入門教程HTML5+CSS3+移動Web如此重要,你還沒學(xué)?
點(diǎn)擊或搜索黑馬程序員B站
觀看全集視頻
- 完整配套資料領(lǐng)取方式 -
(視頻+講義+源碼+筆記+資料)
黑馬程序員視頻庫