【無料】デザインカンプからのコーディング練習教材-入門編

2021年4月25日 19:11

無料のコーディング練習教材の入門編です。

下記データを無料で提供しています。

・XDのデザインデータ（デザインカンプ）
・完成版コーディングデータ

実際のコーディング例もアップしていますので、わからない箇所は回答例として参考にしてみてください！
➡ コーディング例

⭐ この教材のレベル：入門編

Progateやドットインストールを終えたばかりの人に最適な一番簡単なレベルです。

レベルは入門編の次に初級編、中級編、上級編が登場予定です。

簡単なコーポレートサイト（企業サイト）のTOPページを作ってみましょう。１ページです。レスポンシブ対応もします。

XDのデザインデータです。AdobeのXD（スタータープラン）は無料で入手可能です。

⬇PC版

⬇SP版

書き出し済みの画像を使用する場合はこちらをダウンロードして使用してください。

コーディング済みのファイルです。
コーディングが初めての方はいきなりコーディングをするのは難しいかもしれません。まずは、このデータを参考にしながらコーディングをしてみてください。

入門編のコーディングファイル一式では、理解しやすいように非常にシンプルな書き方のコーディングをしています。CSSが破綻しやすい内容になっています。保守性と拡張性の高いCSS設計をコーディングについては次の初級編で扱います。

実際のコーディング例を上記サイトで公開しています。コーディングの際の参考にしてください。

ご自身の現在のコーディングのレベルに合わせて、次のやり方でトライしてみてください。

✨ レベル１：コーディングが初めての方
「コーディング例」と「完成版コーディングデータ」を参考にしながら、書き出し済み画像を使ってコーディングする

✨ レベル２：少しだけコーディングがわかる方
「コーディング例」と「完成版コーディングデータ」を見ないで、書き出し済み画像を使ってコーディングする

✨ レベル３：コーディングの基礎知識がある方
ノーマルなコーディング。XDのデザインカンプから必要な画像を自分で書き出してコーディングする

こちらのデザインをコーディングしたものはポートフォリオへ掲載していただいてOKです。XDのデザインもご自身で改変していただき、オリジナルのデザインを作ってポートフォリオに掲載していただいてかまいません。

デザインを変えず再配布や販売する行為は禁止です。

こんにちは。ねこポンと申します。
サイト『未経験からWebデザイナーへ！』を運営しています。業界６年目のフリーランスのWebデザイナーです。

この教材のコーディングの解説はこれから執筆予定です。

気に入ったらぜひ「スキ」をしていただけると嬉しいです！

また、高額ではなく、無料や激安のコーディングの教材をもっと世の中に広げたいと切に願っています。コーディングの進行状況等を「 #ねこポンnote 」のハッシュタグでTwitterなどでシェアしてくださると嬉しいです😂 ツイート拝見いたします。教材制作の励みになります。

この記事が気に入ったらサポートをしてみませんか？