この記事について

2023年5月現在の記事です。変更があれば随時更新していきます。
WEBデザイン学習者の私（初心者）が勉強のやり方と学習するにあたって役に立つサイトをまとめてみました。
自分の思考整理のためにやっているので、自分なりのやり方を書いています。もっと効率のいい方法があるかもしれませんが…。もし他の方にもお役に立てば幸いです。

HTMLとCSSの基礎を学ぶ

まず最初はホームページの骨格となるHTMLから学びます。その次にデザイン面のCSS。私はパソコン教室で学びましたが、以下のサイトでも学習可能です。サイト名をクリックするとサイトに飛べます。

サルワカ：基本的なことから親切に書いてあってわかりやすいと思います。他の記事も面白いです。
Progate：無料でプログラミングを学べるサイトです。
ドットインストール：無料でプログラミングを学べるサイトです。私はこちらに登録しています（登録後パソコン教室に行ったため、ほとんどつかってませんが）学習日数などが記録されていくのでモチベーション維持にはいいと思います。

HTMLとCSSを模写する

基礎が学習出来たらHTMLとCSSを実際に模写してみてどこがどうなっていて、サイトができているかを確認しながら制作を進めていきます。最初はわからなくても慣れていくと理解できると思います。コーディングやプログラミングでは暗記よりも、どこに答えがあるか探すような学習の仕方の方がいいと思います（めちゃくちゃよく使うものだけ暗記しておけばいいかなと）。
このステップでは以下のサイトがオススメです。

Codestep：無料のコーディング学習サイトです。
CodePen：HTMLとCSSを試すことができます。右上のStart Codingをクリックして実際に書いていきます。いちいちブラウザを開かなくていいので効率よく学習できます。
difff：テキストの比較ツールです。コーディングを書いた際の間違い探しに役に立ちます。左右のボックスにそれぞれテキストを入れて左下の「比較する」をクリックするだけでどこが間違ってるか、わかりやすく教えてくれます。

その他便利なサイト

動くWebデザインアイデア帳：期間限定のサイトなのでリンクは貼りませんでした。CSSでつくれるアニメーションなどについて説明されています。
原色大辞典：色の名前とカラーコードがわかりやすく記載されています。

編集後記

私もまだまだ学習中の身分なので今わかる範囲で書きました。サーバーアップロードなどについても今後追加記入しようと思います（サーバーは一回くらいしか触ったことがないため後で書きます）。
何かお気づきの点がありましたらコメントくださいませ。