Home / Guides / Using AI Tools for Web Development

Using AI Tools for Web Development

This guide covers the practical how-to for web work. For the principles behind it, including the one rule about understanding what you ship, read Building and Learning with AI first.

💬 Four Ways to Ask AI

  • Generate. Ask AI to create something from scratch. "Create a responsive nav bar with links to Home, About, and Contact."
  • Explain. Ask it to break down code you found or received. "What does document.addEventListener('DOMContentLoaded', callback) do?"
  • Refactor. Ask it to improve code that already works. "Simplify this function to use fewer nested if statements" (paste your code).
  • Debug. Give it your code, the error, and what you expected. "The button click should show an alert, but nothing happens. The console says Uncaught TypeError: Cannot read properties of null." (paste your code)

🧭 Use AI Across the Whole Build

Writing code is one part of building a web product. AI helps with the rest of it too.

  • Plan and scope. Turn a rough idea into a short PRD before you build. "Turn this idea into a one-page PRD: the features to build, what is out of scope, and who it is for."
  • Structure the project. "I am building a recipe site with plain HTML, CSS, and JavaScript. How should I organize the files and folders?"
  • Troubleshoot deployment. "My GitHub Pages site shows a 404. Here is my repo structure and my settings. What is wrong?"
  • Write the README. "Draft a README for this project that explains what it does, how to run it, and what I learned building it."
  • Sharpen commit messages. "Here is my diff. Suggest a clear commit message that says what changed and why."

Treat these the same way you treat generated code: read the output, decide what fits, and make it yours.

✍️ Writing Good Prompts

Include context. Tell AI what language you are using and what you are building.

  • Good: "I'm writing CSS for a portfolio page. How do I center a div horizontally and vertically?"
  • Vague: "How do I center a div?"

Include the error message. Copy and paste the exact error. Do not paraphrase it.

  • Good: "I get this error in the console: Uncaught ReferenceError: x is not defined at script.js:12"
  • Bad: "It says something is not defined"

Include the relevant code. Paste the section that matters, not the entire file.

Be specific. Say exactly what you want changed.

  • Good: "Make this nav bar collapse into a hamburger menu on screens below 768px."
  • Vague: "Fix my CSS."

🔍 After AI Gives You Code

  1. Read every line. Do not skip anything.
  2. Find parts you do not recognize.
  3. Ask AI to explain just those parts: "What does the ::before pseudo-element do in this CSS?"
  4. Change something small (a color, a class name) and confirm it works the way you expect.
  5. Test it in your browser.

If you cannot explain what a line does, ask AI to explain it.

🤖 GitHub Copilot in VS Code

Tab to accept a suggestion. Esc to dismiss it.

Write a comment first. Describe what you want in a comment, then press Enter. Copilot will suggest the code.

// create a function that toggles the "hidden" class on an element by id

Copilot will try to complete it. Review the suggestion before accepting.

Use Copilot Chat for longer questions. Click the chat icon in the sidebar (or press Ctrl+Shift+I / Cmd+Shift+I). You can ask questions, paste code, and get explanations without leaving VS Code.

❓ When You Do Not Understand the Output

Do not paste code you do not understand and move on:

  1. Ask: "Explain this code line by line."
  2. If the explanation uses terms you do not know, ask about those terms.
  3. If it is still unclear, ask: "Can you give me a simpler version that does the same thing?"

Use the simpler version if you understand it.

🚩 Signs You Grabbed Code Without Reading It

These patterns usually mean AI output went into your project before you read it. Using a tool the course did not cover is fine when your project needs it and you can explain it. The problem is shipping code you cannot explain. None of these are automatic failures, but they will come up at checkpoint reviews.

  • Code that cannot run where you deploy. Your site is plain files on GitHub Pages, with no server of its own. If AI hands you a Node.js server, an Express route, or a database query and you paste it in, it will never run. That usually means AI solved a different problem than the one you have.
  • TypeScript in a .js file. Things like : string, interface, or enum. AI often defaults to TypeScript. If you see this and do not know what it means, ask AI to rewrite it in plain JavaScript.
  • A library you did not choose. lodash, axios, day.js, and the like, with no mention in your README. That is a dependency AI added on its own, with no sign you evaluated whether you needed it.
  • Variables named data, result, temp, or x everywhere. These are AI defaults. Rename them for what they actually hold: weatherForecast, userInput, taskList.
  • One commit with the whole project. Your history should show the project getting built across days, not landing all at once.
  • Commit messages that all say update or fix. Write what you actually changed.
  • API keys or tokens in your repo. This is a security problem. Never commit secrets, even to a practice project.

The reason behind all of this is the one rule in Building and Learning with AI: you have to be able to explain what you ship. When you need an authoritative answer, check MDN first, then use AI to help you apply it.

Last updated: Friday, 6/5/2026