Given the following prompt, this is what ChatGPT produced.
Prompt: make an html layout with a signature image at the top, a row of links that can be used for navigation below that are six elements, all half width of the page, all the same height. the first third and fifth element have text content, the 2nd 4th and 6th element have an image. At the bottom of the page is a small footer with a page list
Response:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website Layout</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
header {
text-align: center;
padding: 20px 0;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
background-color: #f2f2f2;
padding: 10px 0;
}
nav a {
text-decoration: none;
color: #333;
padding: 10px;
}
main {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
padding: 20px 0;
}
.element {
width: 48%;
height: 200px;
border: 1px solid #ccc;
margin-bottom: 20px;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<img src="signature.jpg" alt="Signature" height="100">
</header>
<nav>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
<a href="#">Link 6</a>
</nav>
<main>
<div class="element">Text Content</div>
<div class="element"><img src="image1.jpg" alt="Image 1" height="100"></div>
<div class="element">Text Content</div>
<div class="element"><img src="image2.jpg" alt="Image 2" height="100"></div>
<div class="element">Text Content</div>
<div class="element"><img src="image3.jpg" alt="Image 3" height="100"></div>
</main>
<footer>
<p>Pages: <a href="#">Home</a> | <a href="#">About</a> | <a href="#">Contact</a></p>
</footer>
</body>
</html>Replace "signature.jpg", "image1.jpg", "image2.jpg", and "image3.jpg" with the actual paths to your images.
My thoughts
ChatGPT can make html templates from streams of thought. Once the program is generated, I’m able to now issues commands such as
“replace signature.jpg with fun.jpg”
“replace the link texts with Home, About, Contact, Sellers, Truth’s Real, and Church”
“change the nav links hrefs to / /about /contact /sellers /market /truthsreal also change the text of the 5 link to Market and the text of the 6 link to Truth’s Real”
and the chatbot can modify the previously generated code.
It saved some time on boilerplate for the padding and layout CSS. All in all, the utility exists.