このチャレンジでは、ChatGPTを使ってポートフォリオウェブサイトをゼロから作成します。HTMLとCSSを別々に生成することも、1つのプロンプトでまとめて生成することも可能です。ChatGPTの力を自分で試してみてください。

<u>もし問題が発生した場合、以下のプロンプトが役立ちます：</u>
- 「ChatGPT、HTMLとCSSを使ってシンプルなポートフォリオウェブサイトを作成できますか？About Me、Projects、Contact、Homeページのセクションを含めてください。」
- 「HTMLとCSSでコーディングされたポートフォリオウェブサイトが必要です。プロジェクト、スキル、連絡先情報を紹介できるデザインにしてください。」
- 「ChatGPT、HTMLとCSSを使ってゼロからポートフォリオウェブサイトを作成するのを手伝ってもらえますか？クリーンでモダンなデザインにしたいです。」
- 「HTMLとCSSを使って個人用ポートフォリオウェブサイトを作成したいです。自己紹介、プロジェクト、連絡フォームのセクションを含めたコードを生成してください。」
- 「HTMLとCSSを使ってポートフォリオウェブサイトを作成するのを手伝ってもらえますか？履歴書、プロジェクト、連絡先詳細のセクションがあり、レスポンシブで視覚的に魅力的なものにしたいです。」

こちらは、さまざまなプロンプトでテストした結果を示す動画です。

## ポートフォリオウェブサイトの想定結果

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+TXkgUG9ydGZvbGlvPC90aXRsZT4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxoZWFkZXI+CiAgICAgIDxuYXY+CiAgICAgICAgPHVsPgogICAgICAgICAgPGxpPjxhIGhyZWY9ImluZGV4Lmh0bWwiPkhvbWU8L2E+PC9saT4KICAgICAgICAgIDxsaT48YSBocmVmPSIjYWJvdXQiPkFib3V0IE1lPC9hPjwvbGk+CiAgICAgICAgICA8bGk+PGEgaHJlZj0iI3Byb2plY3RzIj5Qcm9qZWN0czwvYT48L2xpPgogICAgICAgICAgPGxpPjxhIGhyZWY9IiNjb250YWN0Ij5Db250YWN0PC9hPjwvbGk+CiAgICAgICAgPC91bD4KICAgICAgPC9uYXY+CiAgICA8L2hlYWRlcj4KCiAgICA8c2VjdGlvbiBpZD0iaG9tZSI+CiAgICAgIDxoMT5XZWxjb21lIHRvIE15IFBvcnRmb2xpbzwvaDE+CiAgICAgIDxwPlRoaXMgaXMgd2hlcmUgSSBzaG93Y2FzZSBteSB3b3JrLjwvcD4KICAgIDwvc2VjdGlvbj4KCiAgICA8c2VjdGlvbiBpZD0iYWJvdXQiPgogICAgICA8aDI+QWJvdXQgTWU8L2gyPgogICAgICA8cD5Xcml0ZSBzb21ldGhpbmcgYWJvdXQgeW91cnNlbGYgaGVyZS48L3A+CiAgICA8L3NlY3Rpb24+CgogICAgPHNlY3Rpb24gaWQ9InByb2plY3RzIj4KICAgICAgPGgyPlByb2plY3RzPC9oMj4KICAgICAgPCEtLSBBZGQgeW91ciBwcm9qZWN0cyBoZXJlIC0tPgogICAgICA8ZGl2IGNsYXNzPSJwcm9qZWN0Ij4KICAgICAgICA8aDM+UHJvamVjdCAxPC9oMz4KICAgICAgICA8cD5EZXNjcmlwdGlvbiBvZiBwcm9qZWN0IDEuPC9wPgogICAgICA8L2Rpdj4KICAgICAgPGRpdiBjbGFzcz0icHJvamVjdCI+CiAgICAgICAgPGgzPlByb2plY3QgMjwvaDM+CiAgICAgICAgPHA+RGVzY3JpcHRpb24gb2YgcHJvamVjdCAyLjwvcD4KICAgICAgPC9kaXY+CiAgICA8L3NlY3Rpb24+CgogICAgPHNlY3Rpb24gaWQ9ImNvbnRhY3QiPgogICAgICA8aDI+Q29udGFjdDwvaDI+CiAgICAgIDxwPllvdSBjYW4gcmVhY2ggbWUgYXQgZXhhbXBsZUBleGFtcGxlLmNvbTwvcD4KICAgIDwvc2VjdGlvbj4KCiAgICA8Zm9vdGVyPgogICAgICA8cD4mY29weTsgMjAyNCBNeSBQb3J0Zm9saW88L3A+CiAgICA8L2Zvb3Rlcj4KICA8L2JvZHk+CjwvaHRtbD4=

