Visual Studio Code とChromeを使って勉強することにする。
Visual Studio Codeを使うことでコードの補完機能などを利用して効率的にすすめる。

launch.json

launch.json
{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            // デバッグ設定の名称
            "name": "Launch local file",
            // デバッグ種別を指定（chrome/node/monoなど）
            "type": "chrome",
            // lanunchまたはattachを指定
            "request": "launch",
            // 読み込むHTMLファイルを指定（プロジェクトからのパスを指定）
            "file": "${workspaceRoot}/index.html"
        }
    ]
}

body要素の最後に記述する。
以前はheadに記載していたが、表示速度の向上目的からbodyの最後に記述するのが現在の主流。