有機野菜の定期宅配のサイトをコーディングしてみよう

下記のデザインカンプのようにHTMLとCSSでレイアウトを組んでみよう。

条件

  • 新規フォルダ「root」に、index.html、style.css を作成
  • 下図通りにCSSでレイアウトしてください(デザインカンプのPSDファイルは記事最後にて配布)

デザインカンプ

デザインカンプ

PSDデータをダウンロード:design.psd

コーディングする時に…

このレイアウトにどれくらいの時間がかかるか計測してください。
ポートフォリオなどにその制作したものと時間を掲載していると、技量がわかりやすいのでオススメです。