Progateの有料版でHTMLとCSSを勉強してみた【控えめに言っても神サービス】

CSS

Progateの有料版を1ヶ月ほど利用をして勉強した結果、HTMLのコーディング・マークアップのスキルが劇的に改善・向上しました。今回は、改善された理由についてシェアします。

Progateの有料版の会員になろうか迷っている方、HTMLとCSSを基礎から勉強して身に付けたいと考えている方、Progateをやらずにサイトの模写コーディングするレベルまで行ったけど、途中で挫折した方に参考になる記事です。

Progateって人気のコンテンツだけど、勉強の効果についてはツイッターなどのSNSで賛否両論が出回っているので、ある意味、そのウワサみたいなことに振り回されがちです。

ボクは以前、HTMLとCSSを使ったお手本サイトの模写コーディングをしていたのですが、2度ほど途中で挫折しました。どうもうまくいかず、そもそも基礎が怪しいのかもと思い、思い切ってProgateのコンテンツで初級編から上級編、道場も上級編まで全て行ってみました。

Progateをして改善された理由

Progateをして改善された理由

Progateをする最大の効果だと思ったことが、HTMLのマークアップの基本の方法が学べたことです。ボクはProgateをせずにお手本サイトの模写コーディングをしていたのですが、CSSがなぜか想定通りに効かなかったり、かなり手こずりました。

ある程度、我流のクセみたいなのが付いた状態からProgateをしたので、自分がダメだったなあと気づいたことが2つあります。順にみていきましょう。この2つを改善したら、おそらく誰もが、つまづきがかなり解消されるんじゃないかなあと思います。

1.ProgateでHTMLの基本的なマークアップ方法を身につける

HTMLの基本的なマークアップ方法が学べる

Progateをして、自分が改善されたと思ったことが、HTMLのマークアップ方法です。このHTMLのマークアップがめちゃくちゃ大切なことが分かったのです。

なんでかというと、、

HTMLのマークアップをProgateのようにしてみると、CSSが想定通り、思った通りに効かない、おかしくなるといったことが起こらなかったからです。

具体的に超重要!!と断言できるのが、とにかくちょっとした単位でも、divタグで包むことで解決されることが多かったので、divで包むことがめっちゃ大切なことが分かりました。

例えば、h2、h3タグなど、そのまま単体で書きがちですが、h2やh3など単体のものもdivで包むことが大切だったりします。

とにかくdivタグを使って細かな要素の単位ごとに包むこと、さらにそれを大きな単位でも包むという考え方が大切だと実感しました。そうすると、CSSの効き方もうまく行くことが多かったです!

2.CSSのあてかたも基礎を身につける

CSSのあてかたも基礎が学べる

例えば、文字を中央揃えにするtext-alignを親要素に当てるという基本もできてない場合があったりして、そんな時は思ったようにCSSが効いてくれないです。

CSSを親要素にあてることも、意外とできてないことがあり、Progateしてると、ココはこれまでできてなかったなあと思った場面も何度かありました。CSSを適切にあてる方法も、Progateで学ぶことで習慣化され、基礎が身につきます。

まとめ

  • とにかく細かな単位でもdiv要素で包むことが大切。つまりHTMLは単位、ユニットで捉え、包むことが重要。
  • CSSのあてかたも意外とできていないことがある。直接あてるよりも、親要素にあてるように作り込むことで、ちゃんと効くようになる可能性が高い。
  • Progateで以上の基本が身に付き、スムーズにレベルアップできる。

以上、ProgateのHTMLとCSSの初級編から上級編まで(道場も含む)を全て行ってきてコースを修了し、次のステップに行けたので、Progateに本当に感謝です。

ツイッターでよく目にするのが、「○○周しました!」的なツイート、あるいはそれに対する批判的なツイートです。ボクの場合は、道場ならもう1周はありかな?程度で、レッスンについては、最初から何周もする必要はないかなあと思います。必要に応じて、不安な箇所だけを復習、または、LPの模写など、次のステップにいって、できてないなあと思ったら参照するみたいな使い方で良さそう。

とりあえず、htmlとCSSはProgateを卒業したので、今はProgateを使ってませんが、月1000円程度で安いので、特に解約せず、有料会員のままです。とりあえずは復習に使ったり、新しく追加されたflexboxなど他の勉強にも使ってみたいと思います。

使ってないので今すぐ解約しないと損!という気持ちにならない料金なのが、とても良さげです。

とりあえず、あくまでボクの意見ですが、批判が思い当たらないくらい、感謝すべきサービスかと思っています!!

コメント

タイトルとURLをコピーしました