XDデザインカンプからのコーディング | 架空のデザイン会社サイト

OVERVIEW

コーディングのスピードアップと、お問い合わせフォームの設置練習のために制作しました。実際の案件を想定して、デザインカンプに違和感を感じた部分については、スクショを添えリストアップしました。

YEAR 2022

URL:https://rea1i2e.net/portfolio/2022-06-13cresta02/

ユーザー名 testuser

パスワード 0324

品質チェックリスト:https://great-coach-196.notion.site/35589be0a31f4ad0810e8fee8ec194b1

■学習者向けのデザインカンプを利用しました。架空のデザイン会社です。
・デザインカンプ
 【コーディング課題】XDからコーディングをしよう【中級編】
   https://pengi-n.co.jp/blog/coding-practice2/

■特徴
・デザインカンプの画像を重ねて、1px単位で正確にコーディング
・品質チェックリストを添えて、チェック項目を報告
・デザインに違和感を感じてクライアントに相談すべきと感じた部分については、スクリーンショットを添えてリスト化
・その他デザインとズレが出ている部分については、スクリーンショット付きでわかりやすく報告
・FLOCSSを使ってCSS設計を意識したコーディング
・画像のアスペクト比保持(幅と高さの比率が異なる画像を入れてもレイアウトが崩れない
・要素の数が増えたり、テキストの増減があってても、レイアウトが崩れない
・スマホファーストで、320px以上のすべての画面幅に対応したレスポンシブコーディング

■スマホ表示

■PC表示

WEBSITE