2018年3月から制作部に仲間入りした、Web制作1年生です。

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

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

Webで調べた勉強法を実際にやってみた。

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

これは私にとってはダメでした…。

知識ゼロ、全くの初心者がいきなりHTMLやCSSを見て理解ができるでしょうか？

いやいや、できません！！
むしろ「何が書いてあるの？」「誰がわかるの？」という状態に陥ってしまいます。

Web制作を学ぶうえで、この段階で挫折してしまう人が多いのではないか？と思うくらい何もわかりませんでした。

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

自分の言葉に書き変えてノートにまとめることで、頭に入ってきやすいのでオススメです！

ただし、HTMLやCSSはどんどん新しいものが出てくるので、ただ単にソースをまとめるのはあまりオススメしません。

テキストが終わるころには、ある程度の専門用語が理解できるまでになっているので、Webで調べたりすることなくおおよその内容が理解できるようになっているはずです。

仕組みと専門用語をしっかりと理解してからでも、ソースに触れることは遅くありません。

制作部の部長に勧められたテキストがこちら▼

『たった1日で基本が身に付く！HTML＆CSS超入門』宮本麻矢 著

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

プログラミングの学習サイトを使ってみた。

これは実際利用してよかったです。

私が一番よく使ったのは「CODEPREP」で穴埋めドリル式にHTMLやCSSなどの言語学習ができるサイトです。
ソースの補完機能がないのですべて自分で打つのも良い勉強になりました。

困ったときのヒントやポイントもあるので、初心者でも安心です！
また、繰り返し何度も学習できるのもうれしいです。

この学習で、そこそこHTMLやCSSのソースを覚えられます。
気付けばWebサイトのソースを見て何がどこに指定されているかが大体わかるようになっていると思います。

実用的な学習ブックも多いので、テキストで覚えたところも復習しながら進めると理解が深まるはず。

ただ、今まで有料だった学習ブックが一部機能は制限されていますが終了日まで無償で開放されています。

この機会にぜひ試してみてください。

その他のオススメWeb教材

progate

基礎は無料で学習ができます。月額登録ですべての学習ができるサイトとなっています。
かわいいマスコットもいてゲーム感覚で進められるので、とっつきやすいと思います。

ドットインストール

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

おわりに

困ったときは制作部のメンバーにいつでも聞ける、恵まれた環境にいる私ですが2カ月前までは、HTMLとCSSが夢に出てくるくらい必死でした（笑）

今ではイチからの構築は難しいものの、HTMLやCSSの修正などもできるようになりました。

「話がわかるようになった！」
「HTMLとCSSの意味がわかってきた！」
…というような、小さな「できた！」をいっぱい積み重ねて成長途中です。

これから勉強してみようかなと思っている人の参考になれば幸いです。