---
title: "[企劃書]20260326-零基礎打造自己的網站 : HTML × Tailwind CSS 網頁前端入門"
tags:
- 企劃書
- 114學年
---

- [x] 企劃書審核：~~核心能力需修改~~
- [ ] 系統申請
- [ ] 檔案下載 & 修改
- [ ] 檔案列印
- [ ] 企劃書繳交

# 20260326-零基礎打造自己的網站 : HTML × Tailwind CSS 網頁前端入門

**活動名稱：** `零基礎打造自己的網站 : HTML × Tailwind CSS 網頁前端入門`
**起止時間：** `115/03/26 18:30 ~ 115/03/26 21:00`
**活動地點：** `電機大樓 200 教室`
**參加人數：** `30`
**主辦單位：** `大同大學科學開源服務社`
**活動對象：** `本社社員、幹部`
**講師：** `余萬崧`

#### 核心能力

- [x] 問題解決： 分析網頁製作過程中的排版與結構問題，學習調整與除錯能力
- [x] 思維創新： 設計個人風格的網頁版型，發想不同的視覺與內容呈現方式
- [x] 關懷回饋： 透過作品分享與交流，給予彼此建議並優化網頁設計
- [x] 團隊合作： 與同學互相協助完成實作練習與問題排除
- [x] 反思探索： 理解前端開發流程與網頁設計思維，培養自主學習能力

**申請人所屬社團:** `大同大學科學開源服務社`

#### 活動緣起

許多同學想學習網頁設計，卻常被繁雜的技術與框架嚇退。本活動以 HTML 與 Tailwind CSS 為入門核心，從網頁基本結構與排版概念開始，帶領社員理解現代前端開發流程，並透過實作建立屬於自己的網頁版型。課程強調「快速看到成果」，讓學員在短時間內完成具有設計感的頁面，建立學習動機與成就感。

#### 活動目的

1. 建立網頁開發的基礎觀念與流程
2. 教社員們理解 HTML 結構與語意化標籤
3. 學習使用 Tailwind CSS 快速完成版面設計
#### 活動目標

1. 讓社員了解 HTML 與 CSS 在網頁中的角色
2. 讓社員掌握基礎排版與 RWD 響應式概念
3. 讓社員能夠獨立完成一個簡單的個人網頁頁面
#### 活動簡介

<!-- > 活動的簡介、放 KKTIX 表單上的。在撰寫時務必要考量到行銷需求。 -->

想學做網站卻不知道怎麼開始？本課程將帶你從 HTML 結構開始，理解網頁是如何被建構出來，再透過 Tailwind CSS 快速打造具有現代感的版面設計。透過大量實作，你將在短時間內完成屬於自己的網頁作品，理解現代前端開發的基本流程與思維。

#### 活動內容

> 活動流程簡述 + 活動時程表

1. 18:30~18:50 開場閒聊、需求調查、設置環境
* 介紹開發工具：Visual Studio Code
* 瀏覽器開發者工具簡介
* 建立第一個 HTML 網頁
2. 18:50~20:50 正式社課
* 介紹 HTML 基礎結構
* html、head、body
* 常見標籤：div、p、img、a、button
* 語意化標籤：header、nav、main、section、footer
* 網頁排版基本觀念
* 區塊與行內元素
* 基本排版邏輯
* Tailwind CSS 入門
* 什麼是 Utility-first CSS
* 常用 class：padding、margin、color、font
* Flexbox 排版
* 響應式設計（RWD）
* 實作時間
* 建立個人介紹頁面
* 製作卡片式版型
* 製作簡單首頁 Layout
3. 20:50~21:00 填寫回饋表單

#### 活動預期效益

<!-- > 分別條列說明活動辦完達成目標後，對 **個人**、**社團**、**學校**、**社會** 等產生之預期效益。 -->

* 對個人：建立網頁開發基礎，理解 HTML 結構與 Tailwind CSS 排版方式，具備製作簡單網頁的能力。
* 對社團：提升社員前端開發能力，為後續 JavaScript 或框架課程奠定基礎。
* 對學校：提供學生實務型數位技能，增加跨領域學習機會。
* 對社會：培養具備基礎網頁製作能力的人才，符合數位時代需求。