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