初心者にもわかりやすく、できれば無料でHTMLやCSSが学べる方法を探していたら、ちょうど良いサイトがありました。

「以前から「WEB初心者が無料で学べるサイト」と評判は聞いてはいましたが、実際に触れる機会は無かったので、今回は試しに無料登録から始めてみました。

初心者は嬉しい会員登録無料

実際に試して感じたProgateの特徴は、以下の3点が挙げられます。

会員登録無料で手軽に始めれる

HTML関連の書籍を数冊買った事がありますが、一冊が結構なお値段するので、ホイホイと買うことはできません。その点Progateは登録無料で追加料金もありませんので、初心者が安心して勉強する事ができます。

初心者にとって「無料で手軽に学べる」というのは、とても重要な要素です。
例えばAmazonで書籍を2,000円程度で購入したとしても、相性の問題で最後まで読み終えない事もあると思います。長い時間かけて読み終えても、期待していた内容と違ったこともあります。

その点、無料だとコストパフォーマンスは気にしなくて良いし、読まずに飛ばすページがあったとしても勿体ないと思うことも無いですよね。

初心者は、まずWEBの世界に一歩踏み出す事が大切で、その後押しをしてくれるのがProgateの「登録無料」という手軽さだと思います。

会員登録は「facebookで登録」「Twitterで登録」と「メールアドレスで登録」の三種類から選べます。

会員登録が完了すると、ダッシュボード的な画面に変わります。「レッスンを始める」をクリックすると、いよいよ勉強スタートです。

オンラインで、いつでも何処でも勉強できる

PCでもスマホでも閲覧できるので、ホントに「いつでも、何処でも」勉強する事が可能です。通勤・通学中や就寝前・昼休み等、ちょっと空いた時間でも手軽に学べるので、「書籍でガッツリ勉強してスマホでちょっと確認」というような使い分けも良いかもしれませんね。

上記のレッスン一覧から、一度終わったレッスンも再度閲覧できますし、前回の続きから再開することも可能です。この手軽さは、まとまった時間が取りづらい社会人には嬉しいですね。

初心者にも見やすくわかりやすい

レッスンを開始すると、何を学習するのか？という事を、スライドでわかりやすく説明してくれます。

最初に学習の目的をしっかり提示してくれるので、勉強する人が迷う事はまず無いでしょうし、全体的なデザインが見やすく操作もしやすいので、抵抗感を感じる人もおそらくいないと思います。

見た目やレスポンスに抵抗感があると「続ける」事が困難になりますが、その点の心配は今の所ありません。

いよいよレッスンスタートです。

実際に入力するから覚えやすい

レッスン画面は三つのエリアがある

Progateのレッスン画面は、三つのエリアに分かれています。

①課題の内容が表示されるエリア

その時に出されている課題の内容が表示されます。スクロールして隠れている部分も確認しましょう。まずは課題の内容を理解する事が重要です。

②コードを入力するエリア

実際にコードを入力しながら学べる事が大きな特徴です。課題の内容に沿ってコードを入力します。

③プレビュー・見本エリア

入力したコードのプレビューを表示するエリアと、プレビューの見本が表示されるエリアです。自分が入力したコードに誤りがなければ、プレビューと見本が同じ見た目になるはずです。

どの部分が間違っているかが確認できる。

入力ミスだったり、間違ったりでコードが正確ではない時が当然あります。そんな時でも丁寧に教えてくれます。

どの部分が間違っているのかエラーで表示してくれますので、間違ったHTMLのまま次に進む事はありません。

HTMLは上から下にコードを読み込む性質上、間違っている部分の直下に影響が出やすいので、エラーで「周辺」と表示されている通り、指定されている行の周辺もチェックしてください。

課題クリアでレベルアップ

いくつか課題をクリアするとレベルアップします。レベルアップするメリットがあるかわかりませんが…まぁ一つの指標にはなる気はします。

ホームページ作成のツボとコツがゼッタイにわかる本

本のタイトルにある通り、とてもわかりやすい本。HTMLとCSSはもちろんの事、ホームページの仕組みから説明してくれているので、初学者にはとてもありがたい内容になっています。

PCやスマホでの勉強はちょっと…思っている初心者の方は迷わずこの一冊をオススメします。

まとめ

とりあえず無料登録して、レッスンを三つほどクリアした時点での感想を書いてみました。

既に知っている内容ばかりだったのですが、初心者の立場で考えてみると、全体的に満足できるサイトであると断言できます。

これだけでWEB制作の全てを学ぶ事は出来ないでしょうけど、未経験者がWEBの勉強をするには、とても良いサイトだと思いますので、ご興味のある方は是非一度試してみてください。

プログラミングの入門なら基礎から学べる Progate

無料で学べる！初心者学習サイト「Progate」でした。