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