こんにちは未来電子テクノロジーでインターンをしている秋吉です。
タイトルの通り、HTML&CSSの道場中級編を学習しています。
下手したら初級編より忘れてるんじゃないだろうかというくらいわからないところがあるので、潔くスライドやレッスンに立ち戻ったり検証使ってめちゃくちゃ写経している状態です。
サイト内の構成がよくわからず、その不安でスライドに戻ったり検証を使ったりしているのですが、こればっかりはお作法な気がするので、とにかく手を動かして型（流れと言ってもいいかも）を覚えるしかなさそう。
例えば、<body>内のHTMLの記述。

<div class="main-wrapper"><!-- メイン全体（余白も）まるっと含む。というかこれを作ることで、CSSで余白やブロック要素の設定をする -->
<div class="container"><!-- メインの中でもコンテンツの大きな塊。まんまコンテナ。 -->
<div class="contents　a"><!-- コンテナの中身です。 -->
</div>
</div>
</div>

雑どころの話ではないですが。
こうやって表示したいコンテンツの内容を大きく分割して、細かいところを記述していくっていうのがサイトを作るときの大きな流れなんだなっていうのが、手を動かしていてやっと腹に落ちたという。
そのうえで、CSSの記述をやりやすくしたり後から内容を変更しやすくしたりっていうときに、ある程度丁寧に分けたほうがやりやすい。
道場コースで自分の書いたコードがそれはもうぐっちゃぐちゃになったときに、一度検証を使って書き直したときに痛感しました。
ちゃんと分けないと、paddingとmarginを設定しても変になったり、別のところで設定したtext-align:centerがなぜか設定していないところに効いてたり……。
なので、こういったある程度「覚えたほうがやりやすい」ものは、しっかり覚えるようにしていきたいと思います。

プログラミング初心者のため、内容に誤りがあるかもしれません。もし誤りがある場合は修正したいのでどんどん指摘してください。