未経験からWebデザイナーを目指している方向けにコーディング課題を作成したよ!
今回は上級編ということで、少し難しいかもしれないけどチャレンジしてみてね★
このようなデザインカンプを配布しています。
今回は、実務を想定して画像の書き出しからご自身で進めてください!
画像を書き出すときはRetina対応のために2倍サイズで書き出して、圧縮して使用しましょう!圧縮にはオンラインのサービスを使用すると便利です。
(「画像 圧縮」で検索してね!)
こんな人におすすめ!
- ある程度のレイアウトをコーディングできるようになってきた人のスキルアップに!
- ポートフォリオに掲載できるサイトをコーディングしたい方に!
今回の課題は、クリ★スタコーディング課題の初級編・中級編を終えられた方のレベルを想定しています!ぜひスキルアップに役立ててください😊
課題データのダウンロード
課題のデザインカンプはこちらのリンクからダウンロードしてください。
まずはXDのカンプをダウンロードして、画像を書き出してフォルダを整理しましょう!不明点は検索しながらやってみましょう。
回答を見ながら進めたい方は以下の解説記事をご覧ください。
上級編を終えた方へ
コーディング課題上級編の学習お疲れ様でした!!
このレベルができれば、コーダーとして問題なく働けるでしょう😊
さらに実務の現場で活躍するためにやるべきことを簡単に紹介します!
コーダー、フロントエンドエンジニアを目指している方は参考にしてください。
①CSS設計を学ぶ
今回のコーディング課題ではCSS設計については触れていません。
CSS設計の知識は、修正しやすい・管理しやすいサイトを構築するためには必須の知識です。
CSS設計について学びたい方には以下の書籍がおすすめです。
※CSS設計を学ぶのは就職してからでOKです。まずは実務をやることを優先しましょう。
②Webアクセシビリティを学ぶ
Webアクセシビリティはコーディングだけに関係する概念ではありませんが、Web制作に関わる者としては勉強しておいた方が良いでしょう。
また、三井住友銀行のアクセシビリティガイドラインが非常にわかりやすく詳細にできています。アクセシビリティについて学びたい場合は一読することをおすすめします。
③JavaScriptを学ぶ
フロントエンドエンジニアを目指す場合、JavaScriptの仕様を理解している必要があります。
JavaScriptを学ぶには以下の書籍がおすすめです!
フロントエンドエンジニアになる目安として、ハンバーガーメニューやアコーディオンメニューなどを、jQueryやその他のライブラリを使用せずに実装できるレベルを目指せば良いでしょう😊
[…] XDからコーディングをしよう【初級編】 XDからコーディングをしよう【中級編】 XDからコーディングをしよう【上級編】 […]
[…] コーディング課題(上級編)をご覧になってない方はこちらの記事で確認してください☆ […]
こちらで作成したサイトはポートフォリオとして掲載可能でしょうか?