# 簡易Webサイトの制作課題

## 前提

HTMLとCSSを覚えていただきましたが、それはあくまで動画を見ながらです。
つまり、インプットになります。

しかしプログラミングにおいて最も重要なのはアウトプットです。
アウトプットとは、

* 自分の頭で考え
* 自分で調べて

コードを書くことであり、動画を見ながら書くのとは全く異なります。

この課題では具体的にアウトプットとして課題に挑戦していただきます。

現場を意識して、より実務に近い形での課題としています。

この課題に挑戦することで、今までインプットしてきた知識・技術をさらに定着化することができます。また、それだけではなく実務や現場に必ず必要な「自走力」も鍛えることができます。

どうすればできるのか、**ぜひ自分で考え、調べることで課題を形にしてみてください**。

## 課題内容

次に記す仕様を満たすWebサイトを制作してください。

Webサイトの概要〜

参考サイト：https://webdesigner-go.com/portfolio-template-basic/

上記の参考サイトを作成してください。
名前だけ自分の名前にして、それ以外は模倣してください。

## 機能要件

* 名前以外同じレイアウトにすること
* レスポンシブ化も実装すること(max-width: 767px)
* スクロール機能は次のURLを参考にして実装してください。
* https://web-dev.tech/front-end/javascript/smooth-scroll-top-button/
* 使用する画像は適当な画像で大丈夫です。

## 画面（UI）

* TOP(index.html)
* ヘッダー
* メインビジュアル
* WORKS
* SKILL
* ABOUT
* CONTACT
* スクロールボタン
* フッター
* WORKSの詳細（works.html）
* ヘッダー
* 詳細(https://webdesigner-go.com/portfolio-template-basic/works-template.html)と同じ内容
* スクロールボタン
* フッター

## 開発について

* HTML5とCSS3を使用すること
* もし余裕があれば、SCSSを使うこと
* スクロール機能にはJQueryを使わないこと
* class名はケバブケースにすること(例：cart-title)
* class名は意味のわかる内容にすること（例：submit-button）
* class名は見た目や場所ではなく意味でつけること
(例：Good → footer-site-info) (例：Bad → footer-left)
* 各セクションにはどこのセクションか分かるコメントを入れること
* 今回の課題は実際のサービスに近い形で行なっています。ご自身で改善出来そうな箇所や追加機能などあれば自由に変えていただいて構いません

## 期間

* 開始から2週間以内でお願いします。

## 提出について

フォルダをzipファイルに圧縮し、Googleドライブ等で共有して提出ください。