Introduction

I wanted to document my attempt to use AI to build a website for me. As I try to teach my children after work, I feel that there might be tools that could help in the process and AI could help build these tools.

For a start, I thought I wanted to set up the front facing part of the website. With as much AI as possible of course.

Initial Set Up

I did not say much in the initial prompt. I merely provided a quick introduction

I want to create a website using node.js. The website is for a company named "Curious Sprouts" and it will have a landing page and a page to login. Once logged in, users are able to see the list of applications that are provided. We will talk about the applications later.

It generated a sample page very quickly with the three pages that I had mentioned: a main page, a login page and a simulated dashboard.

I could also edit the code directly, although it took some figuring out since I wasn't sure how node.js works. This allowed me to edit the text directly since Firebase Studio populated the page with their own words. They also gave me a nice 600 x 400 image placeholder.

While I was editing the page, I noticed the file contained a .vscode folder, and the page looked like vsStudio, and it was.

Creating and Linking Photos

The first thing I did was to ask ChatGPT to generate a logo for me. Thankfully in Firebase Studio, they had provided the three colours (Primary, Neutral and Accent) in easy to copy format. I copied the colours and asked ChatGPT to use them. Compared to about half to a year ago, ChatGPT had gotten better at generating text in images.

Next, I asked it to generate the 600 x 400 message. I gave it some context and requested ChatGPT to ask some questions to help make a better outcome.

I need to generate a 600 x 400 image for my website. It will be featured on the landing page near the mission statement. The company will be building tools to help in the education "for every curious little sprout". Can you suggest some concepts before the image is generated? You may ask questions for clarification until you are 90% sure that you can generate a satisfactory image.

And it did! It gave me five concept directions of how it conceptualised the image. I chose one of it, explained why I did so. There were also five other questions ChatGPT asked me on things like (1) number of characters, (2) feature of digital tools, (3) preferred tone, (4) literal or figurative and (5) whether to leave room in the image for text. After a few more back and forth question and answer, it started to generate while remembering my request of the three colours.

I shifted back to Firebase Studio and attached the image with a simple instruction. I also did the same for the logo.

The code was modified, but the images were not shown. When I looked into the code, the image was referenced directly in the same folder, but actually placed in another public folder (which turned out to be right). When I questioned it, it tells me I have to put the image in myself.

The images should now render correctly. To use your own images, you'll need to add them to a public folder in your project's root directory and then update the src paths in these files to point to /your-logo-filename.png and /your-hero-image.jpg. Let me know how else I can help.

But the code looks like this instead. I guess I have to modify it myself. We cannot expect someone with no experience to do this. While I did not have node.js experience, I had HTML experience so some of the syntax would be easy for me to understand. I took about five minutes. While it was easy to spot where the code for the 600x400 image was, the code for the header logo was in another file. Thankfully the codebase was not messy yet.

[Sidenote]

When I started the project up in Firebase Studio the next day, the images went back into default placeholders. I asked Firebase why this happened. It instructed me to upload the images to the public directory (which I already did), and then to tell it to update (instead of editing it myself, I guess).

Including an Instagram Link at the Header

I also asked Firebase to add an instagram link at the header

Add an instagram icon at the header to link to my instagram page at https://www.instagram.com/curious.sprouts/

Nicely done and linked correctly within 2 minutes

Including a call to action

I wanted to build an email capturing form in case anyone wants to follow and know more. I asked ChatGPT whether it should be in the main page or on a separate page and it suggested to put it into the main page at the bottom.

When I asked it to generate prompts for me to include into Firebase, it gave me the code instead. Slight fail there.

But it recognised that I probably need an image with it, so it also suggested a DALL-E prompt.

A cute cartoon sprout character with big eyes, waving happily while standing next to a mailbox or email envelope. Soft pastel colors (green, orange, beige), flat background.

I thought it would be better if it gave the exact code that I had provided.

I went back to Firebase studio to include the form at the bottom with this prompt.

Add a segment at the bottom of the main page to invite people to join my newsletter. Leave a space to put a nice image beside the form. Let me know the size required to make it look nice and proportionate. The form will just require an email address and a submit button. Are you able to build a captcha into it to prevent brute force submissions? Also include a call to follow my instagram page.

It did provide a placeholder image and tell me the dimensions. But it also did indicate that using Google captcha is not something it could do in a single step given that it is advanced. I will try it out another day!

I went back to edit the code in order to link my image properly, but this time, the earlier photo was broken too. Turned out they changed both in the same page to a placeholder image. The original image in the header was unchanged. Perhaps because it was in a different code. I expected Firebase to be better than this though.