カンプコーディング | Ameba de Blog Life.

Ameba de Blog Life.

Written by τακ. Powered by Ameba.

入門編、超初級編
XDデザインデータ
noteより参照

デイトラも
いいけど、
デザインカンプからの
コーディング練習の
第一歩目として
以下をご紹介します。

教材提供:Shogoさん
https://note.com/samuraibrass/n/n793ab571a88e

教材提供:こうだいさん
https://note.com/kodai_web_note/n/n8fdbece8d611

教材提供:maipyonさん
https://note.com/maipyon8/n/n31159be66de4

どれも、
レイアウトは
同じです。

ヘッダーがあって
メインがあって
フッターある。

という構成です。
メインは
メインビジュアルと
コンテンツ

さらに
コンテンツの詳細は
2カラムの構成に
なっています。

PCデザインしか
ありませんが、
細かな点や
レスポンシブ対応は
各自で調べるなどして
対応するしか
ありません。

しかしながら、
ドットインストールや
プロゲートを
終えたばかりの人が
取り組むには
最適かと思います。

P.S.
 コーディングの練習は
 数をこなすしかありません。

※デザインデータは無料ですが、
デザインデータを開くための
AdobeXDは別途、
自身で負担する必要が
あります。