【未完成】ドットインストールでHTML/CSS,JavaScriptを学習してみた所感と学習内容

はじめに

フロントエンドに興味がある新人技術者がプログラミング学習サービス「ドットインストール」で学習してみた感想と、そこで得た知識をアウトプットしてみました。
実施したレッスンは以下。
　・HTML/CSSの学習環境を整えよう macOS編 (全5回)
　・はじめてのHTML (全14回)
　・はじめてのCSS (全15回)
　・はじめてのJavaScript (全11回)

活用してみた所感

今回「ドットインストール」を初めて活用して感じた所感をあげていきます。

①動画なので操作がわかりやすい

書籍で学習する際との決定的な違いです。
書籍だと省略されがちな操作方法を動画で見ながら確認できるので、「説明書いてあるけど難しすぎてどう操作していいか分からない」といった詰み状態にならないのが最大のメリットだと思いました。

②手軽に学習できるため、学習がストップしない

動画1本の時間が1〜3分くらいと短めなので、集中力が切れることなくサクサク進められるのが特徴です。
ゲームのステージをこなしていく感覚で実際に手を使いながらどんどん学習できます。

③OSごとの解説がある

環境設定やショートカットキーなど、Mac環境とWindows環境で異なる部分の解説をしっかりとしてくれているため、誰でもスムーズに学習に取り組めます。
個人的に、覚えておいて役立つショートカットキーを動画内で説明してくれるのはありがたかったです。

④自分に必要なレッスンが分かりやすい

目的別でやるべきレッスンがまとめられているため、初心者にありがちな「何から手をつけていいか分からない問題」が起こりづらいのではないでしょうか。
動画内でも事前に受けておいた方が良いレッスンを教えてくれるので、迷いなく学習に入れます。

実際に学習した内容

以下、実施したレッスンのアウトプットです。
なぜこのレッスンを選んだのかも記載していきます。

① HTML/CSSの学習環境を整えよう [macOS編]

もともとJavaScriptを勉強しよう！と思い、後に出てくる「はじめてのJavaScript (全11回)」を始めたのですが、動画冒頭で「HTML/CSS」の学習が大前提と説明があったため、HTML/CSSの学習から始めることに。
エディター環境が整っていなかったため、このレッスンをまず実施しました。
MacOS編とWindows編があり、とても親切。
レッスン内容は以下。
　・Chromeブラウザの導入方法
　・VS Codeの導入と設定

②はじめてのHTML

①の経緯で学習を開始。
実際に手を動かしながら簡単なプロフィールサイトを作成していきます。
以下、レッスンのアウトプット。

■タグでテキストを意味付けしていくことを”マークアップする”という

index.html

<h1>ダイエット</h1>
<p>健康的なダイエット法を紹介します。</p>

■タグの種類

<h1></h1> : 見出しタグ。数字が小さいほど大きな見出しになる。
<p></p> : 段落タグ。
<img src="画像のファイル名"> : 画像を表示するためのタグ。マークアップする文章がないため、終了タグは不要。

※参考になったタグ入れの子ルール