DAY5:XDからニュース系のコーディング

以下のXDのデザインカンプをレスポンシブ込でコーディングしてください。DAY2までにコーディングした続きに書いていく感じになります。

https://xd.adobe.com/spec/d2cde5be-2152-4419-6441-110a890608a5-a4fc/
※ パスワードはSlackの「#トライアル課題」にピン留めしています。
Slackへのグループ参加は東京フリーランスをご参考ください。

XDの使い方は、こちらの「共有されたXDの使い方」の項目を参考にしていただけたらと思います。

Adobe XDのデザインカンプをURLで共有するメリットと使い方(※コーダー視点)

コーディングに必要な値はデザインカンプから取得できます。その他の条件としては、以下の条件で作成してください。

  • ラベルはリンク付き(リンク先は空)
  • ニュースタイトルはリンク(リンク先は空)
  • moreもリンク(リンク先は空でOK)
  • スマホ時の表示方法はおまかせ

余裕があったら…

※ デザインカンプの再現は別のHTMLファイルに作成してください。

PerfectPixelでチェック

DAY3でやった内容になります。(DAY8あたりまではセクションを足していくので最後にまとめてチェックでもOK)

比較用の元画像

ニュース系の別パターンを練習

ニュース系の別パターンを練習してみましょう。
https://xd.adobe.com/spec/b106a10c-9c0b-41b9-6d1b-8597489cc319-c737/

このページが役に立ったら
いいね!お願いします

運営の励みになります...。

関連の記事