Personal Website via Prompt Engineering (HTML, CSS, JS)

Inspiration

I needed a personal website for professional purposes (ideally free) and couldn't find a template I liked.

What it does

Showcases my prompt engineering and marketing skills; enables people to contact me via LinkedIn.

How I built it

GPT-4 and a combination of priming the model, chunking, chain of thought reasoning, providing in-depth contexts, and metaprompting.

Challenges I ran into

The main challenge - and most obvious one - was that I did not know HTML or CSS.

It was simple to have the model produce the initial design/layout and code. However, when I needed to make edits or fixes, the model would usually give me the code snippets and I had no inkling of where this code should be placed, what should be removed, or if there are any hallucinations.

For most of the interactions, I was able to solve this by instructing the model to provide me the entire code; then I would simply copy/paste. This dance lasted quite some time – until I began optimizing the website for mobile.

As the design evolved, it became too cumbersome and time-consuming to have the model regenerate the entire code for each edit. In addition, the model would often change code that I did not want changed. I realized there was no getting away from having a cursory understanding of what I’m looking at in the code. So, I asked ChatGPT to explain it to me and equip me with basic knowledge of HTML/CSS. Thereafter, I was able to just request the neccessary code snippets and where they need to be placed.

Certainly, there are elements that still need optimizing, but the fact remains: I built a fully functional website in mere days – it would've taken me months without GPT-4.

For a more detailed project description containing actual prompts and outputs, see here: https://medium.com/@olgatopchaya/how-i-built-a-website-with-chatgpt-without-knowing-code-and-why-i-nearly-threw-my-laptop-out-the-137d81a4eed2

Accomplishments that I'm proud of

I built a fully functional HTML, CSS, JS wesbite without ever knowing code.

What I learned

This process had highs and lows, and more than once, my laptop was in danger of an unexpected flight. Yet this endeavor proved that the only way we can know the limit of what an LLM like ChatGPT can do is by how willing we are to experiment.

It’s a brave new world of AI and we must be brave enough to just go and try things (then try, try, try again).

Built With

• css
• gpt-4
• hmtl
• javascript