progateのHTML&CSSレッスンを3周してみて感じたおすすめの取り組み方

ProgateのHTML&CSSレッスンの学習方法 プログラミング

この記事では、

プログラミング初心者の僕が、progateのHTML&CSSレッスンを始めてみたけど、どのように取り組めばいいのだろう…。また実際にどれくらいの時間がかかるの？ まったくの初心者だけど大丈夫なの？

という悩みを持った方に向けて書いています。

 

progateについては、以下の記事でも紹介しています。

⇒ progateに関する記事はこちら

プログラミング初心者の文系大学生がProgateを始めてみた
この記事では、文系の大学生である僕がプログラミングを学ぶために、オンラインプログラミング学習サービス「Progate（プロゲート）」を利用してみての感想を書いています。具体的には、Progateとは何なのか？メリット・デメリットなど。
aka-shin.com
2018.12.28

 

※この記事はプログラミング初心者の僕が実際にprogateのHTML&CSSレッスンを3周したので、それをもとに書いています。
スポンサーリンク
  1. progateのHTML&CSSレッスンに取り組んでみた【作業内容】
    1. ✔1週目
    2. ✔2周目
    3. ✔3周目
  2. おすすめの取り組み方（HTML&CSSレッスン）
    1. 学習コース、道場コースともに3周する
  3. Evernoteをノート代わりにする
  4. HTML&CSSの学習を効率良く行うために
    1. ショートカットキーを使いこなす
    2. タッチタイピングを習得
  5. まったくの初心者にこそHTML&CSSがおすすめ！

progateのHTML&CSSレッスンに取り組んでみた【作業内容】

progateのHTML&CSSレッスン

progateのHTML&CSSは全部で6レッスンあります（半分は学習コース、もう半分は道場コース）。

 

そこで僕がどのように取り組んできたのか、どれくらいの時間がかかったのかを周ごとに書きました。

 

  • 学習コース→スライドでの説明の後に演習を行うコース
  • 道場コース→説明はなく、仕様書に沿ってサイトページを作成するコース

 

✔1週目

HTML&CSSの知識が全くない状態だったので、スライドを理解するのにけっこう時間がかかりましたね。

 

しかし、progateはプログラミング初心者にも分かりやすいように図が挿入されていたり、間違えやすいポイントが書いてあったりしたので、すんなりと頭に入ってきました。

 

ノートにメモをとりながら学習した方が頭に入ってきやすくていいのかなあと思ったので、学習コースの初級編～上級編まではノートをとっていたんですけど、まあ時間がかかります（笑）。

 

なので、あとからも紹介するEvernoteでノートをとることをおすすめします。とりあえず分からないところがあってもそこで手を止めずに1周しましょう。1周目で全てを理解するのは難しいので。

 

・かかった時間→15時間（道場コースでけっこう時間がかかりました）

✔2周目

1周目したことによって、HTML&CSSに関する知識がある程度入っているので、「このコードを書くとこうなる」ということが分かってきます。
また1周目の時に比べてだいぶ早く終わらせることができました。2周目に入るときは手を動かしながら取り組むためにもコードを「リセットして復習」を選びましょう！
・かかった時間→8時間35分

✔3周目

3周目では「リセットして復習」ではなく、「そのまま復習」を選んだのですぐ終わりましたね。

 

3周目ともなってくると道場コースでも検証をあまり使わずとも仕様書のみで完成させることができました。

 

・かかった時間→5時間50分

おすすめの取り組み方（HTML&CSSレッスン）

3周してみて感じたおすすめの取り組み方について紹介していきます。

 

学習コース、道場コースともに3周する

3周することによって以下のようになっていきます。

・1周目

→分からない部分が出てくる。しかし、そこで手を止めずに1周やりきる。

・2周目

→コードの意味を理解しつつ、ある程度コードを書けるようになる。

・3周目

→道場コースでも苦労せずにコードを書ける

といった感じです。

 

3周を終えて、ある程度HTML&CSSの知識はついたと思っているので、これからは簡単なサイト模写を行っていきます。

 

サイト模写の詳細記事はこちら

 

 

Evernoteをノート代わりにする

手書きでノートをとると時間がかかってしまうので、代わりにEvernoteを使うと良いでしょう。

 

具体的なノートの取り方としては、なかなか覚えられない部分や間違えてしまったコードなどを打っていきます。

 

こんな感じですね。

Evernote

 

Evernoteを使うメリットは以下の記事で紹介しています。

⇒ Evernoteの詳細記事はこちら

【アプリ】ノートからEvernoteに変えてみたら使い易かった！
この記事では、Evernoteを今すぐ使用した方が良いということについて書いています。 （すでに利用している方には、今更かよ！と思われるかもしれません（笑）。） 僕は以前まで、スマホに入っているメモアプリでメモをとったり...
aka-shin.com
2018.12.28

 

HTML&CSSの学習を効率良く行うために

効率的に学習を進めていくために必要だと思ったことについて紹介していきます。

 

ショートカットキーを使いこなす

ショートカットキー

ショートカットキーを使うことによって圧倒的な時間の短縮につながります。progateではprogateの中でのみ使えるショートカットキーもあるので、是非早い段階で覚えておきましょう。

 

一般的にも使えるショートカットキーは 【書評】効率化を考えるクセをつけるべき！by『光速パソコン仕事術』 で詳しく紹介しています。

 

タッチタイピングを習得

タッチタイピング

タッチタイピングができないとコードを書くのにかなり時間がかかります。僕自身も大学に入学した頃は、手元を見ながらカタカタと打っていました（笑）。

 

タッチタイピングを習得することによってコードを書くスピードが上がるのはもちろん、レポートの作成やWordを使って文章を作成するスピードも上がりますね！

 

まったくの初心者にこそHTML&CSSがおすすめ！

そもそも、HTML&CSSはプログラミング言語ではないと言われています。

  • HTML→マークアップ言語
  • CSS→スタイルシート言語

 

しかし、HTML&CSSの知識がないとwebサイトを作ったり、web系の仕事をするのは難しいです。

 

なので上記のような方は、まずHTML&CSSの勉強から始めましょう！ progateでHTML&CSSのレッスンを終えた人は progateのHTML&CSSレッスンが終わったらドットインストールを始めよう！ の記事を読んでください。

 

コメント

ホーム
トップ