But as only paid users can use GPT-4, also Microsoft announced that while playing with bing chatbot we’ve been using GPT-4 since its release.
But before we jump in, we would like to encourage you to take part in our AI Hackathon, where you can build with the released to the public API from OpenAI - Whisper and ChatGPT API.
So let’s use Bing's free GPT-4 powered Chatbot and use it to build us a website!
Ok, we want to check its capabilities and build something simple. Let’s go with a website with a panda’s image and some facts about these lovely animals - because who doesn’t love pandas?
First, I inserted my prompt:
Create an html skeleton with css responsive design and responsive menu that works on mobile as well. Without javascript, pure HTML & CSS.
!INCLUDED Page content!: Picture of panda eating bamboo and description of what is panda + 5 fun facts about pandas..
Footer with 2023 copyrights.
So we got a pretty detailed code, see below:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Panda Page</title>
<style>
/* Add your CSS styles here */
body {
margin: 0;
font-family: Arial, sans-serif;
}
.header {
background-color: #333;
color: white;
padding: 15px;
}
.header h1 {
margin: 0;
}
.menu {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
background-color: #333;
}
.menu a {
color: white;
text-decoration: none;
padding: 12px;
display:block
}
.menu a:hover {
background-color:#111
}
@media (max-width :600px) {
.menu a{
flex-basis :100%
}
}
main{
max-width :800px ;
margin :auto ;
padding :20px ;
}
footer{
text-align:center ;
padding :20px ;
}
</style>
</head>
<body>
<div class="header">
<h1>Panda Page</h1>
</div>
<nav class="menu">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>
<main>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0f/Grosser_Panda.JPG/1200px-Grosser_Panda.JPG" alt="Panda eating bamboo" style="width :100% ;">
<h2>What is a Panda?</h2>
<p>The giant panda, also known as the panda bear or simply the panda, is a bear native to south central China. It is characterised by large, black patches around its eyes, over the ears, and across its round body.</p>
<h3>5 Fun Facts About Pandas:</h3>
<ol>
<li>A newborn panda is about the size of a stick of butter—about 1/900th the size of its mother—but can grow to up to 330 pounds as an adult.</li>
<li>Pandas have been known to eat up to 60 pounds of bamboo per day.</li>
<li>Pandas have sometimes been seen rolling down hills for fun.</li>
<li>In addition to bamboo pandas also eat small rodents and birds.</li>
<li>Giant pandas have lived on Earth for two to three million years.</li>
</ol>
</main>
<footer>©2023 Panda Page </footer>
</body>
</html>
Ok, let’s test it.
Well, it’s not a masterpiece, but we have a working code, with all of the details requested in a few moments! Pretty impressive for a free tool.
But can we push it further?
As Bing’s Chatbot already asked if we want something more, let’s go with it
Ok, I want some “about us” information, so let’s ask Bing Chat for it:
So, what did you create for us, Bing chat?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Panda Page</title>
<style>
/* Add your CSS styles here */
body {
margin: 0;
font-family: Arial, sans-serif;
}
.header {
background-color: #333;
color: white;
padding: 15px;
}
.header h1 {
margin: 0;
}
.menu {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
background-color: #333;
}
.menu a {
color: white;
text-decoration: none;
padding: 12px;
display:block
}
.menu a:hover {
background-color:#111
}
@media (max-width :600px) {
.menu a{
flex-basis :100%
}
}
main{
max-width :800px ;
margin :auto ;
padding :20px ;
}
footer{
text-align:center ;
padding :20px ;
}
</style>
</head>
<body>
<div class="header">
<h1>Panda Page</h1>
</div>
<nav class="menu">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>
<main>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0f/Grosser_Panda.JPG/1200px-Grosser_Panda.JPG" alt="Panda eating bamboo" style="width :100% ;">
<h2>What is a Panda?</h2>
<p>The giant panda, also known as the panda bear or simply the panda, is a bear native to south central China. It is characterised by large, black patches around its eyes, over the ears, and across its round body.</p>
<h3>5 Fun Facts About Pandas:</h3>
<ol>
<li>A newborn panda is about the size of a stick of butter—about 1/900th the size of its mother—but can grow to up to 330 pounds as an adult.</li>
<li>Pandas have been known to eat up to 60 pounds of bamboo per day.</li>
<li>Pandas have sometimes been seen rolling down hills for fun.</li>
<li>In addition to bamboo pandas also eat small rodents and birds.</li>
<li>Giant pandas have lived on Earth for two to three million years.</li>
</ol>
<h2 id="about">About Us:</h2>
<p>We are a group of panda lovers who are passionate about sharing information and raising awareness about these amazing animals. We believe that through education and conservation efforts we can help ensure that pandas continue to thrive in their natural habitats for generations to come.</p>
</main>
<footer>©2023 Panda Page </footer>
</body>
</html>
It is lovely that it added extra information and upon clicking the “about us” section we are redirected to the correct content.
But let’s push it further!
Ok, I want the background to be green, headings to be purple and use font Helvetica for everything. So…
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Panda Page</title>
<style>
/* Add your CSS styles here */
body {
margin: 0;
font-family: Arial, sans-serif;
}
.header {
background-color: #333;
color: white;
padding: 15px;
}
.header h1 {
margin: 0;
}
.menu {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
background-color: #333;
}
.menu a {
color: white;
text-decoration: none;
padding: 12px;
display:block
}
.menu a:hover {
background-color:#111
}
@media (max-width :600px) {
.menu a{
flex-basis :100%
}
}
main{
max-width :800px ;
margin :auto ;
padding :20px ;
}
footer{
text-align:center ;
padding :20px ;
}
</style>
</head>
<body>
<div class="header">
<h1>Panda Page</h1>
</div>
<nav class="menu">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>
<main>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0f/Grosser_Panda.JPG/1200px-Grosser_Panda.JPG" alt="Panda eating bamboo" style="width :100% ;">
<h2>What is a Panda?</h2>
<p>The giant panda, also known as the panda bear or simply the panda, is a bear native to south central China. It is characterised by large, black patches around its eyes, over the ears, and across its round body.</p>
<h3>5 Fun Facts About Pandas:</h3>
<ol>
<li>A newborn panda is about the size of a stick of butter—about 1/900th the size of its mother—but can grow to up to 330 pounds as an adult.</li>
<li>Pandas have been known to eat up to 60 pounds of bamboo per day.</li>
<li>Pandas have sometimes been seen rolling down hills for fun.</li>
<li>In addition to bamboo pandas also eat small rodents and birds.</li>
<li>Giant pandas have lived on Earth for two to three million years.</li>
</ol>
<h2 id="about">About Us:</h2>
<p>We are a group of panda lovers who are passionate about sharing information and raising awareness about these amazing animals. We believe that through education and conservation efforts we can help ensure that pandas continue to thrive in their natural habitats for generations to come.</p>
</main>
<footer>©2023 Panda Page </footer>
</body>
</html>
As you can see, the final result meets my requirements:
As you can see in the tutorial above, it is. And you don’t need high coding skills to use it. Of course with more time spent you can make it look better and have more features but we wanted to give you a sneak peak into capabilities of a free tool.
