ProgateのHTML&CSS初級編は4日の勉強で十分【実践記】

ProgateのHTML&CSSの初級編が終わったので、実際にした勉強の方法や進めて方を書きとめておきます。
僕は4日(連続ではない)かかっていますが、1日数時間程度しかやっていないので詰め込めば休日の1日で終わると思います。あまり時間をかけずに初級編が完璧になったので、個人的にはなかなか良いやり方なのではないかと思います。
Progateでの勉強で最初にHTML&CSSの勉強をする人もいると思うので参考にしてみてください。

Progate HTML&CSS初級編の進め方

具体的な手順はこちら。

  1. 最初はスマホ版をする(1時間30分)
  2. スライドのみを見てポイントをルーズリーフにまとめる(1時間30分)
  3. Web版でコードを書いていく(3時間)
  4. 初級編で作ったページを何も見ずに模写する(5時間)

一応、やり方を変えて4回初級編をしていますがキツくはないです。がむしゃらに何周もするといったことではなく、段階的にインプットしたら4回で終わったという感じです。1度に全部詰め込むと頭がパンクしますが、何回かに分けて詰めていけば自然と頭に入ってきます。

 

僕の場合はProgateを始める前によくわかるHTML5+CSS3の教科書を読みながらコードを書いていましたが、いきなりProgateから初めていいと思います。

 

それでは、僕がした実践した方法を書いていきます。後にまとめて書こうかとも思いましたが、各ステップごとに一緒にポイントや注意点も書いておきました。

1.最初はスマホ版に挑戦

まずは、手軽にできるスマホ版から始めました。Web版は後からする予定でしたが、アプリ版とWeb版では少し違うことは後からWeb版をする時に知りました。結果的にはスマホ版から始めて良かったと思います。(もちろん後からWeb版もします)

 


メールアドレスの認証をして早速始めました。朝の6時くらいから一気に全23レッスンを終わらせました。1時間30分くらいで終わりました。

進め方は、取り敢えず初級編23講座を一通り終わらせます。
Progateではスライドで説明→演習という流れになっています。1つの講座自体はすぐに終わります。演習も簡単で、分からなくてもヒントや見るべきスライドも書いてくれているので問題なく進めると思います。

個人的にはそこまで詰まる所もなく、内容も理解できていました。ブログでほんの少しいじっていたり、本で勉強したりしていたこともあって頭の中に入りやすかったです。

スマホ版はパズルのように当てはめていくだけなので簡単

最初はスマホ版をやって正解でした。ProgateにはWeb版とアプリ版がありますが、最初はアプリ版をやる方がいいです。
理由はこちら。

  • 演習問題はパズルのように並べるだけなので簡単
  • いつでもどこでも手軽にできる

Web版はタグ「<」から自分でコードを打っていかナイトいけません。それに対して、スマホ版は使うものが用意されていて、それを並べるだけなので直感的にこんな感じかなとやっても意外と正解になったりします。パズルみたいでスラスラと解いていけます。

さらに、スマホなので隙間時間にちょろっとやったり、休憩中などもできます。椅子に座ることに慣れていない人でも、ベッドに寝転びながらでもできます。

大体挫折するポイントは、難しかったり、めんどくさいのこの2点なのでここをクリアしているので取っつきやすいかなと。
とにかく初めはスムーズに進めていける方がいいと思うのでスマホ版からすることをオススメします。

本質は何か探し当てることを意識する

ここでは、とにかくHTMLとCSSの概念や全体像を理解することを意識していました。これを意識することとただやっただけとでは圧倒的に差が出てきます。

  • HTML→タグでくくって文章を構造化する。必要な箇所にはラベルを付ける。
  • CSS→HTMLに対してデザインしていく。色や大きさ、配置なども担当。

ざっくりこんなイメージができるようになっていればクリアです。これめっちゃ重要!

次のステップに進んでOKです。分からないところがあっても気にしなくていいです。この段階では、何周もせず1回だけでいいです。あと、メモは次のステップから取っていくのでこの段階では取らなくていいです。

2.スライドのみを見てポイントをまとめる

