Progate HTML＆CSSコースの最も効率の良い進め方【20周して編み出した】

こんばんは、Yukiです。

今回は「ProgateでHTML&CSSコースをやってるけど、どうやって勉強したらいいかわかんない…。」「道場コースで挫折してしまいました。」

そんな方向けに、自身がProgateHTML＆CSSを２０周した経験を元に「Progate HTML&CSS の最も効率の良い進め方」というのを紹介します。

道場コース・学習コース、初級・中級・上級に分けて丁寧に解説していきます。

【本記事の内容】

Progate HTML＆CSSコースの効率の良い進め方
道場コースの乗り越え方

スポンサードサーチ

初級編の進め方とポイント

最初は初めてのことだらけで難しいと思いますが、初級編の内容は基礎中の基礎なので、時間をかけていいので、何回も復習して理解するようにしましょう！

学習コースの具体的な進め方

学習コースは３周くらいを目安にしましょう！

【１周目】

スライドをしっかり読み、答えを見ながらで良いのでとりあえず時間をかけずに一周しましょう。

１周目では深く理解するよりも「HTML＆CSSってこんな感じなんだー」「初級編ってこんな感じののことやるのねー」くらいのレベルで理解し全体像の把握をすることが大事です。

【２周目】

２周目では実際に出てくる内容をノートにメモしながら理解を深めましょう！

（こんな感じに最低限のことをメモしましょう！）

メモをした後はできるだけ答えを見ずに分からないことノートを見ながら進め、ノートを見てもどうしても分からない時だけ答えを見て進めるようにしましょう！

そうすることで理解が深まります。

【３周目】

３周目ではスライドを軽く読み、実際にコードを書いていきましょう。ここでも２周目と同様に分からなかったらノートを見る！それでも分からないときは答えを見るというやり方で進めていきましょう！

ここまで来れたら次はいよいよ道場コースです！

（この地点で初級編の内容を完璧に理解している必要はありません。余白を作るならpaddingだなーのように〇〇を作るなら〇〇が必要だ！というのがわかるレベルで大丈夫です！）

道場コースの具体的な進め方

道場コースは最低でも４、５周はした方がいいです。

よくProgateは１、２周してどんどん新しいものをやった方がいいという意見を耳にしますが、あれは基礎ができていることを前提としているので初心者の方はあまり鵜呑みにしないほうがいいと思います。

それにHTML&CSSに関しては「よく使う型」があるので初級編に関しては何回も繰り返して型を覚えたほうが良いです。

そうすると自分で何かLPやHPを作るときにスムーズに進めることができます！

では具体的な進め方にいきましょう

【１周目】

最初から答えを見ちゃいましょう！

はっきり言って道場編はいきなり難易度が上がるので初めから自力で作ろうとするのほぼ無理です。自力でやろうとしても全くできず自信なくすだけなのでまずは答えを見て全体の構造を理解するようにしましょう。

全体の構造を理解するときにやって欲しいのが<div>の構造を理解するということです！

道場編の最初の難関と言っていいでしょう。

なのでまずは下のノートのようにどの<div>にどの<div>が含まれるのかを書き出してみましょう！

こうやって簡単に構造を整理することで学習の質と効率が一気に高まります！

１周目ではすぐに答えを見て実際にどんな感じにコードを書くかの大まかな雰囲気を理解することと<div> 構造を理解するように専念しましょう。

【２周目】

２周目は１周目で<div>の構造をノートをみながら実際にコードを書き進めて行きましょう！

コードの書き方がわからない時はまず学習コースでメモしたノートを見ながら進めそれでもわからないときは答えを見て進めてください！

最初は理解できなくてもいいの、でとりあえず答えを見ながら答えのコードをコピペではなく自分で打ち込むようにしてください！

そうするとだんだん意味がわかってきます！

＊答えはコピペではなく自分で打ち込むというのが大事です。

【３周目以降】

３周目以降では２周目と同じことを繰り返すだけです。

わからないところがあれば答えは見なくてもノートを見れば解決できるというレベルまで到達できればOKです！

目安としては５、６周ですがもっと早く理解できる方もいると思うので５、６周という回数にこだわる必要はないです。

初級編で重要な内容

残念ながら初級編の内容は基本的に全て重要です

しかし、今からあげる２つは中級、上級で詳しくやるので「へーこんなのあるんだ」くらいで覚えておいて、深く理解しないで先に進んで大丈夫です。

１HTMLの全体構造と<head>要素の中身

→<!DOCTYPE html>〜のところとか、<meta charser=”~”>のところです。

２ブロック要素とインライン要素

初級編の学習コースでは全体の構成などよりも個々の<p>や<h1>,paddingなどの意味や使い方を理解することが大事です。

以上が初級編の進め方と重要ポイントでした。

中級編の進め方と重要ポイント

中級編ではより実践的な内容になりますが、中級編の内容を使いこなせると結構かっこいいサイトが作れるので頑張りましょう！

学習コースの具体的な進め方 & 道場コースの具体的な進め方

これに関しては初級編の時と同じ要領で進めてください！

中級編で重要な内容

中級編では絶対に理解しておきたい重要なことが３つあります！

逆にここで紹介するもの以外は「こーゆうのあるんだ」と言った感じで「調べながらやればできる」という浅い理解で大丈夫です！

１　margin:0 auto;

→今後もよく使うことになるのでしっかり理解しましょう。

２インラインブロックとブロックとインラインの違いと特徴

→これもしっかり理解しておかないと、レイアウトに大きく影響してくるのでしっかり理解してください。

３ position:absolute;とposition:relative;について

→これは絶対に理解しておかないといけないわけではないですが、仕組みを理解するのに少し時間がかかるので余裕のある方はこの段階で理解しておいた方がいいと思います。

スポンサードサーチ