Protageを使ってプログラミングの勉強を始めて四日になるくぼたと申します。
(僕がしているインターン→未来電子テクノロジー)
今回はProtageのHTML＆CSS中級編を終えたので、そこで得た学びをアウトプットしようと思います。

中級編でやったこと

前回の初級編では超初歩的なHTMLとCSSの基礎や簡単なホームページの作成などを行いました。
今回の中級編は少し応用的な内容を取り扱いました。

・複数クラスの指定
ボタンのように、「共通の部分があるが、それぞれ小さい変化をつけたいとき」にはクラスの名前を複数指定すると便利です。
下図のように、半角スペースで区切って複数のクラスを指定することができます。

・インラインブロック
ブロック要素とインライン要素の特徴を併せ持つインラインブロック要素というものがあります。
インラインブロック要素はインライン要素と同様に横に並びますが、ブロック要素のように幅や高さをもちます。
ブロック要素(divタグなど)とインラインブロック要素はpadding、margin、width、heightを指定することができますが、インライン要素(aタグなど）はwidth、heightを指定することができません。
padding、marginついては左右のみ指定できます。

・Font Awesomeとは？
アイコンを表示するにはFont Awesomeというものを使うと便利です。
たくさんのアイコンが用意されており、自分の気に入ったアイコンを簡単に使うことが出来ます。
https://fontawesome.com に詳しい使い方やアイコンの一覧が載っています。

・aタグをクリックできる範囲

aタグはインライン要素なので、中身のテキストの部分しか大きさを持ちません。その結果、aタグをクリックできる範囲はテキストの部分だけになってしまいます。
aタグをブロック要素にすると、大きさが親要素いっぱいに広がるので、全体をクリックできるようになります。

おわりに

中級編で得た学びについてご紹介しましたが、実際のところProtageのカリキュラムにのっとって進めていただけで、これらのアウトプットが再現できるかといわれれば正直にいってまだできないです。
まだまだ未熟者ですが、コツコツと学習を続けていきます。
最後まで見ていただいた方ありがとうございました。