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

2021年4月26日 12:17

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

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

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

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

⭐ この教材のレベル：初級編

初級編は、Progateやドットインストールが完了済みで入門編を終えた方向けです。

前回の入門編ではデスクトップファーストでしたが、今回はモバイルファーストによるレスポンシブのコーディングをしていきます。モバイルファーストとは、スマホ用のCSSを先に書いていく方法です。

レベルは初級編の他に入門編があります。中級編と上級編は今後登場予定です。

シンプルなカフェサイトを作ってみましょう。TOPページと下層ページの合計４ページです。

・TOPページ
・メニューページ
・アクセスページ
・採用ページ

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

SP版からコーディングをしていきます。

⬇SP版

⬇PC版

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

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

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

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

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

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

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

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

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

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

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

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

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

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