Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Learn Challenge: Building a Portfolio Website with ChatGPT | Introducing ChatGPT
AI Powered Web Development Essentials

book
Challenge: Building a Portfolio Website with ChatGPT

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.

If you encounter some troubles, here are possible prompts that can help you:

  • "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.

Video Tutorial

Possible Result for Portfolio Website

html

index.html

css

index.css

copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Portfolio</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#about">About Me</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>

<section id="home">
<h1>Welcome to My Portfolio</h1>
<p>This is where I showcase my work.</p>
</section>

<section id="about">
<h2>About Me</h2>
<p>Write something about yourself here.</p>
</section>

<section id="projects">
<h2>Projects</h2>
<!-- Add your projects here -->
<div class="project">
<h3>Project 1</h3>
<p>Description of project 1.</p>

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?

question mark

What is ChatGPT primarily designed for?

Select the correct answer

question mark

Where can users find ChatGPT?

Select the correct answer

question mark

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

Select the correct answer

question mark

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

Select the correct answer

Everything was clear?

How can we improve it?

Thanks for your feedback!

Section 3. Chapter 5

Ask AI

expand
ChatGPT

Ask anything or try one of the suggested questions to begin our chat

We use cookies to make your experience better!
some-alt