In this challenge, we will create a portfolio website from scratch using ChatGPT. You can generate HTML and CSS separately or use only one prompt. Test the power of ChatGPT on your own.

<u>If you encounter some troubles, here are possible prompts that can help you:</u>
- "Hey, ChatGPT, can you create a simple portfolio website using HTML and CSS? Include sections for About Me, Projects, Contact, and a Home page.";
- "I need a portfolio website coded in HTML and CSS. Can you design it to showcase my projects, skills, and contact information?";
- "ChatGPT, could you help me build a portfolio website using HTML and CSS from scratch? I want it to have a clean and modern design.";
- "I want to create a personal portfolio website using HTML and CSS. Can you generate the code for it, with sections for my bio, projects, and a contact form?";
- "Can you assist me in crafting a portfolio website using HTML and CSS? I'd like it to be responsive and visually appealing, with sections for my resume, projects, and contact details.".

Here is a video demonstrating the results of our testing with different prompts.

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=

What type of questions should we avoid when creating prompts for ChatGPT?

What would be a good prompt to ask for instructions on making an apple pie?

Embark on an engaging journey through the basics of web theory and technologies. Deepen your understanding with ChatGPT's insights and conclude your learning by creating your fully functional website with AI. This course is your gateway to mastering HTML, CSS, and JavaScript essentials while harnessing the power of ChatGPT to enhance interactivity and intelligence on your web projects.

Get introduced to the key concepts and technologies in web development, including the role of AI in modern coding. This section sets the foundation for your learning journey, covering the basics of web development and how AI enhances productivity, creativity, and efficiency in coding.

Learn the essential web development technologies. Delve into the rudiments of HTML, CSS, and JavaScript, unraveling their individual functionalities and collective role in shaping the digital landscape.

Discover the power of ChatGPT as you explore its capabilities and learn how to utilize it effectively. Gain insights into crafting prompts and working with code through ChatGPT. Wrap up with practical tips on leveraging ChatGPT across various applications.

Build the Blog website! Create a complete and functional blog website from scratch, incorporating various web development techniques using ChatGPT.

Web Development Essentials with AI

Challenge: Coding via ChatGPT

Video Tutorial

Possible Result for Portfolio Website

1. What is ChatGPT primarily designed for?

2. Where can users find ChatGPT?

3. What type of questions should we avoid when creating prompts for ChatGPT?

4. What would be a good prompt to ask for instructions on making an apple pie?