仕様書に記載がない部分が多々あるので割と初見殺しです。
仮に正解できても、後半で指摘されることもありそこが混乱させられる要因になります。
仕様書に記載がない部分含め、必要な記述を順に解説します。
記述すべきセレクタが多いので各々説明します。
ＧＥＮがつまったところほど長文です（）
詰まったパートを目次から飛んで参照してください
1.トップ部分を作ろう
ＧＥＮが回答した場合のＣＳＳ内でのセレクタ表記と意味をまとめておきます。
必ずしもこれに合わせる必要はありません。
最も外枠の背景担当。背景画像と背景がループしない設定にする。
top-wrapperの１つ内側。paddingと中央寄せを記述。
これらをtop-wrapperにまとめるとpadding設定の際に背景が余白扱いで白くなってしまうので注意。
中央寄せ(text-align:center;)はtop-wrapper top-container いずれでもＯＫです。
キャッチコピー部分。文字間隔の調整は letter-spacing で行う。
答えだとh1が使われてますが、h1は記事タイトルになるのでh2くらいの方が良い気がしてh2にしてみました。
「Progateはオンラインプログラミング…」「or」部分。
.top-container p で余白を設定するとpでくくられた箇所すべてに余白が設定されてカオスな感じになってしまいます。
別途クラスを設けてpを独立させるか後述のように独立したボタン側で余白を設定しましょう。
ちなみにプロゲートの回答では見出し、文章ともにさらっとbr(改行)タグが使われています。ここまでプロゲートで触れてはいませんが、ブロガーならおなじみ（というか世界一有名）のタグだと思うのでガンガン使いましょう。
ボタン3つの基本設定。仕様書記載がない点が2か所ある。
・角に丸みを帯びせる：border-radiusで4px
・上方向がつまるの防止：displayでインラインブロック要素にする
ボタンにカーソルが重なった時にエフェクトをかける。透過度(opacity)は１にしておく。
仕様書記載はないが、見本では反映されているので用意しておこう。
それぞれのボタンの独立したクラス。各々背景色を設定したら、余白を追記して位置調整。
ある意味最も見逃しがちな部分。fa(font awesome)で出したアイコンと直後の文章の間に若干余白がある。
仕様書には書かれていないが、margin-rightを5px用意しておこう。
2.ヘッダーを作ろう
１ほど鬼畜ではありません。この問題で作るのは「ヘッダー」なので、htmlはトップ部分より上から書いてくださいね。
（初見でトップ下から書き始めたなんて言えない）
背景色と高さを指定。１と同じ理屈でwidth~px;はheader-container を作ってそちらで指定する。
「スクロールしたときにヘッダー」は仕様書にないので注意。
z-indexを10、positionはfixed、widthは100%に指定すると実装できる。
ヘッダーを作るにあたって必須なので暗記しておく。
意味はそれぞれ「z方向に10手前にするよ」「画面左上起点に固定するよ」「横幅いっぱいに表示するよ」だが、意味を考えなくても記述できる状態にしておくことをおススメする。
横幅と中央揃えだけ指定すればＯＫ。
横幅と上方向の余白のみ指定でＯＫ。float:leftなどは不要。
初級道場コースではheader-logoというdivクラスでくくって宣言していましたが、今回はロゴ部分が画像なのでこの形が楽です。
今回はヘッダー右方向にaタグが使われているので、これを用意しておかないと後々面倒になる。
右寄せ(float:left;)を指定しておく。
各種色と余白を指定した段階で大体詰まる。
まずログインの文字をヘッダー中央にもっていくため line-heightを65px用意する。
これだと文字と余白部分しか白くならない。displayでブロック要素にするとボタン全体に白が広がり選択できるようにする。
ログインボタンが時間差でぼわーっと明るくなる指定をする。
背景色は rgba(255,255,255,0.5) とすることでカーソルが重なると若干明るくなる。
時間差で明るくさせるために transitionをall 0.5sにする。
3.レッスン一覧部分を作ろう
レッスン部分全体。薄く色味がかった背景色、高さ、中央寄せを指定しておく。
幅も指定したくなるが、いったん我慢。
英文部分。字体と余白を指定すればＯＫ。
4つのlessonクラスを囲う。ここで幅と要素の中央寄せを指定する。
プロゲート側の回答内htmlではlessonsクラスの宣言はあるが、対応するCSSはない。おそらく記述忘れ？
（追記）回答では序盤に作成したcontainerを再利用（？）することで幅と要素の中央寄せを実現している。l
アイコン、言語名、説明文のひとかたまり。
width:25%; とfloat:leftを指定すると綺麗な横並びになる。逆にここまでで綺麗な横並びができなければどこかでミスっている可能性高し。
img とlesson-title をくくったもの。親要素要員として position:relative のみ指定。
アイコン内の言語名部分、p内でクラス化する。
lesson-iconに対する子要素としてpositionをabsoluteにを指定。これにより「重ねて表示」が可能に。
absoluteにしたことで文字の基準位置が変化する。topを44%、widthを100%にすれば解決。
absolute と relative がわからん！という方向けに簡単な解説をひとつ。
absoluteは「とりあえず左上行くぞ！」です。relativeは左上基準を決める指定だと思ってください。
今回はlesson-iconにrelativeを指定して左上基準を作ってます。
その内側にlesson-titleがあり、lesson-titleにabsoluteを指定したことで
おい、文字共！lesson-icon 左上行くぞ！
となっています。
そこから width:100%;で中央に寄せて、top:44%;で「基準位置から44%下へ」の意になります。
アイコン下の説明文、p内でクラス化。
これに限らずプロゲートの道場コース編回答にある程度のっとってクラス名を充てていますが、text-contentsにあたる箇所は学習コースではtxt-contentsになっているので注意です（）
lesson のひな型を作ってみました。
See the Pen povmNxq by 仙人のGEN@毎週月曜18時youtube生放送 (@hagenogendesu) on CodePen.
4.メッセージ部分を作ろう
要素名は少ないですが、仕様書だけではわからない部分がてんこ盛りです。
メッセージ部分の大外枠。記述内容はmessage-containerと同じなのでどちらかあれば正解。
一応用意した程度。message-wrapperの内側大枠。余白・幅、中央寄せ２つを指定。
message-wrapperにまとめて記述でクリアは可能。
プロゲート内の答えではcontainerです。わかりやすくするために長い名前にしました。
「さぁ、あなたも～」の部分。h2内でクラス化。色だけ指定。
その直下の英文はプロゲートの答えだとh3タグが使われているが、pタグで書いても正解になることを確認済み。
font-weightをnormalにする記述も必要らしいが、なくても正解できる。
答え通りに書いても見本の字体と同じにならないのでどうしようもない
.message h2でもＯＫです。
ボタン部分。span内でクラス化。
仕様書記載はないが文字色はwhiteでおｋ。
インラインブロック要素への変換、cursorをpointerにすること、border-radiusを4pxにすることも忘れずに。
プロゲートの答えではbtn とmessage を足していますが、わかりやすくするため独立させました。
ボタンをクリックしたときの変化を示す。今回はへこませる。
ボタンをへこませるにはクリックしたときに「①影が消える ②影の高さ分(7px)ボタンが下がる」という変化を作ればよい。
①box-shadowをnoneにする。
②このクラスタを基準にするため positionをrelativeに、topを7pxにすることで相対的に下に7px下がる。
ボタン側に absolute は不要です。
5. フッターを作ろう
最後ですが一番簡単です。
うっかり</html>の下から書かないようにしましょう（実体験
大外枠。上方向のborderのみ指定。
残りの記述は内側のfooter-containerに記述することでborderが途切れないようにする（横いっぱいに広がる）。
widthと中央寄せを指定。
footerにすべて書いてしまうと、borderも幅と中央寄せのの影響を受けて左右に余白ができてしまいます。
（その状態でも正解できますが一応厳密に）
幅と上方向の余白を指定。
文字サイズと下方向余白、色を指定。
