ProgateでHTMLとCSSの基本を学習してみました

プログラミングの勉強がしたい時に何をしたらいいのか分からなかったので、調べてみたところ「Progate」というサイトにたどり着きました。

学習できる言語もたくさんありましたが、今回は少し内容を見たことあるHTMLとCSSを学習してみました。

今回は、HTML&CSS初級編を一通りしてみての感想をまとめてみました。

 

 

初めてのプログラミングだけど大丈夫?

Progateのプログラミング学習は初心者でも問題なく進めることができます。

私は、HTMLとCSSに関してはコピペ程度で見たことしかありませんでした。

自らコードを書いてというのは初めてでしたが、問題なく進めていくことができました。

 

コードは全部自分が書くの?

Progateでは、最初にテキストでの説明を読んで実際にコードを書いていく流れで勉強していきます。

コードは基本的に自分で書いていきます。開始タグを正しく書いていれば終了タグは自動で入力されます。

あと、「:と;」「{と}」なども正しく入力されていれば自動で出てきてくれます。

そして、コード内で使う文面やURL、カラーコードなどは、コピペできるボタンがあるのでそこまで大変ではありませんでした。

 

ちゃんと表示できているのかはすぐ分かるの?

コード画面では、横に自分のプレビューと正解のプレビューが見られるようなレイアウトになっています。

そこに自分のコードでちゃんと表示されているのかすぐに確認することができます。

 

間違っていた場合はどうなるの?

コードを入力していて思うのは間違えたらどうなるのか、ということですよね。

コードを書く画面では、正しい内容を入力していれば色が変わってくれます。

普通のメモ帳などで書いていたら、間違いには気が付きにくいですよね。

Progateであれば、色が自動で変わってくれるので視覚的にも正しく入力できているかどうか確認しやすくなっています。

コードが全て入力できたら答え合わせのボタンがあります。

正解していれば次のステップに、間違っていればこの行のここが違いますと教えてくれます。

 

どうしても答えにたどり着けない時は?

間違いを指摘されて確認したもののどうしても答えが分からない時もありますよね。

そんな時は、正解のコードを見ることができます

ボタンを押して初めに出るページは正解のコード、自分のコードを見るチェックをつけると右手に自分のコードと間違っている部分が分かりやすく表示されます。

なので、どうしても答えにたどり着けない時も大丈夫ですよ。

 

モチベーションは保てそう?

Progateでは、勉強を進めるにつれ経験値がもらえる仕組みになっています。

各パートごとの正解コードが書ければ、経験値が貰えレベルアップするという機能があります。

レベルアップして何か貰えると言うわけではないようですが、モチベーションを保つにはいいシステムだと思います。

ダッシュボード画面にはカレンダーが付いており、その日の頑張りによって色が変わります。

頑張った日ほど色が濃くなり、視覚的にも頑張った日が分かるので便利です。

 

HTML&CSS初級編を一通りしてみて

テキスト勉強で文字のみの学習をして続かなかった方は、Progateでプログラミング学習をしてみるのがいいと思ました。

私自身、テキスト学習で続かなかったのですが、Progateでの学習はサクサクと進めることができました。

 

Progateの場合

説明を読む→実際に書く→正解かどうか分かる→納得し進められる

このような流れでプログラミング学習を続けていくので学習しやすいと感じました。

 

テキストの場合

説明を読む→何となく理解する→次のページで前回のコードが出てくる→新しいコードと混ざりよく分からなくなる→やらなくなる

実際に書くことはせず頭の中で理解したような気分になっただけで、章が変わって久しぶりに前回のコードを見たら何だこれ状態なんですよね。

 

なのでプログラミング学習をする中で、コードを自力で書くというのは大切だと思いました。

テキストで読み実際の手を動かしコードを書いて勉強できるProgateはとても勉強しやすいシステムなので、気になった方は行ってみてはいかがでしょうか。