初心者の僕がProgateのHTML/CSS基礎編を実践してみた個人的感想

セイタ

こんにちは、セイタです！

以前にドットインストールでの基礎学習のポイントを記事にしましたが、どうせだったらProgateを体験してみようと思い、今回HTMLとCSSの基礎編を実践してみました。

ドットインストールとProgateどっちで勉強した方がいいのかというプログラミング初学者の人は多いと思うので、本記事を参考にどちらをメインにして学習するかを決めていただければ嬉しく思います。

ProgateのHTML/CSS基礎編を実践してみての個人的感想

ぼくは今までドットインストールでプログラミングの勉強をしていたのですが、色々と調べていると必ずドットインストールとセットで出てくる無料学習コンテンツがProgateでした。

今回どんなもんなんだろうと実践してみたので、ドットインストールのみで学習している場合は参考になると思います。

Progateの感想① ゆっくり学習できる

ドットインストールを学習した人ならわかると思いますが、ドットインストールって早いですよね。

ぼくがオススメしているドットインストールの勉強方法としては、一回動画を全部見てどんなことをするのか理解してから実際にコーディングする方法がベストだと思っているのですが、それだと結構時間がかかってしまいます。

一回見たものをもう一回見るって結構ストレスだったりするので、あまり気が進まない人も多いはず。

そんなドットインストールと比較すると、Progateの場合はスライドショーで最初に何をするのかを教えてくれた上で実際にコーディングに移るようになっています。

しかも、コーディング画面の左側にクラス名や打ち込む値なども表示されているので、本当の意味で自分で見てコードを打ち込むことが可能です。

そのため、ぼくにとってはProgateの方が理解しやすいと思ってしまいました。

Progateの感想② 間違っているところをすぐ確認できる

Progateでは、数章に分かれて学習していくスタイルをとっていて、その部分に関してはドットインストールと同じです。

しかし、Progateの場合は次の章に移る時に間違ったコードを打ち込んでいた場合、どの部分が間違っているかを事前に教えてくれます。

ぼくはこれって結構いいシステムなんじゃないかなと思っていて、間違ったコードを打ち込んでブラウザなんかに反映されない時って何でエラーになったのかを調べて改善すると思うのですが、エラーを改善してうまくブラウザに反映した時って安心しませんか？

この『安心』が間違ったことを再確認するよりも大きな感情になってしまっていて、自分が間違った部分に対しての理解が薄くなるような感覚があるんです。

そのため、ドットインストールはAtomを使用して実際にブラウザに反映させるというスタイルは実践的でとても良いと思うのですが、初心者が間違ったところを自分で確認して認識するというポイントに焦点を絞ると、Progateの方が理解しやすいんじゃないかなと思っています。

Progateの感想③ 自分で考える考慮もされている

Progateは入門から基礎まで学ぶことができる学習プログラムですが、全てを教えてくれるわけではなくて、ある程度自分で考えさせてくれます。

ドットインストールの場合は、動画の中で田口さんがコーディングされている様子を見て真似をしてコードを打ち込んでいくと思うのですが、Progateの場合は若干考える場面が出てきます。

『ロゴの高さを10pxに設定してください。』といったような感じになっている部分が絶妙なタイミングで出てくるので、CSSで高さを決めるコードを思い出して書くことができます。

人間は何をするかを頭で理解したあと、思い出すことによって記憶に残るというのは勉強家にとっては周知の方法論ですが、その方法をうまく採用しているので、必然的に初心者も何を指定するには何を宣言しなければいけないという流れを理解しながらスキルを身に付けることが可能です。

Progateの有料版について

ちなみにぼくは、Progateの有料版も利用してみました。

なぜ有料版を利用したかというと、無料の範囲内の講座で自分の肌に合うと思ったからですね。

自分の理解が深まる感覚があったので、有料版でも問題ないだろうという判断で利用してみたのですが、その判断は間違いではありませんでした。

Progate有料版の価格

Progateの有料版は月額料金となっていて、980円と設定されています。

クレジットカード決済とデビットカード、プリペイドカードでの支払いが可能となっていて、銀行振込は不可となっています。

クレジットカードを持っていないという場合は、楽天カードが比較的作りやすいと言われているので、Progate学習用にカードを発行してもいいかもしれませんね。

Progate有料版のメリット

Progateの有料版のメリットとしては、結構ポイントが高いことがあったので紹介しておきますね。

プログラミングである程度基礎を学んだ後にLP（ランディングページ）を模写するという流れが定番になっていますが、ドットインストールの基礎を勉強した時に全く再現できなかったんです。

というのも、ドットインストールの基礎で作成するLPと模写の対象となっているLPのレイアウトに結構差があったんです。

ドットインストールで学んだ基礎を活かせる割合としては20％ほどという感覚があり、実際にLPを模写しようとすると頭がはてなでいっぱいになります。

ですが、Progateの有料プランでの学習に関しては、最近よくあるサイトのレイアウトをLPの作成対象としていて、模写の対象となっているサイトの仕組みが勉強しながら理解することができました。

これって結構ぼくの中で大きなことで、Progateで勉強をすれば実践的な部分の知識はしっかりと補うことができるという確信を持てました。

今後、PHP・JavaScript・jQuery・Rubyなどを勉強していこうと思っているので、安心して学ぶことができそうです。

Progate有料版のデメリット

Progateのデメリットとしては、ドットインストールと同じなのですが、基礎編（無料）の範囲内では本当に入門部分しか学ぶことができないという点ですね。

有料になって初めて世に出回っているサイトの仕組みだったりとかを学べるといったような感じになっているので、しっかりと学びたいと思っているなら有料プランに早々にしてしまうことをオススメします。

ProgateはBoostrapについて学べない？！

Progateがドットインストールに負けているところといえば、Bootstrapについての知識は得られないということですね。

※jQueryやRailsの講座は存在しています。

ドットインストールはBootstrapについての基礎を学ぶことができるのですが、Progateの場合はBoostrapについて学ぶことができません。

そのため、YouTubeで『たにぐちまこと』さんなどのプログラマーが解説しているBootstrapの動画を見て勉強するか、ドットインストールの無料講座を受ける必要があります。

Bootstrapの知識に関しては、プログラマーの転職を考えている場合やフリーランスとして働こうと思っている人にとっては、とても重要な知識となってくるので、Boostrap学習の補填先は見つけておかなければいけませんね。

極論プログラミングスクールで学ぶのが一番早いかも

Progateでの学習はあくまで独学で勉強をすることを念頭に置いています。

そのため、誰かに聞いたりするといったことができないので、自力でググって解決策を探さなければいけません。

これがなかなか時間のかかる作業でして、最終的には自分でしらべて解決する力は付けないといけないのですが、独学でのプログラミング習得に自信がない場合はプログラミングスクールでさっと学んでしまうのが一番の近道かもしれません。

Udemyは時折激安特価で受講メニューが購入できるようにセールが行われているところが魅力の一つです。

TechAcademyは教室にわざわざ通わなくてもマンツーマンで先生がついて勉強することができるので、自宅で全ての勉強が完結できます。

本腰を入れてプログラミングを頑張りたい場合は、選択肢としてありだと思いますよ！

＼ あわせて読みたい！ ／