Ym9keSB7CiAgZm9udC1mYW1pbHk6IEFyaWFsLCBzYW5zLXNlcmlmOwogIG1hcmdpbjogMDsKICBwYWRkaW5nOiAwOwp9CgpoZWFkZXIgewogIGJhY2tncm91bmQtY29sb3I6ICMzMzM7CiAgY29sb3I6ICNmZmY7CiAgcGFkZGluZzogMTBweCAwOwp9CgpuYXYgdWwgewogIGxpc3Qtc3R5bGU6IG5vbmU7CiAgcGFkZGluZzogMDsKICB0ZXh0LWFsaWduOiBjZW50ZXI7Cn0KCm5hdiB1bCBsaSB7CiAgZGlzcGxheTogaW5saW5lOwogIG1hcmdpbi1yaWdodDogMjBweDsKfQoKbmF2IHVsIGxpIGEgewogIGNvbG9yOiAjZmZmOwogIHRleHQtZGVjb3JhdGlvbjogbm9uZTsKfQoKc2VjdGlvbiB7CiAgcGFkZGluZzogMjBweDsKfQoKZm9vdGVyIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjMzMzOwogIGNvbG9yOiAjZmZmOwogIHRleHQtYWxpZ246IGNlbnRlcjsKICBwYWRkaW5nOiAxMHB4IDA7Cn0=

ChatGPTは主に何のために設計されていますか？

ユーザーはどこでChatGPTを利用できますか？

ChatGPTへのプロンプト作成時に避けるべき質問の種類はどれですか？

アップルパイの作り方を尋ねる良いプロンプトはどれですか？

ChatGPTなどのAIツールを活用しながら、ウェブ開発の基礎を学びます。HTML、CSS、JavaScriptがウェブサイト構築において果たす役割と、AIがコーディングの速度や創造性をどのように高めるかを理解します。効果的なプロンプトの作成や、ChatGPTを用いたコード生成を実践します。AI支援開発を活用して、ゼロから完全なブログウェブサイトを構築し、ウェブプロジェクトに役立つ実践的なスキルを身につけます。

ウェブ開発の主要な概念と技術、そして現代のコーディングにおけるAIの役割について紹介します。このセクションでは、ウェブ開発の基礎と、AIがコーディングにおける生産性、創造性、効率性をどのように向上させるかを取り上げ、学習の基盤を築きます。

ウェブ開発の基本的な技術を学びます。HTML、CSS、JavaScriptの基礎を掘り下げ、それぞれの機能とデジタル環境を形成する上での役割を解明します。

ChatGPTの強力な機能を探求し、その活用方法を学びます。プロンプトの作成やChatGPTを使ったコーディング作業についての知見を得られます。さまざまなアプリケーションでChatGPTを活用するための実践的なヒントも紹介します。

ブログウェブサイトを構築します。ChatGPTを活用したさまざまなウェブ開発技術を取り入れ、ゼロから完全かつ機能的なブログウェブサイトを作成します。

チャレンジ：ChatGPTでポートフォリオウェブサイトを構築する

ビデオチュートリアル

ポートフォリオウェブサイトの想定結果

1. ChatGPTは主に何のために設計されていますか？

2. ユーザーはどこでChatGPTを利用できますか？

3. ChatGPTへのプロンプト作成時に避けるべき質問の種類はどれですか？

4. アップルパイの作り方を尋ねる良いプロンプトはどれですか？