【初心者向け】初心者がオススメするWebサイト制作学習教材
ネット上にはたくさんの有料無料学習教材が落ちています。
その中でも初心者の私が使ってみて良かった物を紹介していきます。
人によっては微妙〜なんてのも混ざってると感じるかもしれませんが参考程度に読んでみてください。
学習サイト
いきなり有料教材ですが一部無料もあり、大定番ですので欠かすことができません。
以前も紹介した内容ですが、更に掘り下げて書いていきます！
私が特に良かったと感じた物には赤の太字でチェック入れてます。
ドットインストール
良かった点：
- プログラミングをする上で大事な環境構築を学べる
- １本3分の短い動画で要点だけを学べる
- 動画でコードを書く一連の流れを見る事ができる
- 動画を見ながらひたすら手を動かせる
- 動画の音声だけ流してながら作業ができる
- 質問ができる（プレミアム会員限定）
悪かった点：
- 動画が超早口でついていくのが大変（プレミアム会員は速度調整可）
- 専門用語や噛み砕いた説明が少ないので自分で調べる時間が多い
（調べる癖をつけるというメリットに変えることもできます） - 受けれるレッスンが多くて無駄に受けがち
Progate
良かった点：
- 説明が丁寧で初心者でもイメージしやすい
- 説明がテキストなのでゆっくり理解するまで読むことができる
- ブラウザ上で学習するため環境構築の必要がない
- 目的にあった学習コースがあり、どれを学習したらいいか分かりやすい
- 各レッスンの初級編が無料
悪かった点：
- 環境構築を後々、別で学ぶ必要がある
- コードを書く量が少ない
- レベル上げに必死になってしまう
- 受けれるレッスンが多くて無駄に受けがち
オススメYouTubeチャンネル
基礎学習を終えたあたりから見出しました。
理由が基礎知識があるとないとでは動画で学ぶ上で集中力が変わってくるからです。
チンプンカンプンだと何言ってるか分からなくてすぐあきちゃいますよね…
復習＋上記の基礎学習で学べていな箇所を拾って行くといいでしょう。
Webの神様
とても可愛らしいなつこ先生が優しく教えてくれます。
特におすすめなのが模写コーディング解説ですね。
もしこのチャンネルに出会っていなければ、私はここまで成長することはなかったと思っています。
それくらい丁寧な解説で模写コーディングを学べますので、必ずチャンネル登録しましょう！
玉袋浩二の知恵袋ちゃんねる
初心者が初心者に発信するYouTubeチャンネルです。
名前は下ネタポイですが、内容は至って真面目です。
なおかつ私たち初心者と同じ場所にいるという共感性の強い動画となっています。
イケメン＆イケボなので苦なく見続けられるのは大きいです。
しまぶーのIT大学
もはや説明不要と言っても良いでしょう。
登録されてない方はいるのかな？
各動画の解説がわかりやすく、躓いたら動画に戻って何度も見返す作業をして少しずつ前に進んでいます。
レイアウト講座は目から鱗でした。
模写コーディング
基礎学習が終わったら方はこちらですね。
模写はまだ無理だよ！って方は写経から始めましょう！！
いきなり模写なんて無理です（私も当然できませんでした。）
私の模写コーディングの苦悩を知りたい方はこちら↓↓↓
話が少しそれましたが私がオススメする模写コーディン練習サイトはこちらです！
↓↓↓
Codestep
初心者から上級者まで、なんとWordPressまで…こんな素敵な学習サイトが無料で使えるなんて！
更にレスポンシブまで学べます！！
モデルになっているWebサイトのバリエーションも多く勉強になります。
ただ著作権の関係上画像が無地に置き換えられているのが少し寂しいところですね。
自分でフリーの画像サイトから画像を用意して置き換えるのもいいと思います。
《無料》ホームページテンプレート.com
おしゃれなサイトが多いです。
その分難易度は高めですが、もっと勉強して
「こんなおしゃれなサイトを作ってみたい」
というモチベーションにもつながりますので、まだ作れなくても眺めるだけでも気持ちが昂ります！
商業利用OKな上にWordPressまであります…ありがとうございます。
Class名に迷った時は…
初心者にありがちなclass名に何をつけたらいいか分からない問題！
そんな時はこのサイトがおすすめです。
cssのクラスメイ名を決めるとき使うリストをつくりました
一通りまとめられていますので迷ったら目を通すとヒントが必ずあります。
