一、前端開發概述
前端開發指的是使用者介面（UI）與體驗（UX）的實作，透過 HTML、CSS、JavaScript 以及各種開發工具、框架，打造可互動、美觀且高效的網站畫面。

二、前端開發工具分類
• 編輯器與 IDE：如 Visual Studio Code、Sublime Text，用於撰寫與除錯程式碼。
• 版本控制工具：如 Git、GitHub，用於版本追蹤與協作。
• 瀏覽器開發工具：如 Chrome DevTools，用於即時除錯與效能分析。
• 建構與打包工具：如 Webpack、Vite，用於壓縮與打包網站資源。
• UI 框架與 CSS 工具：如 Bootstrap、Tailwind CSS，用於快速排版與設計。
• JavaScript 框架：如 React、Vue.js，用於建立動態網頁應用。

三、主要工具介紹與實作範例

1. Visual Studio Code (VS Code)
   VS Code 是由微軟開發的免費開源程式編輯器，支援多語言與擴充套件。
   💡 常用擴充套件：Live Server、Prettier、ESLint、Auto Rename Tag。

2. Git / GitHub
   Git 用於追蹤程式版本，GitHub 是遠端代管平台。
   常見指令：
   • git init　# 初始化專案
   • git add .　# 加入修改
   • git commit -m 'initial commit'　# 提交版本
   • git push origin main　# 推送至遠端

3. React / Vue.js
   React 與 Vue 是目前主流的前端框架，用於建立動態應用。
   React 範例：

import React from 'react';
function App() {
return Hello React!;
}
export default App;