---
# System prepended metadata

title: 前端課程大綱

---

# 前端課程大綱


大大綱

1. HTML+CSS
2. javascript
3. react


## HTML+CSS

### 1.認識html基礎標籤 + 開發環境

- VS Code 與 Live Server 擴充功能
- HTML 是什麼？與瀏覽器的關係
- 基本結構：<!DOCTYPE html>、<html>、<head>、<body>
- 常見標籤介紹與使用
- img src & lorem
- 巢狀結構與語意化標籤概念
- 帶入DOM Tree觀念
- 標籤與SEO、爬蟲的關係

練習:筆記常用標籤
    
[day 1  筆記](https://hackmd.io/@YYT4N8b5ROyVhjdGbxNqPA/Sk-ocZTExg)
    
### 2.CSS 基礎

- CSS 是什麼？與 HTML 的關係
- 常用屬性介紹(margin padding color )
- 尺寸計算
- 三種寫法：inline、internal、external
- 選擇器基礎（element, class ., id #)
- 顏色單位（Hex, RGB, HSL）
- CSS 優先順序與繼承
- 使用 Chrome 開發者工具查看樣式與除錯
    
練習: 按照設計寫出網頁

[day2筆記](https://hackmd.io/@YYT4N8b5ROyVhjdGbxNqPA/H1GDkXaEeg)

### 3.盒模型


- Box Model 介紹
- 教你用chrome dev tool 看盒模型
- 顯示模式（block, inline, inline-block, none）
- display: flex 基礎 主軸/交錯軸（row/column）
- 對齊（justify-content, align-items）
- position 屬性介紹（static, relative, absolute, fixed）
- z-index 與圖層控制
- 提一嘴grid

    
練習: flex小遊戲

[day3筆記](https://hackmd.io/@YYT4N8b5ROyVhjdGbxNqPA/HJuoX_yrle)

### 4.基礎排版
- 切版開發示範
- 應題目要求排版
- 小型專案實作（靜態個人簡介頁、產品介紹頁）
-  作品提案範例：
> 食譜頁面
>電影介紹頁
>自我介紹卡片
>線上履歷頁（含聯絡表單、圖片、RWD）

[day4筆記](https://hackmd.io/@YYT4N8b5ROyVhjdGbxNqPA/BJxfkakSll)
    
### 5. RWD & animation
    
- Media Query 與響應式設計基礎
- transition、animation
- CSS 狀態控制（:hover, :active, :focus）
    
練習:設計小動畫 & PC/mobile兼容版面


## JavaScript

### 1.開發環境 + 基本概念講解

- 下載nodeJS + prettier排版工具設定
- JS 的執行環境（瀏覽器、Node）
- 事件驅動、非同步與單執行緒簡介（Event Loop 概念入門）
- var / let / const、bool、object、array
- 瀏覽器中的 window、全域 vs 區域變數
- JS 和其他語言（如 C、Java）的差異（如型別鬆散、非同步處理方式）

練習: 最愛的BMI計算機 OK吧
    
### 2.DOM API

- DOM 是什麼？DOM Tree 是如何構成的？
- 常用 DOM API：
>querySelector, getElementById, innerText, innerHTML
>.style, .classList.add/remove/toggle
- 陣列操作搭配 DOM push, splice, map, forEach
- addEventListener、event object
- 常見事件：click、submit、keyup
- 表單控制與資料讀取（input.value）

練習:TO-DO list

### 3. fetch data 

- fetch function
- 非同步call API async/await & promise 
- JSON parse
- localStorage 操作

練習:配合外部資料開發 


### 4. 配合CSS開發像樣的app(Optional)
    
## React
 
### 1.開發環境 + 基礎介紹
- 介紹npm + package.json
- 為什麼需要 React？SPA 與傳統網頁的差別
- 組件化（Component-based）思想簡介
- 使用 Vite 或 CRA 建立 React 專案
- 基礎專案架構&開發流程
- JSX 語法介紹與和 HTML 的差異
- css樣式寫法

練習：
建立一個 HelloWorld Component
練習多個元件組裝成一個頁面

### 2.Component & Props & States

- 名詞解釋
- useState狀態控制簡單例子:Counter、Switch開關
- 條件渲染 & 列表渲染

練習:水果列表、counter

### 3.useEffect 與副作用
    
- useEffect 的觸發時機
- 依賴陣列（dependency array）
- 初始載入、狀態變化、清除函式
- 搭配 fetch 做資料取得

練習：
頁面載入後自動抓時間或 IP
載入一段 API 資料（ex: JSONPlaceholder）
    
### 4.小專案開發
    
專案建議：
Todo App
天氣查詢頁
小型留言板
註冊/登入頁 UI
    
### 可延伸 (Optional)

- redux狀態控制
- axios(取代fetch)
- react router
- TypeScript(更安全的型別控制)
- style不同寫法(tailwindCSS、MUI、Boostrap)
- nextJS
- jest 測試框架
- framer motion、animeJS動畫套件
- threeJS/WebGL 3D模型
- SEO相關
- 效能優化相關
