10 KiB
使用 vscode.dev 建立履歷網站
當招聘人員要求你的履歷時，你能直接發送一個網址給他們，這是不是很酷？ 😎
目標
完成這個任務後，你將學會：
- 建立一個網站來展示你的履歷
先決條件
- 一個 GitHub 帳戶。如果你還沒有帳戶，請前往 GitHub 註冊。
步驟
步驟 1： 建立一個新的 GitHub 儲存庫，命名為 my-resume
步驟 2： 在你的儲存庫中建立一個 index.html 文件。我們需要在 github.com 上至少添加一個文件，因為空的儲存庫無法在 vscode.dev 中打開。
點擊 creating a new file 鏈接，輸入文件名稱 index.html，然後選擇 Commit new file 按鈕。
步驟 3： 打開 VSCode.dev，選擇 Open Remote Repository 按鈕。
複製你剛剛為履歷網站建立的儲存庫的網址，並將其粘貼到輸入框中：
將 your-username 替換為你的 GitHub 用戶名
https://github.com/your-username/my-resume
✅ 如果成功，你將在瀏覽器中的文本編輯器中看到你的項目和 index.html 文件。
步驟 4： 打開 index.html 文件，將以下代碼粘貼到代碼區域並保存。
負責履歷網站內容的 HTML 代碼。
<html>
<head>
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<title>你的名字在這裡！</title>
</head>
<body>
<header id="header">
<!-- 履歷標題，包含你的名字和職稱 -->
<h1>你的名字在這裡！</h1>
<hr>
你的角色！
<hr>
</header>
<main>
<article id="mainLeft">
<section>
<h2>聯絡方式</h2>
<!-- 聯絡信息，包括社交媒體 -->
<p>
<i class="fa fa-envelope" aria-hidden="true"></i>
<a href="mailto:username@domain.top-level domain">在這裡填寫你的電子郵件</a>
</p>
<p>
<i class="fab fa-github" aria-hidden="true"></i>
<a href="github.com/yourGitHubUsername">在這裡填寫你的用戶名！</a>
</p>
<p>
<i class="fab fa-linkedin" aria-hidden="true"></i>
<a href="linkedin.com/yourLinkedInUsername">在這裡填寫你的用戶名！</a>
</p>
</section>
<section>
<h2>技能</h2>
<!-- 你的技能 -->
<ul>
<li>技能 1！</li>
<li>技能 2！</li>
<li>技能 3！</li>
<li>技能 4！</li>
</ul>
</section>
<section>
<h2>教育背景</h2>
<!-- 你的教育背景 -->
<h3>在這裡填寫你的課程！</h3>
<p>
在這裡填寫你的學校名稱！
</p>
<p>
開始日期 - 結束日期
</p>
</section>
</article>
<article id="mainRight">
<section>
<h2>關於我</h2>
<!-- 關於你的簡介 -->
<p>在這裡寫一段關於自己的簡介！</p>
</section>
<section>
<h2>工作經驗</h2>
<!-- 你的工作經驗 -->
<h3>職位名稱</h3>
<p>
公司名稱在這裡 | 開始月份 – 結束月份
</p>
<ul>
<li>任務 1 - 描述你做了什麼！</li>
<li>任務 2 - 描述你做了什麼！</li>
<li>描述你的貢獻成果/影響</li>
</ul>
<h3>職位名稱 2</h3>
<p>
公司名稱在這裡 | 開始月份 – 結束月份
</p>
<ul>
<li>任務 1 - 描述你做了什麼！</li>
<li>任務 2 - 描述你做了什麼！</li>
<li>描述你的貢獻成果/影響</li>
</ul>
</section>
</article>
</main>
</body>
</html>
將你的履歷細節替換掉 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 的內容以及它的其他功能。
免責聲明：
本文件已使用人工智能翻譯服務 Co-op Translator 進行翻譯。雖然我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於重要資訊，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋概不負責。