ゆるけーのポートフォリオサイトはこちら

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

コーディング課題コーディング課題
この記事は約2分で読めます。

制作するサイトの情報

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

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

デザインカンプ(Figma)

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

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

Figma
Created with Figma

 

必要な知識

  • HTML
  • CSS

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

 

学習・実装手順

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


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

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

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


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

コメント

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