progateをやってみた

Progateは、ユーザー数180万人を超える初心者向けのプログラミング学習サイトです。youtubeの初心者向けプログラミング動画を見ながら学習してきましたが、基礎を学ぼうと思い始めてみた。

無料会員とプラス会員

まずは、無料会員とプラス会員があり、無料会員は登録のみで使用できる。ただし、初級レベル（１８レッスン）が対象。プラス会員は月額９８０円の有料となっており、上級レベルまでの８０レッスンが利用可能となっている。

progateのレッスンは各章毎、学ぶ内容のスライド→練習問題となっている。練習問題をクリアして章を進めていく。PCとアプリ版があり、PC版はコードをタイプする、アプリ版は決められた選択肢から選択して問題を埋めていく。

アプリ版はタイプする必要がないので、スマホで気軽にできる工夫がされている。

progateで学べる言語は以下のとおり。自分に必要なものだけでも良いし、アプリ版は気軽にできるので、各言語の概要、基礎を学ぶのであれば、全てやっても良いかもしれない。

個人的には、LP作成スキルを見につけたいため、以下で進めていこうと思う。PC版は優先度：高。

HTML & CSSの学習コース：初級編、中級編、上級編、道場コースをやってみた感想。

無料会員で利用可能な範囲です。章を進めていくと、最後には簡易なサイトが出来上がり、達成感があります。

基礎となるラベルやリストなどを学べる。個人的にはfloatの復習になってので、良かったかと。

初級編よりも凝ったサイトを作成します。全体の構成をから、アイコンの表示方法、ホバーやボタンクリック時の動き、ヘッダー部の固定といった章があります。

全体の各構成（ヘッダー、コンテンツ、フッター）に対して、をwrapper＞container＞内容を定義。内容全体の制御はwrapper、サイト全体の橫幅の制御はcontainerなど学習できた。この部分はなかなか腑に落ちない部分だったので良かった。

中級編で作成したサイトのレスポンシブデザインをします。タブレット、スマホに対応したレイアウトにコーディングします。メディアクエリに伴ってbox-sizing、max-width、レイアウトを修正します。

画面幅が、PC版:1,000px超でmax幅が1,170px、タブレット版:670px~1,000px、スマホ版:～670px、中級で作成したPC版のwrapperやcontainerの構成が大きく影響することがわかった。

Flexbox編は概要を学ぶ程度。

概要レベルでもの足りない感がありました。

道場コースは中級編の後、上級編の後に仕様書やヒントをもとに自分でコーディングします。

ヒントや学習コースのスライドを確認しながらすすめます。１回目は、何度がスライドを見返したので、学習編のスライドを参照せずに短時間でクリアできるレベルを目指そうと思う。