Webデザインやガジェット、格安SIMの情報ブログ

ブラウザ上でHTML/CSS・jQuery・PHPが勉強できるサービス「Progate」

最近やっとjQueryを自分で書くようになり、ブログリニューアルでマテリアルデザインのハンバーガーメニューを実装したりと少しずつですが使う機会が増えてきました。

もっと上達するために勉強したいのですが、がっつり時間を取ることも出来ません。そこで、ブラウザ上でコーディングやプログラミングが学べるサイト「Progate」を試してみました。

※本ページは広告・アフィリエイトプログラムにより収益を得ています。

スポンサーリンク

ブラウザ上でコーディングやプログラミングが学べる

Progate   Learn to Code  Learn to be Creative.

Progateはブラウザだけで「HTML/CSS」「jQuery」「PHP」が学べるウェブサービスです。Twitter・Facebookのアカウントで認証してログイン出来るので気軽に始められます。

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

ログインするとこのような画面になります。レベル1から徐々にステップアップしていく形式でモチベーションアップに繋がります。

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

まずはjQueryをやってみましょう。続きからを押すと途中で中断したところから再開できるようです。

スライド・実践・プレビューの3ステップ

Progate   Learn to Code  Learn to be Creative.

Progateはスライドで見て、コードエディターで実践し、プレビューをして答え合わせをする3ステップで学習します。見て試して実行することでより理解が深まると思います。

まずはスライドで解説を見る

Progate

Progate2

実際にコードを書く前には複数枚のスライドが出てきて、コードの意味や使い方を解説してくれます。スライドはどれも丁寧に作られており、初心者でも分かりやすいです。

エディターで実践

Progate_start

スライドで学習した後は、実際にコードを自分で入力して試してみます。左に問題文、中央にエディター、右にプレビュー画面があります。

  • 2015-01-22_111202
  • 2015-01-22_111311

スライドを見直したいときは、問題文の上にあるスライドで確認ボタンを押せば見られます。コード入力画面にはコメントアウトで問題が書かれています。

プレビューして動作を確認

  • 2015-01-22_110708
  • 2015-01-22_113658

コードを書いたら右上のプレビュー画面で動作のチェックをします。jQueryやPHPの場合は Runボタンを押すと実行されます。HTML/CSSではリアルタイムプレビューに対応しており、コードを書けばすぐに結果として反映されます。

Progate_hint

Progate_anser

どうしても分からない時は、右下にあるヒントを見るを押すとヒントや答えを見ることが出来ます。このフローを繰り返していくことで少しずつ知識として身についていきます。

Progate_clear

問題に正解するとレベルが上がって次のレッスンに進めます。

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

過去に正解したレッスンも後で振り返ることができ、忘れてしまっても繰り返し行うことで覚えられるようになるはずです!

まとめ

このサービスは新しいことに挑戦したいけど勉強する時間が無い…。という方におすすめです。自分のペースで少しずつレッスンをこなしていくことで自然と身について行くと思います。

項目ごとに分かれているので目標を立てやすくなっており、これなら続けられそうです。みなさんも一度試してみてはいかがでしょうか?

コメントを残す

writer : 鹿
このブログを管理している鹿。Webデザインとガジェットが好き。