我們將從今天的課程開始帶大家一步一步完成互動式的個人履歷網站。
首先，在桌面（或任何你喜歡的位置）創建資料夾 full-stack-intro。接著，在 VS Code 開啟這個資料夾，並新增 index.html、style.css、script.js 檔。現在的畫面看起來應該像這樣：
full-stack-intro
打開 index.html 檔，輸入 ! 並按 Enter，就會自動出現預設的架構：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
接下來我們進行一些初始的設定：將預設語言改成中文、修改網頁的顯示名稱、加入 Favicon 並引入 style.css 和 script.js 檔。
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Resume Website</title>
<link rel="icon" type="image/png" href="favicon.png">
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="script.js"></script>
</body>
</html>
<aside> 📌
Favicon
Favicon 是 favorites icon 的縮寫，是與某個網站或網頁相關聯的圖示。
What is a Favicon? & How to Make a Favicon for Your Website
</aside>
另外有一點需要注意，目前的專案會有預設的 CSS 在 style.css 內，有時候會讓網頁呈現的結果和我們預期的不同、或容易找不到錯誤在哪，所以可以先在 style.css 設定幾個屬性讓我們之後的開發過程更加順利：
* {
margin: 0;
padding: 0;
}
<aside> 📌
NOTE
* 是通用選擇器（Universal Selector），代表選取所有元素。
</aside>
這樣就可以讓我們的程式不會有預設的 margin 和 padding，呈現的結果可以和預期的一致。