課題4

課題内容

デザインデータからのコーポレートサイト制作
WEBサイト制作では、figmaやXD、Photoshop、Illustrator等で制作されたデザインデータをもとに、コーディングを行います。
今回はXDデータをもとにコーディングを行いましょう。

1. デザインデータを確認

下記ページのレスポンシブデザインが確認できます。全てデザイン通りに制作してください。
① トップページ
② ABOUT US
③ CONTACT
デザインデータはこちら

カラーコード等のデザインスペックの確認方法がわからない場合は、下記サイトを参考にしてください。
デザインスペックを確認する

2. 素材をダウンロード

ダウンロードはこちら

完成目標期間

5日間を目安に完成させてください。

使用言語

HTML、CSS、jQuery、XD

習得出来るスキル

  • デザインデータからのコーディング

その他

  • メニュー等の動きは自由に実装してみましょう。

課題提出

1. 制作ファイルを確認する

一度自分で制作ファイルと模写サイトを見比べて、模写サイト通りのデザインや動きになっているのかを確認してください。

2. 制作ファイルをギガファイルで提出

パソコンにLINEを追加していない場合は、必ず追加しておくようにしましょう。
参考サイト: パソコンでLINEを利用する

  1. ギガファイルを開く
  2. 「ファイルの保持期限変更」で【30日】以上を選択します。
  3. 制作ファイルをアップロードします。
  4. 当スクールのITスキルサポートLINE公式アカウント課題名とギガファイルのURLを提出して下さい。
    提出例

提出後について

プロジェクトファイルは必ず保存しましょう。
基本的にはご提出頂いてから1週間以内に順を追って、採点結果を LINE公式よりお送り致します。採点結果で修正があった場合は、指示に従って修正・提出を繰り返し、クリアしたら次の課題に進みましょう!

※注意事項※

課題で作成した動画等をSNS等にアップしたり、ご自身の実績として掲載することは絶対にやめて下さい。もし、見つかった場合は然るべき処置を取らせて頂きます。

感想、意見、質問を残す

※順々にご対応させて頂きますのでご意見、ご質問に時間がかかる場合がございます。

関連記事

課題1

課題2

課題3

PHP