MINKO portfolio site

MINKOportfolio site

Work製作品

RaiseTech WEBサイト（模写）

  • スクール課題
  • Coding

スクールの課題として既存のサイトをコーディング模写しました。
レスポンシブデザインやドロップダウンメニュー、ボタンクリックの挙動など細部まで忠実に再現しました。

実施内容

VScodeエディタを使用してコーディングを実施。
サイトのデザインを確認しながらまずは静的な部分をHTML,CSSでマークアップ。
・CSSはSASS（SCSS記法）で行う
・カラーを変数$に定義して使用
・mixinを使用したメディアクエリでレスポンシブの対応

動的な部分をjavascriptで実装（jQueryを使用）
・メニューボタンのクリック時の挙動（メニューマークとクローズマークの切替え）
・メニュー項目にマウスオーバーした時のドロップダウンメニューの開閉
・画面幅でのメニューのスタイルの切替え　など

課題を通して身についたこと

HTML,CSSのコーディングスキル、javascriptの基本的な記述方法や、
ブラウザのデベロッパツールの利用方法を覚えました。

Production Detail
Works Display

No image