【考えるな】HTML・CSSの勉強で大切なことは「手を止めないこと」

はいどうも、たくま(@wakutakublog)です。

 

 

HTML・CSSの勉強を初めて2週間ほど経ち、一通り終えたので学習の過程を記していきます。

 

「これからHTML・CSSの勉強を始めるよ!」という方に、少しでも参考になればいいなというスタンスで書いていきますね。

HTML・CSSの基礎の基礎を2週間で勉強したルート

 

使うツールは「ドットインストール」「Progate」の2つです。

 

日付 学習内容 コメント
5/30 ドットインストール「はじめてのHTML」 かなり分かりやすい。
5/31 ドットインストール「はじめてのCSSL」 「;」を忘れ、40分奪われた。
6/1 ドットインストール「はじめてのHTML」 2回目でやっと理解に変わる。
6/2 ドットインストール「はじめてのCSS」 2回目やっと理解に変わる。
6/3 Progate「HTML&CSS初級編」 ドットインストールの復習+少し新知識
6/5 Progate「HTML&CSS中級編」 まあまあ難しいがゲーム感覚なので楽しくできる。
6/6 Progate「HTML&CSS上級編」 レスポンシブ対応なので順番的に上級になっているが分かりやすい。
6/7 Progate「HTML&CSS道場コース初級編」 コードはぐちゃぐちゃだが何とかクリア
6/11 Progate「HTML&CSS道場コース中級編」を断念し、Progate「初級中級」を復習 やはり2回目で理解が深まった。
6/12 Progate「HTML&CSS道場コース中級編」 復習の甲斐あって何とかクリア
6/14 Progate「HTML&CSS道場コース上級編」 わからない箇所もあるが、割と簡単。

 

2週間と少し時間をかけすぎていますが、この順番で勉強していくのは結構オススメです。

 

「ドットインストール」か「Progate」でどっちを使おうか、どっちから始めようか悩む人もいるかと思います。

ぼくが実際に両方を使って勉強してみた結果、「どちらも使う」「ドットインストールから始める」のがいいなと感じました。

 

 

理由としては、「2つ目で復習できる」「ドットインストールの方がサクサク進められる」から。

 

「ドットインストール」は1本の動画が約3分で、話す人もそこそこのスピードでコードを書いていきます。

最初は「いや早すぎ…。」となりますが、とにかく真似して書いていきましょう。

最初から理解する必要はないので、強制的にペースを作ってくれる「ドットインストール」がおすすめです。

 

 

一方で「Progate」はスライドを見ながら自分のペースで進められます。

なので人によっては、理解しようとしてなかなか進まない可能性があるのです。

 

「ドットインストール」を終えた後で「Progate」に進めば、復習なので理解しながら勉強できます。

 

 

大まかな流れとしては、

ドットインストールで真似しながらサクッとコードを書いていく。

Progateで復習して、

道場コースでアウトプットする。

この流れで勉強するといいんじゃないかな。

 

 

ちなみに僕は2週間かけてしまいましたが、もっと短期間で詰めた方が良かったなと感じています。

 

ドットインストールは90分、Progateは2時間〜3時間ほどで1つのコースを終えることができるので、1日にまとまった時間を取れるなら1日に2コースなどもっと早いペースで進めていってもいいかと。

HTML・CSSを勉強する上での注意点

HTMLとCSSを勉強する上で、僕が感じた注意点を紹介しておきます。

 

 

先ほども言いましたが、「最初から理解しようとしないこと」です。

 

最初は何も考えずに、手を動かしましょう。

最初から考えても、意味がわからないと思います。

 

実際にぼくも、ドットインストールの動画を見ながら、真似して書いていただけです。

それでも、2回目には多少理解できるようになっています。

なので、わからない箇所があっても、真似して進めていくことが大切です。

 

 

中学生の頃はわからなかった数学の問題も、いつの間にかできるようになってた。

みたいな感じです。

 

ドットインストールで理解できないことがあっても、一旦放置してProgateをやって、

もう一度ドットインストールやってみたら理解できたなんてことは普通にあります。

 

 

なので、「とにかく手を動かすこと。」

これが大切だなと思います。

次はJavaScriptを勉強するよ

ひとまずHTMLとCSSの基礎の基礎は勉強したので、次はJavaScriptに進みたいと思います。

とにかく基礎の基礎を積み重ねていきます。

 

たくま
たくま

JavaScriptの基礎の基礎が学べたらまた報告しますね〜!