# 使用 vscode.dev 建立履歷網站
_當面試官要求你的履歷時，你能直接給他一個網址，這是不是很酷？_ 😎
## 目標
完成這個作業後，你將學會：
- 建立一個網站來展示你的履歷
### 先決條件
1. 一個 GitHub 帳號。如果你還沒有帳號，請前往 [GitHub](https://github.com/) 註冊。
## 步驟
**步驟 1：** 建立一個新的 GitHub 儲存庫，命名為 `my-resume`
**步驟 2：** 在你的儲存庫中建立一個 `index.html` 檔案。我們需要在 github.com 上新增至少一個檔案，因為空的儲存庫無法在 vscode.dev 中開啟。
點擊 `creating a new file` 連結，輸入檔案名稱 `index.html`，然後選擇 `Commit new file` 按鈕。
**步驟 3：** 開啟 [VSCode.dev](https://vscode.dev)，選擇 `Open Remote Repository` 按鈕。
複製你剛剛為履歷網站建立的儲存庫網址，並將其貼到輸入框中：
_將 `your-username` 替換為你的 GitHub 使用者名稱_
```
https://github.com/your-username/my-resume
```
✅ 如果成功，你將在瀏覽器中的文字編輯器看到你的專案和 `index.html` 檔案。
**步驟 4：** 開啟 `index.html` 檔案，將以下程式碼貼到你的編輯區域並儲存。
HTML 程式碼負責履歷網站的內容。
你的名字在這裡！
教育背景
在這裡填寫你的課程！
在這裡填寫你的學校！
開始日期 - 結束日期
工作經歷
職位名稱
公司名稱在這裡 | 開始月份 – 結束月份
- 任務 1 - 描述你做了什麼！
- 任務 2 - 描述你做了什麼！
- 描述你的貢獻成果/影響
職位名稱 2
公司名稱在這裡 | 開始月份 – 結束月份
- 任務 1 - 描述你做了什麼！
- 任務 2 - 描述你做了什麼！
- 描述你的貢獻成果/影響
將你的履歷細節替換掉 HTML 程式碼中的 _佔位文字_。
**步驟 5：** 將滑鼠移到 My-Resume 資料夾上，點擊 `New File ...` 圖示，並在專案中建立兩個新檔案：`style.css` 和 `codeswing.json`。
**步驟 6：** 開啟 `style.css` 檔案，將以下程式碼貼上並儲存。
CSS 程式碼負責網站的版面設計。
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 16px;
max-width: 960px;
margin: auto;
}
h1 {
font-size: 3em;
letter-spacing: .6em;
padding-top: 1em;
padding-bottom: 1em;
}
h2 {
font-size: 1.5em;
padding-bottom: 1em;
}
h3 {
font-size: 1em;
padding-bottom: 1em;
}
main {
display: grid;
grid-template-columns: 40% 60%;
margin-top: 3em;
}
header {
text-align: center;
margin: auto 2em;
}
section {
margin: auto 1em 4em 2em;
}
i {
margin-right: .5em;
}
p {
margin: .2em auto
}
hr {
border: none;
background-color: lightgray;
height: 1px;
}
h1, h2, h3 {
font-weight: 100;
margin-bottom: 0;
}
#mainLeft {
border-right: 1px solid lightgray;
}
**步驟 6：** 開啟 `codeswing.json` 檔案，將以下程式碼貼上並儲存。
{
"scripts": [],
"styles": []
}
**步驟 7：** 安裝 `Codeswing extension` 來在程式碼區域中預覽履歷網站。
點擊活動欄上的 _`Extensions`_ 圖示，輸入 Codeswing。點擊展開活動欄上的 _藍色安裝按鈕_ 或在選擇擴展後出現的安裝按鈕來安裝。安裝完成後，觀察你的程式碼區域，看看專案的變化 😃
安裝擴展後，你的螢幕上會看到以下內容。
如果你對所做的更改感到滿意，將滑鼠移到 `Changes` 資料夾上，點擊 `+` 按鈕來暫存更改。
輸入提交訊息 _(描述你對專案所做的更改)_，然後點擊 `check` 提交更改。完成專案後，選擇左上角的漢堡選單圖示返回 GitHub 上的儲存庫。
恭喜 🎉 你已經在幾個步驟內使用 vscode.dev 建立了你的履歷網站。
## 🚀 挑戰
開啟一個你有權限修改的遠端儲存庫，更新一些檔案。接著，嘗試建立一個包含更改的新分支並發起 Pull Request。
## 回顧與自學
閱讀更多關於 [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) 的內容以及它的其他功能。
**免責聲明**：
本文件已使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們努力確保翻譯的準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵信息，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋不承擔責任。