HTML5、CSS 與 SCSS 課程簡介

課程目標

本課程旨在裝備新進前端工程師以 HTML5、CSS 和 SCSS 的基礎知識與應用技能。參與者將學習如何創建響應式網頁設計，並瞭解最佳實踐和最新的網頁開發技術，特別是在製作報表方面的應用。課程還包括如何在 Visual Studio Code 中有效利用相關擴展，進行網頁預覽，以及透過瀏覽器檢視和測試網頁效果。

學習重點

• HTML5：

  • 瞭解和應用 HTML5 新增的語義標籤（Semantic Tags）。
  • 掌握表格（Tables）、列表（Lists）和表單（Forms）元素。
  • 學習使用 CSS3 和 JavaScript 技術來增強報表的互動性。

• CSS：

  • 掌握 Box Model、定位（Positioning）和浮動（Floating）概念。
  • 學習使用 Flexbox 和 Grid 進行佈局設計。
  • 瞭解響應式設計（Responsive Design）原則和媒體查詢（Media Queries）。

• SCSS：

  • 學習 SCSS 變量（Variables）、混合（Mixins）和函數（Functions）的基本用法。
  • 掌握巢狀語法（Nested Syntax）和模塊化 CSS（Modular CSS）的概念。
  • 瞭解如何優化 SCSS 和組織 CSS 代碼。

• VS Code 工具和擴展：

  • 推薦使用的 VS Code 擴展，例如 Live Sass Compiler、Prettier。
  • 學習如何使用 VS Code 的即時預覽和以瀏覽器來檢視結果。

習作與練習

• 基礎習作：

  • 使用 HTML5 創建一個包含標題、段落、圖片和表格的簡單頁面。
  • 使用 CSS 為該頁面添加樣式，包括顏色、字體和佈局。

• 進階練習：

  • 設計一個響應式網頁，運用媒體查詢調整不同設備的顯示效果。
  • 利用 SCSS 創建一個風格一致的網頁，包括顏色主題和可重用的樣式。

• 專門練習：

  • 創建一個包含複雜數據和互動元素的動態報表。
  • 使用進階 HTML5 和 CSS 技術來增強報表的功能和外觀。

展示與討論

• 參與者將展示他們的練習和專門項目，特

別是報表的實現，並分享他們的設計過程和學習心得。 - 進行小組討論，探討不同的報表設計選擇和實現方法。

通過本課程，新進前端工程師將建立堅實的 HTML5、CSS 和 SCSS 基礎，並學習如何在專業的開發環境中運用這些技能，特別是在報表設計和開發方面，為他們在前端開發領域的職業生涯做好準備。