# 使用 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) 的內容以及它的其他功能。
---
**免責聲明**：
本文件已使用人工智能翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於重要資訊，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋概不負責。