未経験からWebデザイナーを目指している方向けにコーディング課題を作成したよ！今回は上級編ということで、少し難しいかもしれないけどチャレンジしてみてね★
このようなデザインカンプを配布しています。
※今回は、実務を想定して画像の書き出しからご自身で進めてください！
課題の説明
こんな人におすすめ！
- ある程度のレイアウトをコーディングできるようになってきた人のスキルアップに！
- ポートフォリオに掲載できるサイトをコーディングしたい方に！
対象レベル
（※もちろん上記以外の方のチャレンジも大歓迎です👍）
この課題で学べること
- XDのデザインカンプからのコーディング
- レスポンシブコーディング
- ハンバーガーメニューの実装方法
- jQueryを用いたアニメーション
- コンタクトフォームのコーディング方法
この課題で学べないこと
- Webアクセシビリティに配慮したコーディング
- CSS設計
- 高度なアニメーションetc…
上記を気にしすぎるとコーディングの習得に時間がかかると考えています。課題の対象者が初学者の方ということもあり、上記について特に解説する予定はありませんので予めご了承ください。
まずはレイアウトの基本的な知識を抑えていきましょう！
課題のデータをダウンロードしよう
課題のデザインカンプはこちらのリンクからダウンロードしてください。
まずはXDのカンプをダウンロードして、画像を書き出してフォルダを整理しましょう！不明点は検索しながらやってみてください。
回答を見ながら進めたい方は以下の解説記事をご覧ください。
特典
ポートフォリオに使用可能
以下のルールに沿って、ポートフォリオに掲載OKです！
- カンプからのコーディングとして使用
- 作品ページに当記事のURLを記載（任意）
- コードの改変、デザインの変更は自由に行ってください
ハッシュタグで繋がろう！
クリ★スタはWebデザイン勉強中の方を応援しています！
クリ★スタの課題を活用する方用にハッシュタグを用意しました！課題に挑戦する方、やり終えた方、その他質問や感想などを「#クリスタチャレンジ」のハッシュタグをつけてツイートしてくれた方には、リツイートしに行きます！！
ハッシュタグを使用する際は、以下の3点をツイートすることをおすすめします。学習記録として残しておきましょう★
- 制作物のキャプチャやgifアニメーション
- 学んだこと、工夫したこと
- 課題のURL
Webデザイン勉強中のみんなで繋がりましょ〜☆
質問したい方へ
申し訳ございませんが、Twitterなどで個別の質問対応は致しかねます。
もし学習のサポートや質問対応を希望する場合は、クリ★スタ オンラインギルドにご参加ください。
▼クリ★スタ オンラインギルド詳細はこちら
コンテンツに対する要望についてはTwitterやyoutubeのコメント欄で受け付けています。「こんな学習コンテンツがほしい」「これについて解説記事を充実させてほしい」などの要望がある場合はお気軽にご連絡ください。
※必ずしも要望にお答えできるとは限らないので、予めご了承ください。
参考になる記事
XDの導入方法やXDのデザインカンプからコーディングに必要な数値を取得する方法がわからない方は、以下の記事を参考にしてください。
「XDの導入と値の取得方法 〜コーディング課題に取り組む方へ〜」
Googleフォントのインストール方法やコーディングに反映させる方法がわからない方、「そもそもWebフォントって何？」って状態の方は以下の記事を参考にしてください。
コメントを残す