Having success with ChatGPT and a simple bit of HTML/CSS I wanted to see if we (it and I) could build a more complex single page website. I started by asking it:
write a boilerplate html home page
Certainly! Here’s a basic example of a boilerplate HTML home page:
This is a simple HTML template that includes a header with a navigation bar, a main content section with three sections for home, about, and contact information, and a footer. You can customize the content and layout of the home page to suit your needs, and add additional HTML elements, CSS styles, and JavaScript functionality as desired.
Add a hero section
Certainly! Here’s an updated version of the boilerplate HTML home page with an added hero section:
The added hero section includes a background image, a centered heading, and a subheading. You can customize the content, styling, and background image URL to suit your needs. The other sections, header, main, and footer, remain the same as the previous version of the boilerplate HTML home page.
add an image to the hero section
Certainly! Here’s an updated version of the HTML home page with an added image to the hero section:
In this updated version, an image element <img> is added to the hero section. You can customize the image source (src attribute), alt text (alt attribute), and styling to suit your needs. The CSS styles for the image include a fixed width and height, border-radius for a circular shape, and object-fit to cover the image within the defined dimensions.
Make the hero image responsive
Certainly! Here’s an updated version of the HTML home page with a responsive hero image using media queries:
In this updated version, media queries are added to adjust the hero image size and font sizes for different screen sizes. The max-width: 100%; and height: auto; CSS properties for the hero image ensure that it scales down proportionally on smaller screens while maintaining its aspect ratio. You can further customize the media queries and CSS styles to suit your desired responsive design.
Add a section for a fish store
Certainly! Here’s an updated version of the HTML home page with a new section for a fish store:
fill in the about section with a short description of apple
Sure! Here’s an updated version of the HTML home page with a short description of Apple in the “About” section:
Note: Please replace the image URLs with your actual image file paths or URLs for the hero image, hero avatar, and fish store image, respectively.
Add a news section
Certainly! Here’s an updated version of the HTML home page with a news section:
Note: Please replace the image URLs with your actual image file paths or URLs for the hero image, hero avatar, fish store image, news image 1, and news image 2, respectively. You can also add more articles or customize the news section as per your requirements.
Make the news section images responsive
Sure! Here’s an updated version of the HTML home page with the news section images made responsive using CSS:
The CSS styles added to the .news article img selector set the maximum width of the news article images to 100% and ensure that the height adjusts automatically to maintain the aspect ratio, making the images responsive and fit well on (the screen – this text was human generated).
That wraps up this coding session with ChatGPT. I hope it shows you both the power and limitations of the technology. It’s not perfect. It needs some CSS wrapped around the menu, image optimizations (loading webp, then jpg, both in 1x and 2x, etc.), better formatting for the news section, etc. But in just a few minutes, with the knowledge you need to ask it what you want (that’s important), you get a fully functional single page website. Adding a footer is really all that’s needed to finish this up.
Things are moving fast and I expect we’ll see smaller models tuned to more specific datasets that will perform even better in thevery near future. With the release of the Meta (Facebook) LLaMA model and the related Stanford Alpaca which can be ran on much less compute than other proprietary LLMs (Bard and GPT). For example, Stanford on the initial run, fine-tuning a 7B LLaMA model took 3 hours on 8 80GB A100s, which costs less than $100 on most cloud compute providers. They note that training efficiency can be improved to further reduce the cost. That’s both exciting and scary. What will the world look like in a few years with all these machine intelligence, as Google like to say, models running the world?
After looking at the finished page I decided to ask it to do one more thing:
Can we add css to make the menu a series of text links across the top of the page
Sure! Here’s an example of how you could add CSS to make the menu a series of text links across the top of the page:
Click the image to see the completed page live.
If I were a web developer I wouldn’t worry – yet. I can’t foresee a future where you don’t need a driver. How can an AI model know what I want? How can I tell the AI model what I want if I can’t interact with it using human intelligence. Machine intelligence will be useful in ways we can’t imagine. And small LLMs that can run on less compute will open this technology up to a lot of people. This is the start of something big.
I could’t stop :-). I went on to ask it to:
add some padding to the paragraph css Add horizontal padding to the paragraph css make the menu background color blue make the header nav right justified and the header left justified change the font used in the header to a fast loading builtin font make the font used in the nav section to be non bold
After a while it sort of lost context and built an entirely new “Fish Store” website. I asked it to “add a meta description tag to the page” and I got an entirely new page with a lot of cool fish store content ;-). AI…