Reproduction

デザイン会社サイト（架空サイト）の模写作品

• 

• 摸写元のサイトアドレス

  https://crestadesign.org/cording-third/

• サイトの概要

  クリ★スタ様のコーディング課題上級編
  「デザイン会社（架空サイト）」

• 摸写の目的・ゴール

  Adobe XDのデザインからコーディングを行う。
  下層ページがあり、ブレイクポイントが2箇所あるサイトのコーディングをする。
  完成した摸写作品を制作実績としてポートフォリトサイトへ掲載する。

• 制作の作業範囲

  コーディング（レスポンシブ）

• 制作期間

  1週間（34時間程度）

• 使用ツール

  HTML, CSS, Javascritp(jQuery), Visual Studio Code, Adobe XD

• 摸写のポイント・過程

  isara.life様の摸写作成の次の学習課題として利用しました。下層ページが2ページあり、レスポンシブもPC,タブレット、スマフォの3パターンを対応いたしました。レイアウトの仕方もシンプルでかつモダンで勉強になりました。

  サンプルコードを掲載してくれており、動画で作成のポイントの解説もしてくれているので、自身で作成したコードと比較して見直すことで、かなり勉強になりました。

  コードの効率的な書き方や、より良い書き方など具体的に意識することができ、大きな経験となりました。

制作サイトキャプチャ画像

※トップページ（パソコン表示、スマフォ表示）