VS Code介面簡介
如果還未安裝VS Code，請到官網下載（https://code.visualstudio.com/）。安裝後，請在桌面上開設一個新資料夾，命名為「next-train-panel」。
然後打開VS Code，會看見Start下方有一行「Open Folder」（下圖黃圈），按一下選取你剛才在桌面的「next-train-panel」資料夾。
開啟後，左邊會多了一個資料夾顯示工具（Explorer），如果沒有出現的話，請在側目錄按下第一個按鍵（下圖紅圈）。
然後我們在資料夾工具中按開新檔案的按鍵（下圖橙圈），分別開設index.html、index.js、index.css三個檔案。
修改HTML檔
按回「index.html」這個檔案，然後在右邊的編輯器中，輸入html，VS Code會有自動彈出提示功能列表，按下「html:5」這個選項。神奇的事發生了！偉大的VS Code把<head>和<body>都幫我們寫好了！（這個就是VS Code都好處，它會自動提示，發現有錯誤也會提醒。）
<head> 的部份，我們看到<title>Document</title>，把Document 改成你心愛的標題，然後按Ctrl+S 儲存。再到「next-train-panel」資料夾，打開index.html，看一下網頁上方的標題是否已經跟你所改的一樣？
連結CSS、JS檔 及 DevTools檢查
CSS、JS兩個檔案，現時和HTML檔完全分開，我們需要在HTML 輸入一些指令讓它們連在一起。
CSS的話請在</head>的上一行，輸入
<link href=”index.css” rel=”stylesheet”>href 指向的是 css 的所在位置，rel 所指的是檔案類別
JS檔的連結，在</body>的上一行，輸入
<script src=”index.js”></script>src 指向的是javascript 檔的所在位置
然後回到剛才打開了index.html的瀏覽器，在頁面空白位置按右鍵，選擇Inspect（檢查），打開DevTools （開發者工具），選擇Network（網絡）。
按下F5重新載入頁面，應該會看到index.html、index.js和index.css也順利載入。
如果沒有的話，就要重新檢查一下三大常現錯誤：
- 連結的檔案名稱有沒有寫錯？例如 href=”index.css” 和src=”index.js”
- 有沒有漏寫什麼？例如 rel=”stylesheet”
- 是不是還未儲存檔案？
[教學] JavaScript！學寫港鐵到站時間網頁系列
#1-安裝VS Code (前往）
#2-Chrome開發者工具 (前往）
#3-連結HTML、JS及CSS檔(前往)
#4-利用JS更改HTML(前往)
#5-什麼是API？(前往)
作者的話 (可以略過)「我要控制科技，而不是被科技控制我！」感謝您看我的文章。
我原本是一個新聞記者，但年近30，開始感到迷惘。
於是報讀了Coding Bootcamp，3個多月成功轉職「軟件工程師」。很多朋友問我到底難不難？
我嘗試運用記者經驗，將問題深入淺出，簡短地讓沒有經驗的你，感受一下Programming適不適合自己。另一個目的，我希望累積教學經驗。
日後有手足要幫忙，我可以幫到。
即使沒有財力開公司請人，也希望授之以漁。
所以有問題請留言，我也希望知道自己哪裏講得不夠好。▲▲香港 時代▲▲