無料コーディング課題です。
下記のデザインカンプをコーディングし、完成させてください。
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