コーディング課題「フィットネスジムのウェブサイト」

無料コーディング課題です。
下記のデザインカンプをコーディングし、完成させてください。

Photoshopがなくてもコーディングができるように、記事の最後に書き出した画像をフォルダと、詳細なコーディング指示の画像を入れています。

目次

デザインカンプの詳細な指示

通常コーディングの仕事を行うときにはPSDやXDのデザインカンプから数字やフォント、色などを読み解くものです(ですから、カンプが雑だったりHTMLの理解がないデザインだとコーダーが困るのです)

今回は初心者向けの課題ですので、詳細な数字を指示書として配布させていただきます。

基本的な設定情報

フォントファミリーのコピーは下記をご利用ください。

font-family : "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN",
      "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif

必要素材のダウンロード

HTMLファイル、CSS(reset含む)、imagesフォルダに必要画像がはいったzipファイルを下記よりダウンロードできます。

答え合わせにどうぞ
実際にコーディングしたページ:https://webtan.tech/gym_html

よかったらシェアしてね!

この記事を書いた人

Webデザインの講師や、事業主のウェブサイト運用のサポートを行っています。

目次
閉じる