次は2周目に入っていきます。と言っても、1周目と同じやり方でやっても意味がないのでやり方は変えます。(同じやり方だと飽きるというのもあります)

Progateは、演習問題はやらずにスライドだけ見ることもできます。紙にスライドのポイントだけメモをしていきました。スライドだけ見ていくことができるので、重要なところだけメモしていきました。

 

上の写真は僕が実際にメモしたものです。HTMLとCSSでルーズリーフ2枚(表裏で4枚)でまとめました。個人的には上手くまとめられたんじゃないかなと思っています。

まとめる内容は、初級編で書いてあることで必要なものです。
具体的には、

  • HTML→全体像、タグの使い方、タグの種類
  • CSS→宣言の仕方、プロパティ名、プロパティ名の書き方

これくらいをスライドに書いてあるもののみをまとめた感じです。
それに加えて、コードを書いていく中でもうちょっと知っておいたほうがほうがいいなと思ったとこや気になったとこは調べて書き加えました。ただし、そんなに突っ込んだ内容のことは書いていません。
正式な言葉はあまり使わずに、自分に分かりやすいように書いていきました。

頭の中のイメージを書き写していきます。文章で書くというよりかは本当に「メモ」って感じでです。この辺はテキトーに

ここは、1時間30分くらいで終わりました。

まとめる時の注意点

まとめる時の注意点は、

  • 綺麗なノートを作ろうとしない(字も汚くて良い)
  • 本当に必要なポイントのみを書く

よく板書やノートにこだわる人がいますが、必要なものをカンニングペパーみたいにザァーっと書いていく感じいいです。誰に見せることもないので、美しいノートにしなくていいです。

ノートでもルーズリーフでも、メモアプリでも何でもいいですが個人的にはルーズリーフが良いと思います。iPadとかで慣れていてそちらの方が良い人はそちらでいいと思います。僕はまとめる時はまだ紙のほうがいいので、そちらにしました。

箇条書きやそれに近い書き方をしていけばメモらしく、ある程度見やすいです。学問的なことに関しては正直どうでもいいので、難しい言葉は使わずに、「これ」とか「それ」とか使ったり、図を使うといいです。(図を使うことはマジでオススメ)

id属性とは…要素に対して固有の名前をつける場合に使用します。

こんな堅いのはNGです笑

 

あと、書くことはできるだけ減らします。あれもこれも書いていると、まとめる意味がないので。

それに今はまだそこまで覚える量はありませんが、色々な文法的ルールやタグ、プロパティがあるので到底全てをまとめきることは不可能です。

HTMLは比較的分かりやすくいですが、タグはたくさんあり、1つ1つに意味があります。それに対してCSSは宣言自体はセレクタを書いて{}でくくるだけで単純ですが、奥が深いです。

なので、全部まとめることは諦めましょう。そんなことをするのは時間の無駄です。それより実践実践!

3.ヒントなどを見ずにWeb版をやる

ここからはWeb版に移りました。

Web版も内容自体はアプリ版と同じですが、アプリ版みたいに使うコードは並べられていません。なので、自分でコードを書いていかないといけません。

プログラミングもそうですが、この手のものは実際に手を動かしてなんぼのとこもあるので、コードを打つのに慣れていきます。
分かっているようで、分かっていなかったところは意外とあるので良い訓練になります。

僕は2箇所くらい詰まってしまいました。
原因は、

  • 綴りミス
  • 閉じタグ忘れ

でした。

最後の方は、1つのレッスンで打つ量が多くてミスする可能性があります。しかも、途中で合っているか確認できません…
間違えている時は、一応該当箇所を指摘してくれますが、基本的に自分で見つけないといけません。コードを書く時は上の2つに注意です。

 

僕の場合は3時間くらいで終わりました。修了時間の目安が3時間50分なのでまぁまぁですね。時間はあまり気にしなくていいと思います。

Web版をする時の注意点

注意点はこの2点です。

  • できるだけヒントを見ない
  • 暗記だけは絶対にダメ!

一応、理系の要素があるので念のため言っておきました。暗記はNG行為です。

