【初心者から創れる人へ】ProgateのHTML&CSSコースをやってみた！

TechAcademyマガジンでは、過去にプログラミングの独学に使えるオンライン学習サービスの実践レポートを公開してきました。

オンラインでプログラミングを学習できるサービスは増えてきていますが、今回紹介するのは「Progate(プロゲート)」です。

Progateは無料で始められるプログラミング学習サービスで、東大生が作ったサービスとしても話題となりました。

 

Progateとは

Progateの対象は主にプログラミング初心者。

Webサービスを創るのに必要となる言語（HTML,CSS,JavaScript,PHP,Rubyなど）をオンラインでわかりやすく学べる、今人気のサービスです。

 

2016年4月からは有料サービスのProgateプラスもはじまり、コンテンツもますます充実しています。

学習のステップとしては、「学習コース」「道場コース」「プロジェクトコース」という3つに分かれていて基礎から実践的な内容まで一連で学ぶことができます。

特に用意するものもなくパソコン一つあればオンライン上で学習できてしまうので、「とりあえず独学で進めたい」という人にはおすすめです。

 

また、Progateでは無料と有料プラン両方用意されています。

月額980円のプラスプランでは、基礎編から実践編まで全てのカリキュラムを受けることができます。

まずはベーシックプランで無料でプログラミングを体験してみるのが良いでしょう。

 

Progateの特徴

Progateには主に3つの特徴があります。

1.わかりやすいスライド

スライドを用いた丁寧な解説で、初心者にもぴったりです。

自分のペースでプログラミング学習を進められます。

また、スライドを検索したり、お気に入りに登録したりもできるので、見たいスライドにいつでもアクセスすることができます。

 

2.ブラウザに直接コードを書き込める

Progateではブラウザに直接コードを書き込むことができるので、

あなたが本メディアを見ているこのブラウザだけで学習を進めることができます。

煩わしい環境構築が一切不要なのは、ありがたい限りですよね。

 

3.描いたコードが即プレビューに反映される

描いたコードの結果もブラウザ上ですぐに確認することができます。

つまり、自分の書いているコードの意味が一目でわかるということ。

実際にものを作ることで、モチベーションの維持にもつながりそうです。

 

[PR] プログラミングで挫折しない学習方法を動画で公開中

実際にやってみた

今回はHTML&CSS初級編で学習してみました。

初級編では、実際にWebサイトを作りながらHTML/CSSの理解を深めていきます。

学習目安時間は4時間と、手軽な点も重要なポイントです。

見やすいデザインのスライドは学習意欲を掻き立ててくれます。

これなら、プログラミング初心者でも安心。

スライド一枚一枚の要点をしっかりと抑えていきましょう。

こんな感じでブラウザに直接書けます。

右下の見本の状態を目指してコードを書いていきましょう。

右上のプレビューはコードを書くとすぐに変わるので、視覚的に理解を助けてくれます。感動！

学習中、忘れてしまったところはすぐにスライドを検索して確認することもできます。

画面左のスライドを縦にスクロール、もしくは検索窓に忘れてしまったタグやプロパティの名前を入れて検索することで、見たいスライドにいつでもアクセス可能です。

 

さくさくと進めていき、

あっという間にwebページが出来上がりました！

にんじゃわんこも祝福してくれます。

 

スライドに沿って学習していくことで、簡単にwebページを作り上げることができました。

HTMLやCSSの基礎の基礎をこんなにも手軽に学べるのは本当に嬉しいですよね。

経験値が溜まっていくとレベルがアップします。facebookやTwitterでシェアできるので自分のモチベーションアップにもつながるはずです！

 

今回のレビューはここまで。

プログラミング初心者の人は、まずHTML&CSS初級編で学習してみると良いかもしれませんね。

他にも無料で使えるプログラミング学習サービスはあるので、合わせてチェックしてみてください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。

[お知らせ]TechAcademyでは初心者でも8週間でエンジニアになれるRuby on Railsオンラインブートキャンプを開催しています。RubyでWebアプリを開発したい方はご参加ください。