サイト制作の実務では、画像を本来のサイズの2倍の大きさで用意するケースがあります
大きな画像をそのまま配置すると親要素から飛び出してしまうことがあるので、これを防ぐために、img要素の最大幅を親要素の範囲内で収まるように指定しておきましょう。最大幅の指定にはmax-widthプロパティを使用し、値は「100%」を指定します。

img {
  max-width: 100%;
}

Visual Studio Codeでファイルの比較をする

コマンドパレットを開く(Ctrl + Shigt + P)
ファイル: アクティブ ファイルを比較しています…を選択

比較対象となるファイルを選択

a要素全体をリンクエリアにする

<a>
  <img />
  <div></div>
</a>

a {
  display: block;
}

この指定をしなくてもChromeでは要素全体がリンクエリアになっていますが、これはブラウザがうまく解釈してくれているだけなので、「block」を指定して、どんな環境でも正しくリンクエリアになるようにしておきましょう。

マウスを置いたときに拡大するようにする

a:hover {
  transform: scale(1.05);
}

拡大の動きをスムーズにする

a {
  display: block;
  transition-duration: 0.2s; ← これ
}

a:hover {
  transform: scale(1.05);
}

textareaのline-heightを指定する

line-heightを指定しているのは、サイト全体のline-heightが「1」になっており、ユーザーがテキストを入力する際に行間が狭く入力がしづらいためです。