全くの初心者が2カ月Web制作の勉強をしてみた　－書籍・Web教材３種/コーディング編－

はじめまして、制作部の佐藤です。
3月から制作部に仲間入りした、Web制作1年生です。

「コーディング？HTML？CSS？　え？なにそれ？」

なーんにも分からない、知識ゼロから2カ月
実際に私が行った勉強を基に「何をしていたのか」「どこまで出来るようになったのか」を、書いていきたいと思います。

－ 1st mission －
「HTMLとCSS（コーディング）がわかるようになる」

ひとまずWebで調べた勉強法や記事によくある内容を実際にやってみました。

よくある記事１
「ノートに書くより実際にHTMLソースに触れていったほうが良い」

これ、ダメでした。

知識ゼロ、全くの初心者がいきなりHTMLやCSSに触れるか？見て理解ができるか？
いやいや、できません！！
むしろ何書いてあるのコレ。誰がわかるの？え？状態になるのがオチです。
Web制作がわからなくて挫折する人はこの段階が多いのでは・・・？と思うくらい何もわかりませんでした。

挫折してる場合じゃない私は“わかんない”を潰していくために、
テキストを読みこんでHTMLとCSSの基礎の部分や考え方をすべて自分のわかりやすいようにノートにまとめました。

読んで自分の言葉に書き変えてノートにまとめる作業は頭に入ってきやすいのでオススメ。
ただし、HTMLやCSSはどんどん新しいものがでてくるのでソースをまとめるのはNGです。Web上にいっぱいありますからね。

テキストが終わるころには、ある程度の専門用語がわかるようになっているので、
Webにある記事や飛び交う話の内容が調べなくても大概理解できるようになっているはず。
仕組みと専門用語がわかってから、ソースに触れていったら怖くない！遅くない！

制作部部長が選んだテキストがこちら

“超入門“と書いてあるだけあって、専門用語の解説から初心者にとても分かりやすい内容で実際にデモサイトを作ることができ、
基礎を身に付けるのにはピッタリのテキストです。

よくある記事2
「プログラミング学習サイトを使う」

これはした方がいいです。というか実際よかったです。

私が一番よく使ったのは「CODEPREP」

「CODEPREP」は穴埋めドリル式にHTMLやCSSなどの言語学習ができるサイトです。
ソースの補完機能がないのですべて自分で打つのも良い勉強になりました。
困ったときのヒントやポイントもあるので、初心者でも安心です！
また、繰り返し何度も学習できるのもうれしいです。

この学習で、そこそこHTMLやCSSのソースを覚えられます。
気付けばWebサイトのソースを見て何がどこに指定されているかが大体わかるようになっていると思います。
実用的な学習ブックも多いので、テキストで覚えたところも復習しながら進めると理解が深まるはず。

　

残念ながらこちらのサービスは2018年9月30日で終了となってしまうようです。
ただ、今まで有料だった学習ブックが一部機能は制限されていますが終了日まで無償で開放されています。
この機会にぜひ試してみてください。
https://codeprep.jp/

 

そのほかのWeb教材オススメ！
progate
https://prog-8.com/
基礎は無料で学習ができます。月額登録ですべての学習ができるサイトとなっています。
かわいいマスコットもいてゲーム感覚で進められるので、とっつきやすいと思います。

ドットインストール
https://dotinstall.com/
３分教材！飽き性にピッタリ！３分で１つの動画が終わるので間延びせず学習できます。
たまに「まってまって！！」となりますが、巻き戻せばOK！
手を動かさないので、やったぞ感はあまりないかもしれませんが、ピンポイントでここ知りたい！といったときに大活躍します。

おわりに
教訓
１．最初は専門用語や仕組みの理解に時間を割く
２．最初からソースに触れない（挫折するから）
３．専門用語がわかったら、学習サイト
４．毎日学習を続ける

制作部のメンバーにいつでも聞けるといういい環境にいる私ですが、２カ月前はHTMLとCSSが夢に出てくるくらい必死でした（笑）
今では１からの構築はむずかしいもののHTMLやCSSの修正などもできるようになりました。

「話がわかるようになった！」
「HTMLとCSSの意味がわかってきた！」

というような、小さな「できた！」をいっぱい積み重ねて成長途中です。
これから勉強してみようかなと思っている人の参考になれば幸いです。

そしてノートに書くのも悪くないよ！（笑）

次回は、今回書ききれなかった初心者目線で「難しかった！」「理解するのが大変だった！」細かい部分をお話したいと思います。

ではでは。