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

コーディング課題 コーディング課題

制作するサイトの情報

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

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

デザインカンプ(Figma)

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

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

WEBデザイン・コーディング練習課題用Figma | Figma Community
コーディング練習用のFigmaファイル。▼ 学習サイト

 

必要な知識

  • HTML
  • CSS

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

 

学習・実装手順

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


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

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

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


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

コメント

タイトルとURLをコピーしました