【コーディング課題】XDからコーディングをしよう【上級編】

未経験からWebデザイナーを目指している方向けにコーディング課題を作成したよ!今回は上級編ということで、少し難しいかもしれないけどチャレンジしてみてね★

このようなデザインカンプを配布しています。
※今回は、実務を想定して画像の書き出しからご自身で進めてください!

課題の説明

こんな人におすすめ!

  • ある程度のレイアウトをコーディングできるようになってきた人のスキルアップに!
  • ポートフォリオに掲載できるサイトをコーディングしたい方に!

対象レベル

クリ★スタコーディング課題の初級編中級編を終えられた方。

(※もちろん上記以外の方のチャレンジも大歓迎です👍)

この課題で学べること

  • XDのデザインカンプからのコーディング
  • レスポンシブコーディング
  • ハンバーガーメニューの実装方法
  • jQueryを用いたアニメーション
  • コンタクトフォームのコーディング方法

この課題で学べないこと

  • Webアクセシビリティに配慮したコーディング
  • CSS設計
  • 高度なアニメーションetc…

上記を気にしすぎるとコーディングの習得に時間がかかると考えています。課題の対象者が初学者の方ということもあり、上記について特に解説する予定はありませんので予めご了承ください。

まずはレイアウトの基本的な知識を抑えていきましょう!

課題のデータをダウンロードしよう

課題のデザインカンプはこちらのリンクからダウンロードしてください。

まずはXDのカンプをダウンロードして、画像を書き出してフォルダを整理しましょう!不明点は検索しながらやってみてください。

回答を見ながら進めたい方は以下の解説記事をご覧ください。

【コーディング課題〜上級編〜】解説記事

特典

ポートフォリオに使用可能

以下のルールに沿って、ポートフォリオに掲載OKです!

  • カンプからのコーディングとして使用
  • 作品ページに当記事のURLを記載(任意)
  • コードの改変、デザインの変更は自由に行ってください

ハッシュタグで繋がろう!

クリ★スタはWebデザイン勉強中の方を応援しています!

クリ★スタの課題を活用する方用にハッシュタグを用意しました!課題に挑戦する方、やり終えた方、その他質問や感想などを「#クリスタチャレンジ」のハッシュタグをつけてツイートしてくれた方には、リツイートしに行きます!!

ハッシュタグを使用する際は、以下の3点をツイートすることをおすすめします。学習記録として残しておきましょう★

  • 制作物のキャプチャやgifアニメーション
  • 学んだこと、工夫したこと
  • 課題のURL

Webデザイン勉強中のみんなで繋がりましょ〜☆

質問したい方へ

申し訳ございませんが、Twitterなどで個別の質問対応は致しかねます。
もし学習のサポートや質問対応を希望する場合は、クリ★スタ オンラインギルドにご参加ください。

▼クリ★スタ オンラインギルド詳細はこちら

クリ★スタ オンラインギルド|クリ★スタ

クリ★スタ運営者によるオンラインコミュニティです。 案件の紹介や、転職活動・案件獲得活動についての相談、獲得した案件の相談や壁打ちが随時可能です! 案件紹介で制作実績が作れる! 今後公開する有料コンテンツを無償提供! 獲得した案件の相談・壁打ちが随時可能! 案件獲得や転職活動についての相談が随時可能 自主学習に関する相談や質問が可能!

コンテンツに対する要望についてはTwitterやyoutubeのコメント欄で受け付けています。「こんな学習コンテンツがほしい」「これについて解説記事を充実させてほしい」などの要望がある場合はお気軽にご連絡ください。

※必ずしも要望にお答えできるとは限らないので、予めご了承ください。

参考になる記事

XDの導入方法やXDのデザインカンプからコーディングに必要な数値を取得する方法がわからない方は、以下の記事を参考にしてください。

「XDの導入と値の取得方法 〜コーディング課題に取り組む方へ〜」

Googleフォントのインストール方法やコーディングに反映させる方法がわからない方、「そもそもWebフォントって何?」って状態の方は以下の記事を参考にしてください。

「【Webフォントの代表格】Googleフォントの使い方」

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA