この記事では、
プログラミング初心者の僕が、progateのHTML&CSSレッスンを始めてみたけど、どのように取り組めばいいのだろう…。また実際にどれくらいの時間がかかるの？ まったくの初心者だけど大丈夫なの？
という悩みを持った方に向けて書いています。
progateについては、以下の記事でも紹介しています。
progateのHTML&CSSレッスンに取り組んでみた【作業内容】
progateのHTML&CSSは全部で6レッスンあります（半分は学習コース、もう半分は道場コース）。
そこで僕がどのように取り組んできたのか、どれくらいの時間がかかったのかを周ごとに書きました。
- 学習コース→スライドでの説明の後に演習を行うコース
- 道場コース→説明はなく、仕様書に沿ってサイトページを作成するコース
✔1週目
HTML&CSSの知識が全くない状態だったので、スライドを理解するのにけっこう時間がかかりましたね。
しかし、progateはプログラミング初心者にも分かりやすいように図が挿入されていたり、間違えやすいポイントが書いてあったりしたので、すんなりと頭に入ってきました。
ノートにメモをとりながら学習した方が頭に入ってきやすくていいのかなあと思ったので、学習コースの初級編～上級編まではノートをとっていたんですけど、まあ時間がかかります（笑）。
なので、あとからも紹介するEvernoteでノートをとることをおすすめします。とりあえず分からないところがあってもそこで手を止めずに1周しましょう。1周目で全てを理解するのは難しいので。
✔2周目
✔3周目
3周目では「リセットして復習」ではなく、「そのまま復習」を選んだのですぐ終わりましたね。
3周目ともなってくると道場コースでも検証をあまり使わずとも仕様書のみで完成させることができました。
おすすめの取り組み方（HTML&CSSレッスン）
3周してみて感じたおすすめの取り組み方について紹介していきます。
学習コース、道場コースともに3周する
3周することによって以下のようになっていきます。
・1周目
→分からない部分が出てくる。しかし、そこで手を止めずに1周やりきる。
・2周目
→コードの意味を理解しつつ、ある程度コードを書けるようになる。
・3周目
→道場コースでも苦労せずにコードを書ける
といった感じです。
3周を終えて、ある程度HTML&CSSの知識はついたと思っているので、これからは簡単なサイト模写を行っていきます。
Evernoteをノート代わりにする
手書きでノートをとると時間がかかってしまうので、代わりにEvernoteを使うと良いでしょう。
具体的なノートの取り方としては、なかなか覚えられない部分や間違えてしまったコードなどを打っていきます。
こんな感じですね。
Evernoteを使うメリットは以下の記事で紹介しています。
HTML&CSSの学習を効率良く行うために
効率的に学習を進めていくために必要だと思ったことについて紹介していきます。
ショートカットキーを使いこなす
ショートカットキーを使うことによって圧倒的な時間の短縮につながります。progateではprogateの中でのみ使えるショートカットキーもあるので、是非早い段階で覚えておきましょう。
一般的にも使えるショートカットキーは 【書評】効率化を考えるクセをつけるべき！by『光速パソコン仕事術』 で詳しく紹介しています。
タッチタイピングを習得
タッチタイピングができないとコードを書くのにかなり時間がかかります。僕自身も大学に入学した頃は、手元を見ながらカタカタと打っていました（笑）。
タッチタイピングを習得することによってコードを書くスピードが上がるのはもちろん、レポートの作成やWordを使って文章を作成するスピードも上がりますね！
まったくの初心者にこそHTML&CSSがおすすめ！
そもそも、HTML&CSSはプログラミング言語ではないと言われています。
- HTML→マークアップ言語
- CSS→スタイルシート言語
しかし、HTML&CSSの知識がないとwebサイトを作ったり、web系の仕事をするのは難しいです。
なので上記のような方は、まずHTML&CSSの勉強から始めましょう！ progateでHTML&CSSのレッスンを終えた人は progateのHTML&CSSレッスンが終わったらドットインストールを始めよう！ の記事を読んでください。
コメント