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

課題の説明

こんな人におすすめ！

• Progateの次に何をすればいいかわからない。
• デザインカンプからのコーディングができるようになりたい。
• 0からWebサイトをつくってみたい。

対象レベル

PorgateでHTML/CSS、jQueryを学習した方

この課題で学べること

• XDのデザインカンプからのコーディング
• レスポンシブコーディング
• ハンバーガーメニューの実装方法
• Flexboxの基本的な使い方etc…

この課題で学べないこと

• 複数ページのディレクトリ構成
• Webアクセシビリティに配慮したコーディング
• CSS設計
• 高度なアニメーションetc...

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

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

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

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

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

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

特典

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

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

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

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

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

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

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

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

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

質問したい方へ

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

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

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

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

参考になる記事

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

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

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

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