【無料】デザインカンプからのコーディング練習教材-初級編
無料のコーディング練習教材の初級編です。
下記データを無料で提供しています。
・XDのデザインデータ（デザインカンプ）
・完成版コーディングデータ
実際のコーディング例もアップしていますので、わからない箇所は回答例として参考にしてみてください！
➡ コーディング例
⭐ この教材のレベル：初級編
初級編は、Progateやドットインストールが完了済みで入門編を終えた方向けです。
前回の入門編ではデスクトップファーストでしたが、今回はモバイルファーストによるレスポンシブのコーディングをしていきます。モバイルファーストとは、スマホ用のCSSを先に書いていく方法です。
レベルは初級編の他に入門編があります。中級編と上級編は今後登場予定です。
✅ 制作するサイト
シンプルなカフェサイトを作ってみましょう。TOPページと下層ページの合計４ページです。
・TOPページ
・メニューページ
・アクセスページ
・採用ページ
✅ デザインデータ
XDのデザインデータです。AdobeのXD（スタータープラン）は無料で入手可能です。
SP版からコーディングをしていきます。
⬇SP版
⬇PC版
✅ 画像素材
書き出し済みの画像を使用する場合はこちらをダウンロードして使用してください。
✅ 完成版コーディングデータ
コーディング済みのファイルです。
コーディングが初めての方はいきなりコーディングをするのは難しいかもしれません。まずは、このデータを参考にしながらコーディングをしてみてください。
✅ コーディング例
➡ コーディング例
実際のコーディング例を上記のリンクで公開しています。コーディングの際の参考にしてください。
👩💻 コーディングのやり方 👨💻
ご自身の現在のコーディングのレベルに合わせて、次のやり方でトライしてみてください。
✨ レベル１：コーディングがほぼ初めての方
「コーディング例」と「完成版コーディングデータ」を参考にしながら、書き出し済み画像を使ってコーディングする
✨ レベル２：少しだけコーディングがわかる方
「コーディング例」と「完成版コーディングデータ」を見ないで、書き出し済み画像を使ってコーディングする
✨ レベル３：コーディングの基礎知識がある方
ノーマルなコーディング。XDのデザインカンプから必要な画像を自分で書き出してコーディングする
🙆♂️ ポートフォリオへの掲載や著作権について
こちらのデザインをコーディングしたものはポートフォリオへ掲載していただいてOKです。XDのデザインもご自身で改変していただき、オリジナルのデザインを作ってポートフォリオに掲載していただいてかまいません。
デザインを変えず再配布や販売する行為は禁止です。
😄 制作者について
こんにちは。ねこポンと申します。
サイト『未経験からWebデザイナーへ！』を運営しています。業界６年目のフリーランスのWebデザイナーです。
この教材のコーディングの解説はこれから執筆予定です。
気に入ったらぜひ「スキ」をしていただけると嬉しいです！
また、高額ではなく、無料や激安のコーディングの教材をもっと世の中に広げたいと切に願っています。コーディングの進行状況等を「 #ねこポンnote 」のハッシュタグでTwitterなどでシェアしてくださると嬉しいです😂 ツイート拝見いたします。また制作の励みになります。