必要な理論的な部分を覚えておけばいいです。テストや試験をするわけではないので、将来的にWeb制作するときも必要なら見たり調べれますから。よく使うものは勝手に覚えます。

僕は見ませんでしたが、ヒントは出来るだけ見ないように。

2.までをしっかりやっていれば基本的には何も見ずにいけるはず。忘れていても、メモをチラ見すれば余裕だと思います。

4.何も見ずに完全模写

これが初級編最後の総仕上げです。
今までは誘導されて1つのページを作っていましたが、1から自分でコードを書いていきます。

 

何も情報がないのはさすがに無理なので、簡単な仕様書を作っておきました。

  • 全体像を書く
  • 幅や色彩コード、フォント、大きさを書く
  • ヘッダの情報を書く
  • 画像のURLはあらかじめProgateからメモアプリにコピーしておく

余白や色とかの情報はコードの中身を見ないと分からないですが、ここは仕方ないです。初めなので僕はホワイトボードに写しましたが、意外とめんどくさいのでProgateのやつ(左側にあった手順など)を見ながらしていってもいいと思います。もちろんコードは基本見ない!

設計図ができればコードを書いていきますが、その前にテキストエディタを用意します。使うテキストエディタは、Microsoft(マイクロソフト)のVisual Studio Codeを使います。インデントに沿って縦線がつくので見やすいです。

初期設定では入力予測して補完してくれてありがたいのですが、できる限りOFFにしました。

  • HTMLは宣言のみ途中で表示、閉じタグの予測は表示
  • CSSは入力候補の表示は一切なし

これくらいの設定で挑戦しました。これは実際にやってみたらハードでした笑

良い訓練にはなるのですが、タイピングが早くないし、綴りも間違えるのでこんなドMみたいな設定はしなくていいです。初期設定のまま使い方の確認だけしていればOKです。

 

これで準備ができたので書いていきます。

一応、自分でルールを決めていました。

  1. 全てのコードを自分で書く(インデントの関係上HTMLの終了タグはTabで入力してよい。)
  2. 予測は<!DOCTYPE HTML>と閉じタグ以外は表示しない
  3. Googleで検索してよい

ここら辺は自分好きなように。調べたものは後でメモするために調べたサイトのタブは残しておきました。

 

こんな感じで進めていきました。

3時間10分後…

完成しました!ほぼ自力なので、達成感がやばかった笑

この後は、一旦休憩してから調べたところや分からないところ、あやふやなところを中心に復習します。復習には2時間くらいかかりましたが、良い勉強になりました。

仕様書にあまり時間をかけない

大体、欲しい情報を書きこんだらいいです。あまりここに時間をかけないように。どうせ書き間違えていたり、忘れていたりします。正直、多少の大きさや幅のズレは大目に見ます。

というのも、Progateで正解したコードをそのまま入力しても表示は少し違います笑
これから他のサイトを模写する時もここは気にしなくていいと思います。

テキストエディタの設定にはこだわらない

僕はここで少し時間を使ってしまったので、使い方が分かれば使っていっていいです。

こんなところで時間を使っていて無駄ですので。僕みたいにハードな設定にする必要もありません。次からは、自分が使いやすいように入力補完機能も使いたいと思います。

最大限考えるが、調べても良い

最後の仕上げなので出来るだけ何も見ずに完成させたいところです。どのタグを使って、どのプロパティを使って、どうやったらこうなるのかを時間がかかってもいいのでよく考えます。理論的な部分は限界まで勧化抜きます。今までで習っタコとを頭からひねり出します。

ただ、どうしても分からないとなったら検索して調べます。考えて分からないものは、分からないのでここで初めて検索の許可を降ろします。

次回は中級編をやっていく

取り敢えず初級は何とかクリアと言ったところでしょうか。

何かに挑戦しタイト始めたHTML&CSSですが、マスターしたい。そんなに難し苦なく、楽しめるので興味があればProgateで遊んでみるのもいいと思います。

次は中級編に挑戦していきます。また、学習のまとめをブログに書くのでお楽しみに!

コメント

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