コーディング課題「デンタルクリニックのウェブサイト」

無料コーディング課題です。
下記のデザインカンプをコーディングし、PCサイトを完成させてください。
Photoshopがなくてもコーディングができるように、記事の最後に書き出した画像をフォルダと、詳細なコーディング指示の画像を入れています。

目次

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

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

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

基本的な設定情報

文字の基本設定

font-size: 18px;
line-height: 1.6;
color: #3e3e4f;
font-family: 'Noto Serif JP', serif;

必要素材のダウンロード

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

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

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

この記事を書いた人

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

目次
閉じる