# 使用 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 擴展` 以在代碼區域中預覽履歷網站。
點擊活動欄上的 _`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) 進行翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。應以原始語言的文件作為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們對因使用此翻譯而產生的任何誤解或錯誤解讀概不負責。