私はこの①∼④までの工程を3～4カ月ほどかけて勉強しました。
目次（もくじ）
ＨＴＭＬ，ＣＳＳの基礎を覚える為パソコン教室に通いました
ホームページ制作が出来るようになる為、まずは近くのパソコン教室に通いました。
HTML,CSS,Wordpressの内容で10万円ほどかかりましたが、近所では一番安かったとおもいます。
独学でもHTMLやCSSの勉強は出来ますが、最初は環境構築（エディターのダウンロード、初期設定）から、間違い一つ探す事にも時間がかかった為、すぐに聞ける環境があるのとてもはありがたかったです。
独学でするよりはるかに時間効率は良いと思います。
同時にProgateを始めました
Progateがおすすめの理由はエディターなどの環境が用意されてあり、実際にコードを書いて覚えていくのでとても覚えやすかったです。
Progateとドットインストールどちらがいいか？プログラミングがまったく未経験の場合は、Progateの方がおすすめです。
有料コースは月980円で内容も濃いのでしておいた方がいいです。終わったら２週、3週と何回する方もいますが1週で十分です。
Progateを最初におすすめする理由
- 覚えた内容実際に書く為、覚えやすい。
- 環境構築（エディターのインストールや初期設定不要）
- エラーを見つけてくれる
- ヒントが見れる
出典元：Progate
Progateが終わってからドットインストールを始めました
ドットインストールは動画を視聴するごとにプログラミングを学習していきます。一項目2～３分とちょうどいい時間なので、私は車の運転中に聞いたり、夜寝る前に見ていました。
通勤・通学や外出先などでも見れるのでどこでも学習が出来るようになっています。
動画の視聴だけではなかなか覚えないので、使いそうなところだけをコードに書いて覚えていました。
ドットインストールはjavascriptの内容がわかりやすく充実していました。よく使用するハンバーガーメニューや、スライダー、アコーディオンなどがありとてもよかったです。
出典元：ドットインストール
④サイトの模写コーディングをしました。
サイトの模写コーディングで自分のスキルが一気に上がったと思います。最も実践的なスキルが身に付きました。
私が参考にしたのはこちら↓↓↓
出典元：【レベル別】模写コーディングにおすすめのサイトまとめ9選 | HikoPro Blog
レベル別に模写コーディングのおすすめを載せてくれているので、これを一通り作れたら案件を受注出来るレベルになっています。
この中で私が作成したのは
Progateの道場コース 上級編と【中規模サイト】架空のWeb制作会社のサイトを制作しましたの2つを作成しました。
というよりデベロッパーツールを見て作るという事がまだまだ難しかく、他のサイトも作ろうとしましたが出来ませんでした。
【中規模サイト】架空のWeb制作会社のサイトに関しては、なぜ出来たかというと実際のデザインデータやコーディングデータなどがダウンロード出来るのでわからなかったら答えを見ながらコーディングしていました。
そしてこの架空のWeb制作会社のサイトは「こちらのデザインをコーディングしたものはポートフォリオやブログへ掲載していただいてOKです」と記載があった為、sampleとして自分のポートフェリオに掲載しておりました。
コーディングデータをダウンロードできる模写コーディングは滅多にないので、よい教科書になると思います。
出典元：【上級編】企業サイトのコーディング練習 | 未経験からWebデザイナーへ！【2023年版】 (webdesigner-go.com)
ここで、デベロッパーツールの見方なども勉強しました。
ここのサイトは他にも完全無料コーディングデータを配布しているのでめちゃめちゃおすすめです。
入門編から上級編まで６サイトのコーディングデータがダウンロードできます。
出典元：無料コーディング練習所 (webdesigner-go.com)
