第一階段 CSS - TEST 檔案目錄

講義節次範例參考說明練習檔案
1-3, 1-4
1-5, 1-6
  認識 HTML、認識 CSS css001
1-8 範例參考 認識 block、inline、inline-block css002
1-9 範例參考 練習最基本的網頁排版 (排版思維流程第一~三階段) css003
1-12-16   探討 margin 的三心二意 css004
1-9, 1-12-1 範例參考 練習 Flex 彈性框架設計水平中央垂直貼下導覽按鈕 (排版思維流程第四階段) css005
1-9, 1-12-3   練習 Grid 網格佈局排版 (排版思維流程第五階段) 自行挑戰練習 css006
1-10 範例參考 練習 CSS 設計的優先權問題 css007
1-12 範例參考 配合排版 + 練習 CSS3 動態效果設計 css008
1-9, 1-7 範例參考 滑鼠滑入出現提示說明 (下方深藍色區塊) css009


第二階段 JS - TEST 檔案目錄

講義節次範例參考說明練習檔案
2-1 ~ 2-4   認識JavaScript「程式的 3 個基本能力」+「物件的 3 個基本控制」+「function自定函式」 js001
2-4 範例參考 練習 JavaScript 控制顯示現在時間 js002
2-8   認識 jQuery 改良上述範例 js003
2-11 範例參考 練習 jQuery 【內容】的取得與改變 js004
2-12 範例參考 練習 jQuery 【樣式】的取得與改變 js005
2-13 範例參考 練習 jQuery 【規律基礎動畫】的控制 js006
2-13 範例參考 練習 jQuery 【下拉式選單】的設計 js007
2-13 範例參考 練習 jQuery 【折疊式面板】的設計 js008
2-13, 2-14 範例參考 練習 jQuery 【自定動畫】的控制 js009
2-15, 2-14 範例參考 練習 jQuery 全頁的滑動 js010