Home / Guides / Using AI Tools for Web Development

Using AI Tools for Web Development

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 AI to break down code you found or received.

What does document.addEventListener('DOMContentLoaded', callback) do?

Refactor

Ask AI to improve code that already works.

Simplify this function to use fewer nested if statements: (paste your code)

Debug

Give AI your code, the error, and what you expected.

Here is my JavaScript. I expected the button click to show an alert, but nothing happens. The console says "Uncaught TypeError: Cannot read properties of null." (paste your code)

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.