左がWindows用、真ん中がLinux用、右がMac用のダウンロードボタンとなりますので、今回はWindows用をクリックします。（赤枠で囲ったボタンです）

ダウンロードが完了したら、このような画面になります。画面右上にポップアップが出ますので、「ファイルを開く」をクリックします。

セットアップ画面が表示されますので、画面に従って設定していきます。
VS Codeを頻繁に使う場合は、デスクトップにアイコンを設定しても良いかも知れません。

インストール完了で、VS Codeのウェルカムページが開きます。
この時点では、中身が全て英語表示になっていますので、日本語に変換する拡張機能を追加します。

①左側のアイコン「拡張機能」をクリック
②検索欄に「日本語」と入力し、「Japanese Language Pack」を選択
③「Install」をクリック

インストールが完了すると画面の右下あたりにポップアップが出ますので、「Cange Language and Restart」をクリック

これで日本語表記に変更されます！（上手くいかない場合は再起動してみます）

拡張機能は、VS Codeをより快適に操作するための便利機能になります。
構文チェック機能（コーディングの際に間違えてるところを教えてくれる）など色々ありますので必要に応じてインストールしてもよいかも。

デスクトップに新しいフォルダーを作成。このフォルダに作成したデータを保存していきます。
デスクトップ上のフォルダ名を適当に名付けます。「colorApp」とか、自分で分かりやすい名前です。
そして、このフォルダにHTML・CSS・JavaScript・画像などを保存していきますが、どこに保存するか分かりやすくするため、フォルダ内にさらにフォルダを作成します。

CSSは「css」
Javascriptは「js」
イメージ画像は「images」　　としておきます。
これで、どれがどこに保存してあるか分かるようにします。
HTMLについては、今回はこのフォルダ直下に保存する事にしました。

左側のアイコン「エクスプローラー」をクリックし、
「フォルダーを開く」ボタンをクリックし、先ほど作成したデスクトップのフォルダを選択すると、VS Codeにフォルダが紐づけできます。
※信頼できるフォルダですか？的な事を聞かれます

①画面左上の「ファイル」をクリック→「新しいテキストファイル」をクリック
　→「Untitled-1」というファイルが作成されます。
②再度「ファイル」をクリックし、「名前を付けて保存」を選択

ファイル名がテキストタイプになっていたりしますので、html形式にします。
ファイル名は「colorchecker」にして、ファイルの種類から「HTML」を探し出してクリックします。
※ちなみに、CSSファイルを作成するときは「CSS」、Javascriptファイルの時は「JavaScript」を探して選びます

保存をクリックで、HTML形式のファイルが無事作成されます。
もっとボリュームのあるアプリだともう少し考えないといけませんが、今回は1ページアプリなのでこのくらいお気楽な感じです。

【補足】　保存フォルダですが、初期設定ではこんな表示になる事があります。

先ほど作成した「colorchecker.html」ファイルですが、拡張子が表示されないので本当にhtmlファイルなのか直ぐに確認できません。
拡張子が表示されるよう、設定を変更しましょう。

「表示」→「表示」→「ファイル名拡張子」と辿ってクリックします。

拡張子が表示されるようになりました！