## 專題指導 補充

### 2025/03/06

開發時可以用的工具
#### Wappalyzer
- 查看網站的技術
- [Wappalyzer 官網](https://www.wappalyzer.com/)
- [chrome 擴充](https://chromewebstore.google.com/detail/wappalyzer-technology-pro/gppongmhjkpfnbhagpmjfkannfbllamg?hl=zh-TW)
- 範例：
[VuePress](https://vuepress.vuejs.org/)

[BeHance](https://www.behance.net/)


### 開發者工具
- [Chrome 開發人員工具](https://developer.chrome.com/docs/devtools/open?hl=zh-tw)
- 元素 elements
- 樣式 styles
- Computed 計算樣式
- [範例網站](https://www.lccnet.com.tw/lccnet)

### 網站設計

#### 配色：
- [coolors](https://coolors.co/)


##### 找靈感
- [Pinterest](https://www.pinterest.com/search/pins/?q=web&rs=typed)


#### 設計：
- [Figma](https://www.figma.com/)


#### 流程圖
- [Miro](https://miro.com/)
- [Xmind](https://xmind.app/)
- [mindmeister](https://www.mindmeister.com/)

##### 製作簡易圖片
- [Canva](https://www.canva.com/)

### 套件

## vscode 內安裝 code .


- 在 vscode 按 `Command Shift + P`(mac) or `Ctrl Shift + P`(windows)

- 出現如上述圖片的工具列後，輸入：

Shell Command: Install 'code' command in PATH

- 按 Enter or 點擊 `殼層命令:
在 PATH 中安裝'{0}' 命令`

- 完成後開啟終端機， 輸入 `code .`，即可在所在資料夾開啟 VScode

- `code .` 指令含義：
- `code` 是 VS Code 的命令列工具
- `.` 代表目前所在的資料夾

輸入以上指令會執行以下的事：
- 把 code 命令安裝到系統的 PATH 中
- 讓你可以在 終端機 直接執行 code 指令來開啟 VS Code

#### 出現問題
以下指令皆是在 **終端機** 執行
##### 強制讓 code 可以被執行

$ sudo chmod +x /usr/local/bin/code

指令說明：
1. `sudo`（Super User DO）：用「管理員（root）」權限來執行該指令。因為 /usr/local/bin/ 目錄通常需要管理員權限來修改。
2. `chmod`（Change Mode）：修改檔案的權限。
3. `+x`（加上可執行權限）：讓 code 這個檔案可以被執行（執行程式）。
4. `/usr/local/bin/code`：這是 VS Code 的命令行執行檔案，它的作用是讓你可以在終端機使用 code . 來打開 VS Code。

##### 刪除 code 指令
- 如果還是有錯誤，可以刪除 code 指令再重新從第一步開始

$ sudo rm -f /usr/local/bin/code

##### 確認 code 有無安裝
- 可以使用指令，看看目前的 code 有無安裝

$ code --version

### VScode 指令
- [mac](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf)
- [windows](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf)
- 來源 [VScode Docs](https://code.visualstudio.com/docs/editor/keybindings)

# 0311

# F2E02 前端應用開發工程師實戰養成班（專題指導補充）
## 目錄
- [F2E02 前端應用開發工程師實戰養成班（專題指導補充）](#f2e02-前端應用開發工程師實戰養成班專題指導補充)
- [目錄](#目錄)
- [HTML 表格秘訣](#html-表格秘訣)
- [GitHub 基礎介紹](#github-基礎介紹)
- [GitHub 特色](#github-特色)
- [經營自己的 LeetCode 介面](#經營自己的-leetcode-介面)
- [在 GitHub 建立 README](#在-github-建立-readme)
- [Pinned Repositories，放上完整的作品](#pinned-repositories放上完整的作品)
- [GitHub 基本操作](#github-基本操作)
- [建立 SSH 連線](#建立-ssh-連線)
- [GitHub SSH 連線設定](#github-ssh-連線設定)
- [透過 GitHub 網頁介面建立倉庫](#透過-github-網頁介面建立倉庫)
- [create repository](#create-repository)
- [create a new respository](#create-a-new-respository)
- [本地端初始化 git 指令](#本地端初始化-git-指令)
- [提交 (Commit) 與推送 (Push)](#提交-commit-與推送-push)
- [Git clone](#git-clone)
- [版本控制與分支 (Branch)](#版本控制與分支-branch)
- [GitHub 團隊協作](#github-團隊協作)
- [GitHub Actions 自動化（進階）](#github-actions-自動化進階)
- [可以試著做看看](#可以試著做看看)

## HTML 表格秘訣
- 先畫大輪廓再處理細節
- 大輪廓：`<table>` > `<thead>`> `<tfoot>`> `<tbody>`
- `<tr>`（垂直列） 包 `<td>` or `<th>`
- 由上往下數，直的有幾行，就有幾個 `<tr>`
- 水平合併 `colspan`
- 垂直合併 `rowspan`

## GitHub 基礎介紹

- [GitHub](https://github.com/) 是一個線上軟體程式代管服務平台，用於公開程式或軟體的代碼，使用Git作為版本控制軟體，允許開發者和團隊一同管理和開發軟體專案。

## GitHub 特色
- 類似軟體界的 Instagram + LinkedIn
- 為開源專案貢獻、促進團隊合作
- 展示你的專案或能力
- 查找新技術、文件

## 經營自己的 LeetCode 介面

### 在 GitHub 建立 README
1. 在 GitHub 上創建一個與你的用戶名完全相同的Repo。
2. Repo必須公開。
3. 在Repo中創建一個 README.md 文件。
4. 編輯 README.md 文件，加入你想展示的內容。
5. 提交並推送變更。

## GitHub 自我介紹參考
[awesome-github-profile-readme-chinese
](https://github.com/eryajf/awesome-github-profile-readme-chinese)

[awesome-github-profile-readme](https://github.com/abhisheknaiidu/awesome-github-profile-readme?tab=readme-ov-file)

### Pinned Repositories，放上完整的作品

## GitHub 基本操作
- 請先註冊 GitHub 帳號
### 建立 SSH 連線

# GitHub SSH 連線設定
- SSH or HTTPS

### 透過 GitHub 網頁介面建立倉庫
## create repository

## create a new respository
- Public vs. Private

## 本地端初始化 git 指令

$ git init
$ git remote add origin <repo-url>

## 提交 (Commit) 與推送 (Push)

$ git add .（將變更加入暫存區）
$ git commit -m "描述這次變更"
$ git push origin main（推送到遠端）

## Git clone

$ Clone 倉庫到本地端
$ git clone <repo-url>

## 版本控制與分支 (Branch)
- 為什麼要使用分支？
- git branch feature-new
- git checkout feature-new / git switch feature-new
- git merge feature-new
- git pull 更新遠端內容

## GitHub 團隊協作
- Issues & Project Board
- 修改後發送 Pull Request (PR)
- Code Review
- 如何審查程式碼、留言、建議修改

## GitHub Actions 自動化（進階）
- 設定 CI/CD（持續整合/部署）
- 自動測試與部署

## 可以試著做看看
- 申請 GitHub帳戶、更新簡介
- 建立倉庫、本機連線、提交變更、Push
- 模擬團隊開發流程：
- 建立分支、新增功能、提交 PR、合併