ryottaman.com

Turn a negative into a positive picture.

初心者でもできる!無料プログラミング学習サイト「Progate」が楽しい理由

   

Progate   Learn to Code  Learn to be Creative.

「プログラミングって面白そう」と感じているけどどうやって身につけるの?という方にはうってつけのサービスが登場しています。
HTML/CSS、PHP、jQueryの基礎を無料で学ぶことのできるwebサービス「Progate」なら初心者の方でも楽しくそして実践的にプログラミングを始めることができます!

Progate | Learn to Code, Learn to be Creative.

ソーシャルログインで簡単にはじめられる

ryottaman   プログラミングの入門なら、基礎から学べるProgate  プロゲート

サイトにアクセスし、まずは会員登録してログインします。Facebook、Twitterでもログインできるので、とっても簡単です。
現在のところ、HTML & CSSPHPjQueryの3つの言語を学ぶコースが用意されています。

3ステップで分かりやすい!

以前、他のオンラインのプログラミング学習サービスを利用した際に感じたのは、講義のような形式をとると初心者には難しい内容であっても教える側のペースで講義は進んでいきます。もちろん一時停止などユーザーのペースで進めることも可能ですが、かなり手間ですし結局面倒になってしまって続かなかったという経験があります。

Progate」はシンプルな3ステップで学習を進めていきます。

1.スライドで基礎知識を学習
2.エディタにコードを書いて実践
3.プレビューで表示を確認

1.スライドで基礎知識を学習

HTML入門   プログラミングの入門なら、基礎から学べるProgate  プロゲート

非常に分かりやすいスライドでまずは、基礎知識を学習できます。初歩的な内容が細かくシートごとに説明されているので、初心者もきちんと理解を進められました。良質な教科書としてこれを見るだけでも勉強になりますね。

2.エディタにコードを書いて実践

Progate」がもっとも優れていると感じたものがこちら。ブラウザ上で動作するエディタです。「エディタ」ってなにを用意すればいいの?という人もとりあえず始めることができます。
何の用意もなくともとにかく始められるというのが画期的です。初心者には最初のハードルがもっとも高いんですよね。

左側が問題文、真ん中がエディタ、右側がプレビュー画面となります。

1HTML入門   プログラミングの入門なら、基礎から学べるProgate  プロゲート

前のステップでスライドで学んだ内容から問題が出ており、それに応えていきます。
もし問題文が分からなければ「スライド」へ戻ることも可能です。

2HTML入門   プログラミングの入門なら、基礎から学べるProgate  プロゲート

こちらのエディタに記述をしていきます。学んですぐに自分でコードを書くのを実践できるのがうれしいですねー。
これだけでなんだかできる気がしてきますw

3HTML入門   プログラミングの入門なら、基礎から学べるProgate  プロゲート

右側では、エディタに記述した内容がリアルタイムでプレビューされ見本と見比べることができます。
もしわからなければ「ヒントを見る」こともでき、さらには答えを見ることもできてしまいます。このおかげで周りに聞ける人がいない環境でも、効率よく学習を進められます。

5HTML入門   プログラミングの入門なら、基礎から学べるProgate  プロゲート

プレビュー画面を見ながら問題に沿ってコーディングができたら「確認して次へ」ボタンをクリックします。正解なら上のような画面が出て次のレッスンへ進むことができます。

6HTML入門   プログラミングの入門なら、基礎から学べるProgate  プロゲート

コーディングの内容が誤っていた場合、例えばタグの閉じ忘れなどがあった際にすぐさまエディター上にアラートがでるようになっています。

7HTML入門   プログラミングの入門なら、基礎から学べるProgate  プロゲート

「確認して次へ」ボタンをクリックを押して間違いがあれば、箇所を教えてくれます。初心者には「どこが間違っているか分からない」ということがよくありますので、ありがたい機能です。

まとめ

「プログラミングをやってみたい」という気持ちにすぐさま答えてくれる「Progate」は、「分からないことが分かっている」初心者に非常にオススメなサービスです。

Rubyも追加予定になってるようで、今後も楽しみなサービスですね。

Ruby_Progate   Learn to Code  Learn to be Creative.

スポンサーリンク

 - EDUCATION, TECH , , , , , ,