ピックアップ記事
Progateの「HTML & CSS 初級編」をやってみた

Progateの「HTML & CSS 初級編」をやってみたので
適当に感想を、先にできるようになることを上げておくと

  • HTMLの基本的なタグを理解できる
  • CSSの基本的な使い方を理解できる
  • classの使い方を理解できる
  • float、padding、marginについて理解できる

かなりざっとですがこんな感じかなと

レッスンの大まかな流れ

レッスンの流れとしては以下の通りです

  1. スライドを読んで理解する
  2. 実際にコードを書いて理解する

の2つを繰り返す流れになります。

今回のコースのレッスンの内容はこんな感じでした。

各章
  1. HTMLに触れてみよう!
  2. CSSに触れてみよう!
  3. レイアウトを作ろう!
  4. ヘッダーを作ろう!
  5. フッターを作ろう!
  6. コンテンツを作ろう!
  7. お問い合わせフォームを作ろう!

と最後はお問い合わせフォームを作れるようになります。

ただここではデザインのみで実際にお問い合わせ内容を受け付けてデータを保存するということまではできません。

スポンサーリンク

スライドを読んで理解する

まずはコースに応じた各章毎の内容に関するスライドをみて学ぶ対象について理解します。
スライドはこんな感じでした↓

progate スライド

1ページ1ページ丁寧に作られており理解がしやすいように感じました。
また画像をクリックすると拡大できたりスライドに対してタグがつけられており、関連するスライドが一覧で見れたりするのは面白く、細かいところに配慮がされていて
気持ちいいなと感じました。

実際にコードを書いて理解する

次にスライドで学んだことを実際にコードを書いて理解していきます。

ここが一番面白くすごいと思ったところで、書いたものがすぐ横にあるプレビュー枠に
反映されていきます。
またその下には見本があるため見比べながらコードを書いていくことができます。

画面はこんな感じ↓

progate エディター

環境を自分で用意せずに書いたものが実際に反映されていくところをすぐにみれるのはすごいありがたいなと思いました。

コードを書いていって、OKかなと思ったら確認して次へを押すとチェックしてくれます。OKであれば経験値が溜まっていきレベルアップしていくみたいな 流れになっていきます。

仮にコードに間違いがある場合は「この辺が間違ってますよ」と優しく教えてくれます。

レベルが上がるとどうなるのかまだ理解していませんがこういうのはすごい楽しいしモチベーションが上がると思います(そして絵も可愛くて良い)。

レベルが上がったりコースを完了したりするとTwitterへ連携できる導線も用意されており色々と楽しく続けられるように考えられているなと感じました。

いいなと思ったこと

1コースやってみて、上記で書いた以外にいいなと思ったことですが以下の2つです

editorが自動補完してくれる

たくさんタグなど打ってくる面倒になってくるのでこの機能があるのは大変ありがたいです。

ショートカットが充実

ショートカットがすごく充実しておりキーボードから手を離さなくても進めることができます。

こうして欲しいと思ったこと

1コースやってみて、こうしてほしいなと思ったことですが以下の2つです

やることの消し込み

まだやることの量が少ないのでいいかもですが多くなっていくとどこまでやったっけとかなりそうだなと。
そこで左側のやることを消し込みできるような機能があるといいなと思いました。

経験値アップ機能

ヒントを見ると取得できる経験値が下がってしまうのですが逆に経験値が上がる要素がないので上がる要素があったら面白いなと思いました。(左のやることやコメントなしで見本と同じものを作るとか)

両方とも私が気づいていないだけであったらすみません。

まとめ

1コースやってみて思ったのは快適に楽しくできるということが徹底されているなと思いました。

これを作っている人たちも楽しんで作っていることが伝わってくるように感じました

ぜひこのまま全てのコースをやってみたいと思いますので
やったらまた記事を書いていきたいと思います。

スポンサーリンク

Twitterでフォローしていただけると嬉しいです!!

おすすめの記事