Skip to content

習作與展示

基於您提供的五天課程框架，以下是為 HTML5、CSS3 和 SCSS 設計的習作與展示計劃：

第一天：HTML5 基礎與結構

  • 習作主題：HTML5 頁面結構和基礎元素
  • 內容：
    • 學習 HTML5 基本頁面結構，包括 <doctype>, <html>, <head>, 和 <body>。
    • 實踐使用各種 HTML5 標籤，如標題 (<h1>-<h6>), 段落 (<p>), 鏈接 (<a>), 圖片 (<img>), 以及列表 (<ul>, <ol>, <li>)。
    • 創建一個簡單的 HTML5 頁面，展示基本的文本格式化和結構安排。

第二天：CSS3 樣式與佈局

  • 習作主題：應用 CSS3 進行頁面樣式設計
  • 內容：
    • 學習基本的 CSS3 屬性，包括顏色、字體、邊距、填充、對齊等。
    • 探索 CSS3 的盒模型，了解如何使用邊距（margin）和填充（padding）控制元素。
    • 為第一天創建的 HTML5 頁面添加 CSS3 樣式，實現基礎的視覺效果。

第三天：SCSS 變數與嵌套

  • 習作主題：使用 SCSS 提高 CSS 編寫效率
  • 內容：
    • 學習 SCSS 的基本概念，包括變數、嵌套、混合（mixins）和繼承。
    • 實踐使用 SCSS 變數來定義顏色、字體大小等。
    • 修改第二天的 CSS 樣式，採用 SCSS 進行重構，體驗 SCSS 帶來的便利。

第四天：RWD 設計與 SCSS 混合

  • 習作主題：創建 RWD 網頁布局
  • 內容：
    • 學習 RWD 設計的基礎，包括 Media Queries 和 Fluid Layout。
    • 使用 SCSS 混合來處理常見的 RWD 設計模式。
    • 為現有的 HTML5 頁面添加 RWD 功能，確保在不同裝置和螢幕尺寸下均具有良好展示。

第五天：結訓展示

  • 習作主題：綜合運用 HTML5、CSS3 和 SCSS 完成項目
  • 內容：
    • 結合所學的 HTML5、CSS3 和 SCSS 技術，完成一個完整的網頁項目。
    • 項目應包含多個頁面，並展示格式化的內容、自定義樣式和 RWD 設計。
    • 進行項目的展示，詳細介紹所運用的技術和實現的功能。