前端應用開發工程師實戰養成班（第 3 梯次）HTML & CSS & RWD 上課進度

10/01 下午進度

• HTML . CSS 簡介與工具安裝 (講義 p4~p22)
• HTML 基本結構與標籤介紹 (講義 p23~p26)

10/02 今日進度

• HTML 基本結構與標籤介紹 (講義 p26~p29)
• HTML 語意化標籤與標籤介紹 (講義 p30~p55)
  • 內容分區
  • 文本內容
• vscode 打多個標籤快捷鍵 (講義 p49)
• HTML 標頭介紹 (講義 p120~p128)
• CSS 三種引入方式

10/03 今日進度

• CSS reset (講義 p129~p130)
• HTML 表格內容 (講義 p78~p91)
• VS Code 常見快捷鍵
• CSS class & id 選取
• CSS class & id 命名方式 (講義 p134~p137)

作業

• 小學課表

10/14 上午進度

• HTML 內嵌文本語義 (講義 p56~p66)
• HTML img 標籤 (講義 p68)
• 元素類型 inline & block (講義 p119)
• 課表作業 code review

10/15 今日進度

• 課表問題討論
• 圖片和多媒體 (講義 p67~p73)
• 內嵌內容 (講義 p74~p77)
• 表單 (講義 p92~p110)

作業

• Google 表單

10/23 今日進度

• 表單作業 code review
• HTML 交互元素 (講義 p111~p113)
• CSS 絕對單位. 相對單位 (講義 p131~p133)
• CSS width. height (講義 p176)
• CSS 容器尺寸 (講義 p178~p181)

10/29 今日進度

• HTML 其他標籤 (講義 p114~p117)
• CSS 選取器 (講義 p138~p157)

練習

• CSS 選取器遊戲
• files/ex01.html~ex20.html

10/31 今日進度

• CSS 屬性兼容 (講義 p158)
• CSS 文字.背景 (講義 p159~p157)
• CSS Float (講義 p182~p183)

練習

• float 練習

11/05 今日進度

• float 練習解說
• CSS 邊框.外框 (講義 p168~p173)
• CSS Display (講義 p184~p188)

回家作業

• inline 11/14 交

11/07 今日進度

• CSS 最大最小寬高 (講義 p176)
• CSS Display flex (講義 p188~p191)
• CDN Font Awesome

練習

• flex 青蛙遊戲
• 104 適合你的好公司

11/12 今日進度

• CSS 其他常用 (講義 p174~p175)
• CSS flex 104 卡片練習
• CSS position relative & absolute (講義 p192~p194)

11/14 今日進度

• CSS position fixed & sticky (講義 p192~p194)
• CSS transform (講義 p195~p196)
• CSS 三角形 (講義 p199)
• CSS 偽元素 (講義 p198~p200)

11/19 今日進度

• CSS transition (講義 p201~p204)
• CSS grid (講義 p211~p220)
• CSS position static

回家作業

• 易遊網 (焦點話題、日本跟團、寶島必玩) 11/26 交

11/21 今日進度

• RWD 百分比切版 (講義 p3~p5)
• RWD 介紹 + 斷點規劃 (講義 p6~p17)
• nav 選單切版
• RWD 漢堡選單(1)

11/26 今日進度

• 易遊網作業 code review
• RWD 漢堡選單(2)
• RWD 手切格線

11/28 今日進度

• HTML a 錨點
• Bootstrap
• Tailwind
• CSS animation