自動播放
自動完成
HTML5
Flash
Player
播放速度
上一堂課程
完成並繼續課程
網頁切版直播班 2020 秋季班
2020 VS Code 網頁編輯器、HTML 基礎教學
安裝 Chrome 瀏覽器 (2:15)
安裝 VS Code 編輯器 (3:36)
安裝 VS Code 套件 - 讓介面變成中文化 (4:17)
開始撰寫 HTML (6:27)
撰寫 h1 標籤、 p 段落 (8:11)
CodePen 教學 - 將你的程式碼分享給別人 (4:20)
建立 HTML 環境 (7:40)
HTML 環境語法
Emmet 載入環境語法 (6:29)
插入圖片，了解圖片路徑規則 (8:48)
載入外部圖片方式 (4:30)
在網頁上加上 a 連結標籤 (6:18)
段落 p 與連結 a 的混合應用 (3:08)
認識 ul li 列表標籤 (8:26)
HTML 標籤教學 - 小節作業 (3:55)
2020 CSS 常用語法
HTML 與 CSS 的差異 (3:37)
插入 CSS 檔案，先寫一個 h1 讓文字變色 (5:48)
CSS 寫法詳解介紹 (4:38)
新手常見 CSS 錯誤解析 (9:30)
HTML 標籤選擇器 (5:43)
擬態選擇器 :hover (6:07)
類別選擇器 (13:06)
使用 CSS 優化文字排版 (10:16)
在 HTML 標籤上加入線條 (8:10)
2020 CSS 樣式小節作業
2020 使用 CSS 變更 HTML 標籤特性
網頁容器介紹 (6:50)
CSS Reset - 清空瀏覽器預設樣式 (11:42)
display: block 區塊元素介紹 (12:39)
display: inline 行內元素介紹 (12:15)
display 容器特性 - 區塊跟行內 (5:49)
div 與後代選擇器運用 (14:44)
margin 產生外邊界距離 (11:52)
padding 產生留白距離 (6:17)
margin、padding 投影片介紹 (2:04)
Box Model（盒模型）詳細介紹 (10:54)
margin 0 auto 區塊水平置中 (10:15)
text-align 文字水平調整 (5:16)
2020 優化 CSS 作業小節作業
2020補充教材：不想算盒模型的推擠？試試 CSS3 box-sizing 吧！ (5:18)
課前最終作業一
課前最終作業一提交
Flex 網頁排版技巧
Flex 排版技巧介紹 (4:32)
CodePen 講解 Flex 技巧 (1:47)
Flex 外層屬性 (container) 介紹上集 (11:53)
Flex 外層屬性 (container) 介紹下集 (9:20)
主軸介紹 - 要熟練 Flex ，必修軸線技巧 (2:13)
flex-direction - 決定 flex 軸線 (6:16)
justify-content - 決定主軸對齊方式 (11:45)
設計一個 Flex 並排選單吧！ (8:10)
flex-wrap - 決定換行屬性 (4:29)
align-items - 交錯軸對齊方式 (7:07)
透過 VS Code 插件，開啟一個即時預覽的 Web Server (5:02)
Flex 練習前置作業 (9:26)
Flex 小節作業 (16:50)
Flex 精神時光屋
Flex 裡頭還可以包 Flex - 圖解教學 (9:46)
Flex 裡頭還可以包 Flex - 程式碼開發 (13:34)
Flex column 運用 (7:42)
Markman 軟體教學 (4:23)
Flex 修煉時光屋 (39:33)
Flex 修煉時光屋提交作業注意事項
Flex 修煉時光屋提交與自我檢核
課前最終作業二
課前最終作業二提交
第一週：1 px 也不差的版型控制術
第一週直播錄影檔 - 上半部 (80:31)
第一週直播錄影檔 - 下半部 (71:49)
第二週：Flexbox 網頁排版術
第二週上半部錄影 (56:29)
第二週下半部錄影 (87:28)
第二週補充知識
background 在 html 元素上載入背景圖片，設定寬高 (6:59)
background-repeat：將圖片重複顯示，repeat-x (13:42)
background-color：與背景圖片的混用 (9:24)
background-position：移動 background 的位置 (4:28)
background 縮寫教學 (2:37)
圖片取代文字技巧 - 以logo為例 (7:05)
圖片種類介紹 ( gif、jpg、png ) (10:34)
第三週：RWD 手機版網頁
第三週上半部錄影 (59:53)
第三週中半部錄影 (60:53)
第三週下半部錄影 (62:28)
第三週助教分享（包含前兩週） (63:15)
第三週：補充知識
作業講解 No.1：XD 操作教學 (1:56)
作業講解 No.2：作業斷點設計懶人包 (2:16)
作業講解 No.3：footer 表尾區塊設計 (3:13)
助教分享 (61:11)
第四週 - 多頁式網站
第四週上半部錄影 (82:48)
第四週下半部錄影 (84:21)
第四週：補充知識
Gulp 環境安裝 (上) (5:18)
Gulp 環境安裝 (下) (7:29)
Live Sass Compiler 套件安裝 (8:16)
Gulp 流程操作說明 (7:39)
第四週卡斯伯補充內容上 (71:59)
第四週卡斯伯補充內容下 (41:08)
第五週 - 後台表單設計
第五週上半部錄影 (89:51)
第五週下半部錄影 (72:08)
助教分享 (54:51)
表格與表單設計技巧
認識 HTML 表格 (Table) 標籤 (7:36)
設定表格 (Table) 上的 CSS 樣式 (7:41)
表單 (Form) 簡介 (2:11)
表單三劍客：Form、輸入欄位、Submit (8:07)
使用 label、placeholder 提升表單使用者體驗 (4:49)
表單元素：radio、checkbox (6:16)
表單元素：select、textarea (6:13)
使用 CSS 修改表單 (Form) 樣式 (10:40)
第六週 - 格線系統
第六週錄影上半部(請看前30分鐘即可) (184:04)
第六週錄影中半部 (62:50)
第六週錄影後半部 (83:45)
助教分享 (50:05)
第七週 - 視差滾動
第七週錄影 - 上半部 (94:31)
第七週錄影 - 下半部 (57:40)
額外知識補充：AOS+animate.css 整合 (12:08)
助教分享 (53:35)
第八週 - 大型線上網站
第八週錄影 - 上半部 (93:06)
第八週錄影 - 下半部 (80:55)
助教分享 (62:06)
第七週錄影 - 下半部
課程內容未解鎖
如果您已經購買此課程，
請您重新登入後再查看
.
購買本課程
${ msgBody }
×
${ unreadNoticePageInfo.total }
未讀通知
全部通知
${ notice.body }
${ notice.created.diff }
目前沒有新的通知
${ notice.body }
${ notice.created.diff }
目前沒有通知
提出新問題
${ fixTime } 六角發問系統維護中 ...
維護期間無法發問與回覆問題哦
${ question.user.name }
${ question.question.title }
${ question.question.lecture }
${ question.question.created.diff }
${ question.question.class == 'udemy'? '來自 udemy' : '' }
${ question.question.answer_count }
${ notice.body }
${ notice.created.diff }目前沒有新的通知
${ notice.body }
${ notice.created.diff }目前沒有通知
${ fixTime } 六角發問系統維護中 ...
維護期間無法發問與回覆問題哦
${ question.user.name }
${ question.question.title }
${ question.question.lecture } ${ question.question.created.diff } ${ question.question.class == 'udemy'? '來自 udemy' : '' }