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

未経験からWebデザイナーを目指している方向けにコーディング課題を作成したよ!チャレンジしてみてね★

このようなデザインカンプを配布しています。

課題の説明

こんな人におすすめ!

  • ある程度コーディングに慣れてきたけど次に何をしたら良いかわからない
  • ポートフォリオに掲載できるサイトをコーディングしたい

対象レベル

PorgateでHTML/CSS、jQueryを学習し、クリスタコーディング課題の初級編を終えられた方。

この課題で学べること

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

この課題で学べないこと

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

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

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

複数ページのコーディングについては次回の課題で取り入れる予定です!

CSS設計を学びたい方は、TAK(@tak_dcxi)さんのnote(¥500)がおすすめです

Webアクセシビリティを学びたい方は、三井住友銀行さんのアクセシビリティガイドラインが非常に参考になります!

無料・安価で学習できるコンテンツは世の中にたくさんありますね!

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

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

まずはXDのカンプをダウンロードして、不明点は検索しながらやってみてください。

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

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

特典

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

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

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

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

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

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

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

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

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

質問したい方へ

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

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

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

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

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

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

参考になる記事

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

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

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

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

毎日学習していてえらいです!!たくさんの方のチャレンジをお待ちしてます!

この記事がいいと思ってくださった方は、SNSでのシェアをお願いします![addthis tool="addthis_inline_share_toolbox_mqi1"]

質問をTwitterから募集します!

無料でwebデザインに関する質問にお答えします。

クリ★スタは未経験からwebデザイナーを目指す方を応援しています!そのため、学習していく中での些細な疑問に記事で回答していきます。

お気軽にご連絡ください。→クリ★スタ(@cresta_design)

Youtubeでは動画学習コンテンツを配信しています!

 動画での学習は、テキストでの学習の3倍以上の効果を得られると言われています。そのため、クリスタでは、初学者の方に効果的な学習をして頂くためにYoutubeで学習コンテンツを提供しています。

 ぜひチャンネル登録お願いします→クリ★スタYoutubeチャンネル

コメントを残す

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

CAPTCHA