【無料】（コーディング課題01）ワイヤーフレームをコーディングしよう

制作するサイトの情報

まずはHTML/CSSの一歩目としてほぼワイヤーフレームの状態のものをコーディングしてみましょう。

実際にワイヤーフレームをコーディングすることはありませんが、WEBサイトの骨組みをつくるという発想ではいい勉強になるかと思います。

デザインカンプ（Figma）

デザインカンプをもとにコーディングしていきましょう。

カンプはこちらのFigmaファイルの01ページになります。

WEBデザイン・コーディング練習課題用Figma | Figma Community

コーディング練習用のFigmaファイル。▼ 学習サイト

www.figma.com

必要な知識

• HTML
• CSS

基準としては、ProgeteのHTML/CSSコースを終えたくらいになります。

学習・実装手順

• カンプをもとにフォントや色を指定して作成
• リセットCSSは`destyle.css`
• 画像はplacehold.jpを使いましょう

Twitterで学習開始を宣言しよう

ということで、コーディングしていきましょう。

Twitterで学習開始を宣言してみましょう。

コーディングで躓いた際は次のページでヒントが読めるので、参考にしてみてください。