Creative Challenges
XDデザインカンプからのコーディング

難易度:初級向け 時間の目安:6

課題概要

未経験でコーダー、デザイナーを目指しているかた向けに、XDからコーディングをする課題を作成しました。

この課題で身につくスキル
XDのデザインカンプからコーディングができるスキル
実務に近いコーディング経験

Webのデザインカンプは以前まではPhotoshopで作るということが多かったのですが、最近では新しいツールであるXDでデザインカンプを作られることも増えています。

実務でXDからコーディングお願いします。と言われても対応できるように今回はXDのデザインカンプからコーディングをしてみましょう。

デザインカンプのダウンロードはこちら

課題内容

❶まずは必要素材を下記リンクからダウンロードしてみましょう。

デザインカンプのダウンロードはこちら

❷おすすめの取り組み方

第一目標としては細かいコードの綺麗さなどは気にせずにかたちにするというところを目標にコーディングしてみましょう。

その後、細かいところをデザイン通りにあわせられるようにする。わからないところはGoogle検索で調べるを繰り返すとコーディングが理解できスキルが付いていくと思います。