【最終課題】アレンジされたポートフォリオサイトのコーディング

バナー

この教材は「ギャクサン」というWeb制作学習カリキュラムの一部です。

はじめての方はこちらからご覧ください👉

更新日

#34  【最終課題】アレンジされたポートフォリオサイトのコーディング

web兄さん

ポートフォリオサイトを女性向けのデザインにアレンジしたものを自力でコーディングする課題に取り組んでみましょう。

全体の流れは以下です。

  1. デザインカンプを見てHTMLから自力でコーディングする(レスポンシブ対応も含む)
  2. サーバーへアップロード作業
  3. URLとコーディングしたファイルを共有
  4. レビューをするので修正
  5. 課題提出完了!
web兄さん
自力でコーディングしサーバーへアップしたら、コードレビューを行います。
0からチャレンジすることで確実にレベルアップすることができますよ👍

デザインデータを確認

パスワードが必要です

これより先は有料コンテンツです。「ギャクサン」の購入ページから契約をしてください。
すでに契約済みの方でパスワードの入力が上手くいかない場合はサポートへ連絡してください。


PC版デザインデータの解説

PC版デザインデータが今回3つ並んでいますがそれぞれ役割としては以下です。

  1. これまでに作ったポートフォリオサイトのデザイン(ざっと比較する用
  2. 今回実装するアレンジされたサイトのデザイン(コーディング用
  3. 前回のポートフォリオと特に違いがある部分を解説したデザイン(解説用

作業手順

ポートフォリオサイトをコーディングした時の流れを思い出して、まずはその通りにやってみましょう。

  1. HTMLのブロック分けをイメージする
  2. HTMLをコーディング、class名をつける
  3. セクションごとにCSSをコーディング
  4. PC版が完成したらレスポンシブ対応に移る
  5. 完成したらPixel Perfectを使用して大きなズレがあれば調整する
  6. サーバーへアップロード
  7. Basic認証でパスワードをかける

自身の成長を止めないためにコピペはしないように!

今回、きちんと乗り越えられるハードルを用意するためにポートフォリオサイトのアレンジVerという課題にしています。

そのためHTMLやCSSのコードは共通部分が非常に多いです。だからといってコピペで済ますとそれは「学習」から「作業」へと変わり質が下がってしまいます。

この課題をコピペで済ませた人と、一人でやりきった人では今後の成長性に大きく差が開いてくるはずです。

わからないところがあれば、それはみなさんにまだ理解が身に付いていない証拠です!過去の教材を振り返ってしっかりと記憶に定着させましょう。

ヒント

特に難しそうな箇所だけ先にヒントを出しておきます。

❶塗りの色がハッキリとしているシャドウ

box-shadowは影のぼかしを指定することができます。

色がはっきりとしているということは、影のぼかしは?…

ここまでのヒントで調べることできっと辿りつくことができるはずです!

❷背景色がグラデーション

背景色といえばbackground-colorですが、グラデーションの背景色の場合は、不思議なことにbackground-imageで設定します。

こちらもぜひ調べて自力で解決してみてください。

完成後

最後まで完了したら、以下をチャットにて僕に送ってください。

  • サイトのURLの
  • Basic認証のユーザー名・パスワード
  • 書いたコードのフォルダをZIP化して共有

いただいた内容を確認しコードレビューをさせていただきます👍

それでは頑張ってください。

課題に関して不明点あれば遠慮なくチャットでご連絡ください!