【勉強方法紹介！】0から学ぶweb開発

こんにちは！
今回はweb開発の勉強方法を紹介します。web開発未経験、もっと言うとHTML、CSS全然わかりませんという人向けの記事です。

どんな順番で何を使って勉強すればいいのかを解説していきます。web開発に興味がある方はぜひ参考にしてみてください！

まずはインプット

何はともあれまずはインプットです。インプット方法は書籍だったり動画教材だったりたくさん選択肢がありますが、自信を持ってお勧めしたいのが以下のUdemyの講座です！

web開発のインプットはこれだけで十分と言えるくらいいい講座です。HTML、CSSの基本中の基本から応用、そしてreactやbootstrap、SQLなどweb開発に必要な知識を網羅的に解説してくれています。

全部で60時間以上の動画なので根気強く学習する必要がありますが、web開発の学習は大変なものなので60時間は短いくらいです。

一つ注意が必要なのは講座はすべて英語で行われます。講師の方もはっきり話してくれて聞き取りやすいので問題ないと思いますが、英語が本当に何もわからないと言う方はこの講座の購入はおすすめできません。

ただUdemyは再生速度が選択できるので、スピードをゆっくりにすることで英語が聞き取りやすくなるかもしれません。

中身は本当におすすめの講座なので英語に自信がない人は、購入する前にまずプレビュー動画を視聴してみてください。
その動画で話している内容がわかれば全く問題はありません。

これからweb開発を学習しようとしている人はぜひ購入してみてください！

アウトプット①

インプットが終わったら次はアウトプットです。アウトプットでおすすめは模写コーディングです。
何をするかは単純でwebサイトを見てそれと同じサイトを自分でコーディングします。

そこでまずおすすめするのがこのリポジトリです。

https://github.com/bradtraversy/50projects50days

このサイトにはHTML、CSS、JavaScriptで作成された簡単なwebページが50個用意されています。これを一つずつ自分で作成していきましょう。

リンクの下の方にこんな感じの表があります。Live Demoと書かれた部分を押すとそのプロジェクトのwebページが表示されます。

そのページを見ながらHTML,CSS,JavaScriptでコーディングしていきます。完璧に同じサイトにする必要はありません。
色などはそれっぽいので大丈夫です。もし色やフォントも合わせたければchromeのdeveloper toolなどで確認することもできます。
この辺りの操作も先ほどのUdemyで解説されています。

実際に作成できたら表のProjectにあるリンクを押すと正解のコードを見ることができるので自分で書いたコードと見比べてください。

それを繰り返すことで確実に上達していきます。

アウトプット②

50個のプロジェクトを完了したら次はより実践形式のアウトプットをします。

https://code-jump.com

このサイトは模写コーディングようのwebサイトをいくつも掲載してくれています。また実践形式でいろいろな条件も載せてくれています。

正直インプットが終わったらいきなりこれでもいいと思います。入門編があるのでそこから進めていきましょう。
さっきの50個のプロジェクトより簡単に感じると思いますが、50個のプロジェクトも確実に必要な知識なので実施するのをおすすめします。

この模写コーディングが全部終了すれば立派なweb開発者です。自信を持って案件を獲得していってください！