【模写コーディング 練習課題】中級編:ストアサイト(インテリア)/グリッドレイアウト
今回は、簡単な模写コーディングを終えた方向けの、中級編の模写課題を作りました。
「デザインカンプ」と「コーディングポイント」をもとに、コーディングにチャレンジしてみください!
課題内容
南青山で家具やインテリアの企画、販売を行う会社から、製品を紹介するためのWebサイトを制作してほしいと依頼がありました。 オリジナルの製品を一覧で見せられるよう、グリッドレイアウトでコーディングを行います。
設定単価
コーディング:15万円
・トップページ
・Productsページ
・Products詳細ページ(16ページ)
・Aboutページ
・Companyページ
デザインカンプ
▼XDデータ
こちらからダウンロードできます。
▼PC表示(トップページ)
▼PC表示(プロダクト一覧ページ)
▼PC表示(プロダクト詳細ページ)
▼PC表示(Aboutページ)
▼PC表示(Companyページ)
▼スマホ表示(トップページ)
▼スマホ表示(プロダクト一覧ページ)
▼スマホ表示(プロダクト詳細ページ)
▼スマホ表示(Aboutページ)
▼スマホ表示(Companyページ)
コーディングポイント
コーディングのヒントとデモサイト
コーディングに行き詰まった場合は、下記のレイアウト構成の解説とデモサイトを参考にしてみてください。
その他の模写課題
難易度別に入門編~上級編の模写課題があります。
今の模写が終わったら、少しづつ難易度をあげていってみてください。
難易度をあげることで、より実践的なスキルが身についていきます。
それでは、コーディングの練習がんばってください!
学習に役立ちそうでしたら、スキボタンとTwitterでシェアしていただけると嬉しいです。
--------------------------------------------------
Codejump - 作って学ぶコーディング学習サイト
https://code-jump.com/
HTML、CSS、JavaScriptの基礎学習を終えた方が、模写コーディングやデザインカンプからのコーディングを通してより実践的なWebサイト制作のスキルを身につけるための学習サイトです。【入門編~上級編】まで難易度別に無料でコーディングの学習ができます。
Codejump Pro - 実案件をモデルにしたコーディング学習サービス
https://code-jump.com/cp/
企業からのコーディング案件受注を想定した、実践的なコーディング学習サービスです。単価、納期、納品方法、デザイン、仕様など、全て実際の案件をもとにして作られた仮想案件に毎月1件チャレンジできます。
--------------------------------------------------
この記事が気に入ったらサポートをしてみませんか?