今回のコーディングはモバイルファースト（スマートフォン幅の設計から行う）ように指示されています。まずは、スマホ幅のファーストビューを作ってみましょう。
実習範囲
①デザインに従って、スマホ幅でのファーストビューを作成してください。 青色の背景が適用されている部分までです。
②前回作成したヘッダーナビゲーションをデザイン合わせます。 開いた時にも違和感のないよう、配色等を調整してください。
今回の課題範囲では、以下は行わなくて構いません。
- アニメーション設定
- PCレイアウト
本範囲コーディング完了時に、提出の必要はありません。
コーディングが出来たら、書き２つの方法で確認してください。
- デザインと重ねてセルフチェックを行う
- 解説のコーディングと見合わせてみる
コーディングのヒント
よく使うスタイルは共通クラスを作る
今回はクラス命名規則の指定等はありませんので、よく使うスタイル指定は共通クラスとして作っておくと楽です。
BootstrapのCSSクラスのようなものを自作するイメージです。 例えば、テキストの中央寄せ・文字色を白にする、などは今回のデザインでよく使われています。text-centerなどの共通クラスを作っておくと、使い回しが効くので便利でしょう。
PC幅のレイアウトも考えつつhtmlを組む
まずはスマホ幅のコーディング！と、スマホレイアウトだけを考えてhtmlを書くと、PC用のレイアウトを作る時に大幅な構成変更が必要になる場合もあります。
例えば、今回の課題範囲である下図の部分。 スマホ幅では縦並びですが、PC幅では横並びになっています。 この場合は、予め横並びにする要素を包むボックス（赤線）を作っておいたほうが、PC幅のコーディングをしやすくなりますね。
PC幅のレイアウトも考えてブロック分けしておくと
PC幅のデザインを再現する→スマホ幅が崩れる
という手間を減らせる可能性が高いです。
完璧にPCレイアウトにも対応できるHTMLでなくとも構いません。 （やってみたら上手くいかないこともあります） ブロック分けを意識してコーディングしてみてください。