Chatgpt Help With HTML

I’m not great at CSS and, like many others, find that positioning elements on a web page can range from tedious at best to utterly frustrating at worst. Fortunately, ChatGPT-4 is pretty adept at stuff like this. I’m not saying it’s perfect every time, but usually, I can arrive at an answer after a few iterations.

I use ChatGPT for this in two primary ways. The first is by asking it to create a stand-alone page with the necessary elements and styling. I can then load that page into Chrome and continue iterating with ChatGPT. This approach has worked well, especially when I’m developing a new web page.

However, I often need to modify existing web pages, which can be quite complicated. These pages often feature both an external stylesheet and intricate inline styles. The challenge lies in conveying this information to ChatGPT so it can suggest improvements. I’ve tried pasting just the relevant section of HTML, along with any referenced parts of the external stylesheet, but this method is tedious and may miss critical positional information from higher up in the page hierarchy. Pasting the entire web page and stylesheet is not feasible, as the data is just too large.

To address this, I’ve developed a JavaScript function that calculates the computed styles for a set of elements and writes those styles directly into the elements as inline styles. This allows me to use the Developer Tools inspector to copy the relevant element tree. Pasting that into ChatGPT gives it all the positional information it needs to assist me.

Here is the function to iterate over an element and its children:

Note that I limit the inlining to only the relevant positional styles and try to avoid including default values. To use it, call inlineStyles() on the element at the top of the tree that you wish to edit.

I’ve just started using this technique, but it already proved quite helpful in resolving a tricky issue on the Groups.io chat page this evening.