# 前端課程大綱
大大綱
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相關
- 效能優化相關
Sign in with Wallet
Connect another wallet