GPT4 Made Me a New Navbar

I am incorporating GPT4 into my workflow in fits and starts. It still doesn’t feel natural to attack a new problem (coding or otherwise) with the help of a chatbot, so I often don’t do it, especially when I think a traditional web search might do the job. It’s rarely obvious what GPT4 (and its kin) will do well or poorly, and many of the case studies I’ve read feel like toy examples.

I wish that more people would write up experiences where GPT4 solved a real problem for them. In that vein, here’s one of mine.

My tennis site now has a new navbar:

I dread projects like this because they involve refreshing my memory of tools that I have re-learned too many times. My HTML skills are old-fashioned but functional; I’ve never learned enough CSS to do anything properly.

Before GPT4, I would have found an example (either an existing site or something from a cookbook-style reference), then adapted that as best I could. This time, I started with the following prompt: “Show me a code snippet for a navbar with several dropdown menus for the header of a website.” The response to that single prompt got me 80% of the way to a completed project. I reformatted the suggested HTML into a table, but that was pretty much it.

In subsequent prompts, I asked for modifications so that some dropdown menus could have multiple columns, like the one in the screenshot above. GPT4 gave me a flawless solution to that one. I asked for additional CSS so that I could have ‘headers’ within the dropdowns that were not themselves links. GPT4 left out one useful line of CSS, but otherwise nailed it on the first try.

The more specific the problem, the harder it was to get AI help. We went several rounds trying to clarify the effect of “margin” and “padding” attributes, and I think I ended up figuring that out on my own. GPT4 did, however, teach me the “border-collapse: collapse;” style so that there was no visible border between table cells in the navbar. It also helped me understand some vertical-alignment issues, even if it didn’t result in the exact sort of solution I was after.

Overall, the experience was vastly superior to what I would have done otherwise. It’s easy to forget how fast it can be: I didn’t spend a single minute thumbing through reference books or hunting for a template in the wild (and then puzzling out exactly the HTML and CSS it required). I didn’t have to discard the first five StackOverflow responses that were not quite on point. The whole project took about one day, but much of that was me just futzing around to figure out what I wanted; the total GPT4 interaction was fewer than 10 prompts, and I doubt I spent more than 15 minutes dealing with GPT4’s omissions or errors.

This is a good example of the use cases that feel natural to me: A reference for things that I sort of know–or used to know–but don’t know well. It’s a small fraction of what GPT4 can presumably do, but it has proven to be a valuable one.