Skip to content

Lesson 07 – Iterating on Web Page Code with ChatGPT

Iterative refinement is a powerful way to enhance web pages. By pairing ChatGPT with a structured workflow, you can quickly identify issues, generate updated HTML, and merge improvements with confidence.

1. Investigate the Web Page

Begin by reviewing the page you want to improve:

  1. Open the page in your browser. Check navigation, forms, and overall layout.
  2. Look for defects. Are links hard to click? Are images missing alt text? Does anything break on mobile?
  3. Note improvement opportunities. Accessibility, responsiveness, and user experience should all be considered.

Record specific observations so you know what to change.

2. Reveal and Copy the Page Source

Access the raw HTML so ChatGPT can work with it:

  1. Right‑click the page and choose "View Page Source."
  2. Select all the code and copy it to your clipboard.

This gives you a starting point for edits.

3. Iterate with ChatGPT

Use ChatGPT (or Codex) to modify the code based on your findings:

  1. Paste the HTML into ChatGPT and describe the changes you want.
  2. Review the returned code. Ask for adjustments until it meets your needs.

Example prompt:

The navigation bar is cluttered. Simplify it, bold the text, and ensure it is mobile friendly. Here is the code: [paste snippet].

Repeat the conversation until the output looks correct.

4. Test Locally

  1. Save the updated HTML as a .html file.
  2. Open the file in your browser and inspect the changes.
  3. If something is off, return to ChatGPT for another round of edits.

Testing locally ensures the page behaves as expected before deploying.

5. Integrate and Create a Pull Request

Once satisfied, ask Codex to integrate the final HTML into your project and open a pull request:

Here is the finalized HTML. Integrate it into [page URL] and create a pull request for review.

Codex will handle the commit and PR creation so your team can review the updates.

Conclusion

Following this workflow, you can:

  1. Spot issues on a webpage.
  2. Use ChatGPT to generate improved HTML.
  3. Validate changes locally.
  4. Deploy updates via Codex with a pull request.

This iterative approach streamlines web development while keeping code review and version control in the loop.

Additional Resources

Iterating on web pages with ChatGPT enables rapid, user-focused improvements. Building on Lesson 06 – Best Practices for Using Codex Actions in Parallel, which stressed conflict-free collaboration, Lesson 08 – Codex Code Quality Scans and Test Generation will elevate these iterations with automated reviews and tests.