教育行業(yè)A股IPO第一股(股票代碼 003032)

全國(guó)咨詢/投訴熱線:400-618-4000

2023新版前端基礎(chǔ)入門教程HTML5+CSS3+移動(dòng)Web

更新時(shí)間:2023年04月18日16時(shí)08分 來源:傳智教育 瀏覽次數(shù):

好口碑IT培訓(xùn)

  Web前端在如今非常重要,因?yàn)樗怯脩襞c網(wǎng)站或應(yīng)用程序交互的第一層。它是構(gòu)建網(wǎng)站或應(yīng)用程序的前端部分,包括頁面布局、設(shè)計(jì)、樣式、交互和用戶體驗(yàn)。

  全網(wǎng)較全面、實(shí)用的前端基礎(chǔ)教程,45小時(shí)掌握網(wǎng)頁制作流程和技巧,學(xué)完后可以獨(dú)立完成PC端/移動(dòng)端網(wǎng)頁制作。


只要大家有需求

我們的視頻教程就絕不會(huì)缺席

黑馬程序員重磅發(fā)布新教程



  本課程從前端開發(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。


  課程共分為:HTML5基礎(chǔ)、HTML5進(jìn)階、CSS3基礎(chǔ)、CSS3進(jìn)階、CSS3盒子模型、Flex 布局、Flex實(shí)戰(zhàn)項(xiàng)目-學(xué)成在線、定位和高級(jí)技巧、綜合實(shí)戰(zhàn)項(xiàng)目-小兔鮮兒、平面與空間轉(zhuǎn)換、動(dòng)畫、移動(dòng)端網(wǎng)頁布局、響應(yīng)式網(wǎng)頁布局。


  課程亮點(diǎn)  

  1.全網(wǎng)更全面、實(shí)用的前端基礎(chǔ)課教程,內(nèi)容包含 PC 端和移動(dòng)端網(wǎng)頁制作;

  2.內(nèi)容更貼合企業(yè)開發(fā):采用流行布局方案 Flex,弱化過舊知識(shí)浮動(dòng);講解開發(fā)最常用的移動(dòng)端適配方案,rem和vw/vh;使用LESS預(yù)處理器開發(fā)頁面; 使用 PxCook 測(cè)量工具,100%還原設(shè)計(jì)稿;

  3.每日課程都配備企業(yè)實(shí)際案例;

  4.每日作業(yè)齊全:既學(xué)又習(xí);

  5.豐富的配套資料:代碼、講義、筆記、大綱等;


  適用人群  

  · 對(duì)前端開發(fā)感興趣的在校生及應(yīng)屆畢業(yè)生;

  · 對(duì)目前職業(yè)有進(jìn)一步提升需求,希望從事前端行業(yè)高薪崗位的在職人員;

  · 對(duì)前端開發(fā)感興趣,希望快速入門前端開發(fā)的相關(guān)人員;

  程內(nèi)容  

  2023新版前端基礎(chǔ)入門教程HTML5+CSS3+移動(dòng)Web(滑動(dòng)查看)

  第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-路徑-相對(duì)和絕對(duì)

  第12節(jié) - 12-超鏈接標(biāo)簽

  第13節(jié) - 13-多媒體標(biāo)簽-音頻和視頻

  第14節(jié) - 14-綜合案例1-個(gè)人簡(jiǎn)介

  第15節(jié) - 15-綜合案例2-vue簡(jiǎn)介

  第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-注冊(cè)信息

  第28節(jié) - 28-第三天課程介紹

  第29節(jié) - 29-體驗(yàn)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)和對(duì)齊和修飾線

  第39節(jié) - 39-文字顏色

  第40節(jié) - 40-調(diào)試工具

  第41節(jié) - 41-綜合案例一-新聞詳情

  第42節(jié) - 42-綜合案例二-CSS簡(jiǎn)介

  第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-盒子模型-尺寸計(jì)算

  第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-浮動(dòng)-基本使用與布局

  第72節(jié) - 72-浮動(dòng)-清除浮動(dòng)

  第73節(jié) - 73-浮動(dòng)-總結(jié)

  第74節(jié) - 74-flex布局-體驗(yàn)

  第75節(jié) - 75-flex布局-組成

  第76節(jié) - 76-flex布局-主軸與側(cè)軸對(duì)齊方式

  第77節(jié) - 77-flex布局-修改主軸方向

  第78節(jié) - 78-flex布局-彈性伸縮比

  第79節(jié) - 79-flex布局-彈性換行與行對(duì)齊方式

  第80節(jié) - 80-綜合案例-抖音解決方案

  第81節(jié) - 81-第七天課程介紹

  第82節(jié) - 82-準(zhǔn)備工作-項(xiàng)目目錄與版心

  第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-定位-相對(duì)和絕對(duì)和固定

  第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-垂直對(duì)齊方式vertical-align

  第103節(jié) - 103-過渡屬性

  第104節(jié) - 104-修飾屬性-透明度與光標(biāo)類型

  第105節(jié) - 105-綜合案例-淘寶輪播圖

  第106節(jié) - 106-第九天課程介紹

  第107節(jié) - 107-搭建項(xiàng)目目錄

  第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ù)

是每個(gè)程序員都應(yīng)該重視的事情

2023新版前端基礎(chǔ)入門教程HTML5+CSS3+移動(dòng)Web如此重要,你還沒學(xué)?

點(diǎn)擊或搜索黑馬程序員B站

觀看全集視頻

- 完整配套資料領(lǐng)取方式 -

(視頻+講義+源碼+筆記+資料)

黑馬程序員視頻庫

搜索《2023新版前端基礎(chǔ)入門教程HTML5+CSS3+移動(dòng)Web

0 分享到:
和我們?cè)诰€交談!