How I Used ChatGPT to Create My Website: A Journey of Learning and Innovation

Creating a website from scratch can be a daunting task, especially if you're not a web designer and only have basic HTML knowledge. Yet, with the assistance of Chat GPT by OpenAI . I embarked on a journey to build a super light, fast, and responsive website. Here's how I did it and the lessons I learnt along the way.

If you would like to see what we created together, you can visit the final website here: https://ProHeadshots.uk

The Challenge

For my main websites, I typically use platforms like Wix, Squarespace, or Photodeck. However, this time I wanted to create something from scratch. I chose not to use WordPress because, although it is good, I wanted to write it myself as a learning experience. As a firm believer in lifelong learning, I saw this as a perfect opportunity to expand my skills and knowledge.

I had recently signed up for ChatGPT and was really enjoying the experience. Curious to see if it could teach me how to program using HTML, I decided to share this project with ChatGPT . My goal was to build a site that was not only functional but also highly optimised for speed and performance.

Getting Started

I started by looking at other people's websites and their source code. I thought I could just get GPT to tweak what was already there. I soon found that this would not work, and when I tried creating a site, everything was all over the place. My site would need to be built from the ground up.

Although I did not fully understand the HTML code I was seeing, I noticed that Bootstrap was often involved. ChatGPT explained how it works, which was incredibly helpful.

So, starting with the Bootstrap layout styles and some limited HTML, we began.

First was the navigation menu. I asked ChatGPT to create the HTML and CSS code. It took some time to get used to the way I needed to phrase my requests to get the desired results.

Once the menu was set, I moved on to the footer. By describing what I liked about a footer on another website, ChatGPT helped me build a basic framework after some back and forth.

The Design Process

While I initially tried using DALL-E to create icons and logos, this proved to be a long and unproductive road. Eventually, I made them myself using Photoshop. For each section of my homepage, I described my vision to ChatGPT. The more I learnt about HTML and responsive design, the more I redefined my requirements, often redoing the entire site.

Over the next few weeks, dedicating about an hour a day, ChatGPT helped me build my site piece by piece. It advised me on font sizes, screen resolutions, line spacing, and techniques like lazy loading and deferred script loading to speed up the site.

Crafting the Content

Next, we tackled the text. By providing examples of websites I liked, ChatGPT generated copy and suggested keywords for SEO. We refined the text to include long-tail keywords, meta descriptions, image alt text, and appropriate image names.

Obviously, I took all the photos myself. However, ChatGPT guided me on the best sizes, compression techniques, and file formats.

Using SEO tools, I fine-tuned the text with ChatGPT's help. Finally, we worked together on the JSON schema for both the homepage and a service page.

The Result

My website is fast and responsive. It largely looks and works how I would like it to. It has excellent PageSpeed scores that are consistently around 96% for desktop and 91% for mobile.

Lessons Learnt

• ChatGPT is highly capable (I used version 4 and 4o).
• Mastering the right prompts is key: The real power comes when you get to grips with the right prompts to use. I’m still perfecting this, but I've become much more effective over time.
• My writing style has evolved: My style has slowly morphed into the style ChatGPT uses, often requiring little to no changes.
• General vs. specific advice: ChatGPT offers great advice based on a general model, but it doesn't always grasp the nuances of a specific type of site (in this case a website for headshots with los of images).
• HTML/CSS challenges: Some code didn't work as expected, despite asking ChatGPT in different ways (and on different days, with both 4 and 4o). Not everything functions perfectly yet.
• Enhanced understanding: I now have a reasonable grasp of HTML and a better understanding of CSS - so I can tick off the learning point.

Together: My biggest learning point is that I feel I am working together with the program rather than it working for me. I find myself thanking ChatGPT, asking with a 'please', and telling it when it is working well. Maybe we simply crave a human-like experience, or maybe we can learn to work with AI rather than serve it or be served by it.

Areas for Improvement on the Site

• Optimising Bootstrap CSS: I’m only using a small portion of the Bootstrap CSS and would like to strip out unused parts to speed up the site.
• FAQ section integration: The FAQ section doesn't fit well with the rest of the site.
• Mobile menu issues: On mobile, I get a hamburger menu despite having no menu items.
• Hero image on iPad: The main hero image sometimes disappears on an iPad, and ChatGPT’s solutions haven't worked.
• Balancing text and images: The sections could be better balanced to make the best use of both text and images.

Conclusion

All in all, this project has been a fabulous learning experience. Using ChatGPT to build my website has not only helped me achieve a functional and fast site but also significantly enhanced my web development skills. It's a journey I highly recommend for anyone looking to push their creative boundaries and learn something new.

And yes, I worked with ChatGPT to write this article. ??

Peter