Robbie Thomas
I co-created a web site with ChatGPT, didn’t work out well
Yes, I have submitted to the AI Overlords! We’re all gonna die!!!
This blogpost is purely by me and not of ChatGPT. However, I will include some of what ChatGPT says in Italic. One of my New Years Resolutions was to get back into web development. So, that will kinda sorta screw with the speed of my long-form EAS movies. I can see the fans of my EAS flicks not liking this. Heh-heh. I wasn’t one of the first people who jumped on the ChatGPT. I got drunk one day and decided to take a look at this great invention (and possibly soon to be our doom) of ChatGPT and asked some questions. And next, I decided to make a web site with ChatGPT’s help.
Since I’ve been out of the game for a while, and really, with this website you seeing this here, this WordPress template was done by me. Made around 2018 and I’ve barely messed with the code of this very template. I also want to make a new WordPress theme this year, but for this project, I thought I just keep it as HTML and CSS. So, for starters, I typed to ChatGPT: “CSS Navbar” and it did this:
HTML Structure: Create an unordered list <ul> with <li> items to represent the links in the navbar. Add any necessary submenus with additional <ul> and <li> elements.
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li>
<a href="#">Services</a>
<ul>
<li><a href="#">Service 1</a></li>
<li><a href="#">Service 2</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</nav>CSS Styling: Add styling to the navbar using CSS. Set the display property of the navbar to flex to make it a horizontal navbar. Add styles to the list items and links to make them look like a navbar.
nav {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
color: white;
padding: 10px;
}
nav ul {
display: flex;
list-style: none;
}
nav li {
margin-right: 20px;
}
nav a {
color: white;
text-decoration: none;
padding: 10px;
}
nav a:hover {
background-color: white;
color: #333;
}Since I was doing this for the first time in about three years, I asked ChatGPT to create code for other items for this site. As, css bgcolor, basic html page with header and footer, examples of css display of links in li (because I forgot about inline-block), How do you make a css navbar with link boxes stacked in a small media query?
And, lastly: css link color transform (forgot how to do that).
Again, not all of the code was ChatGPT. I did some alterations and even added code to a website I made but never uploaded it on the World Wide Web. And here is the end result via CodePen. Sans, CodePen, I’ve uploaded the said template on my webspace. For me, there was a problem and still is. It appears that the header stretches too much to the point where you can move it a few pixels over to the right. I have since fixed this but I suppose the cookies added to my browser didn’t do justice.
So, I waited a few days and went back to it. In the end of it all, I had troubles with the media queries. This site is more functional with at full screen. But it’s less functional on a phone. I noticed that the heading and links are not in center. Also, even with both options, I noticed the content box is more towards the right opposed to the center.
So, whose fault is it? I blame both me and ChatGPT. Perhaps I’m wrong and it’s mostly me and not so much ChatGPT but I’m going 50-50. Perhaps ChatGPT at this time is not ready to create a full website, but also, I haven’t done all my research. I do have some access to videos on LinkedIn about CSS and I suppose I’ll revisit that. This attempt was a failure and I’ll be starting on something new for next month (May 2023), time permitting.