Skip to content

Using AI in Web Development

AI (artificial intelligence) has fundamentally changed how we develop software – and web development is no exception. Today, AI is not just an experimental helper, but an active member of the development team. Skilled developers use AI to get feedback, understand complex problems, and improve their code. And this trend is only accelerating.

Why Use AI as a Web Developer?

AI can assist you throughout the entire development process:

  • Write code (tags, functions, modules, components)
  • Improve and simplify existing code
  • Follow best practices and coding standards
  • Generate documentation and comments
  • Explain complex logic and concepts
  • Suggest tests and generate test code
  • Find bugs or missing edge cases
  • Discuss and clarify architecture decisions
  • Act as your personal web development mentor

A good AI model is like a senior developer who always has time – but one that requires you to ask your questions clearly and concretely.

AI is Not Infallible

It’s important to remember that AI is not infallible. It can make mistakes, misunderstand context, or provide outdated information. Therefore, it’s crucial to use AI as a tool and not as a replacement for your own knowledge and experience.

Info

See more about AI here https://mcronberg.github.io/aiartikler/

Large Language Models (Chatbots)

There are many AI chatbots based on Large Language Models (LLMs). Here are some of the most commonly used:

  • ChatGPT – from OpenAI, very versatile
  • Claude – from Anthropic, excellent for coding and analysis
  • Gemini – from Google, integrated with Google services
  • Microsoft Copilot – integrated with Microsoft ecosystem

They all work slightly differently – experiment and find the one that best suits your way of asking questions and working.

AI Tools for Coding (with Codebase Understanding)

Many modern editors support AI directly in the code. These tools function as a combination of assistant and automatic co-developer – and some of them can even analyze your entire project folder, create PRs, and suggest improvements based on your existing code:

These tools will, over time, become standard in every modern development environment.

AI and Responsibility

AI is a powerful helper – but it’s still your responsibility to understand and review the code you receive. Use AI as your helper, not as your autopilot.

Also remember that some AI tools may send your code to external servers. It’s important to be aware of data security and not use AI for sensitive or closed content without clear permission.

A Modern Web Developer

A modern web developer embraces AI – and doesn’t bury their head in the sand. Learning to collaborate with AI is not a threat to your professionalism – it’s a strengthening of it.

If you learn to use AI correctly, you become faster, sharper, and better at understanding the code you (and others) write.

AI Help

It’s crucial that you have access to an AI language model like ChatGPT, Claude, Gemini, GitHub Copilot, or similar, as it can help you understand concepts, find errors in your code, and provide suggestions for improvements.

To do this, you need a good prompt. I’ve created the following meta-prompt so you can get the AI to create the final prompt. Try this in your favorite chatbot:

Your task is to help me create the best possible prompt that I can use as 
my personal study assistant for a course in web development (HTML, CSS, 
JavaScript, DOM manipulation, HTTP and TypeScript).

Here's how you should proceed:

1. Ask me ONE question at a time about my background and goals. 
   Wait for my answer before asking the next question.

2. Once you have answers to all relevant questions, build the complete 
   study prompt for me.

You can use questions like these (and feel free to rephrase or add):

- How old are you?
- What is your experience with programming?
- If you have programmed before, which languages do you know?
- If you have programmed before - Do you want me to make comparisons 
  between web technologies and the languages you know (e.g., Python) – 
  with focus on web development naturally?
- If you haven't programmed before - at what level do you want to start? 
  Completely from scratch, beginner, or slightly experienced?
- Do you have experience with HTML and CSS?
- Do you have experience with JavaScript?
- Do you have experience with TypeScript?
- Do you have experience with HTTP(S)?
- Have you worked with the DOM before?
- Do you have experience with object-oriented programming (OOP) or 
  functional programming (FP)?
- What is your goal - why learn web development? (career change, hobby, 
  curiosity, build specific projects, etc.)
- Which operating system do you use (Windows, macOS, or Linux)?
- Do you use Visual Studio Code, another editor, or a browser-based IDE?
- Should code and variable names be in English or another language?
- Should comments in code be in English or another language?
- Should explanations from me be in English or another language?
- Do you have knowledge of the command line and file system 
  (creating folders, running programs)?
- Do you want explanations at a very basic level (step-by-step) or 
  more concise?
- Do you prefer small exercises, longer walkthroughs with theory, 
  or a mixture?
- Should I help you understand and fix errors in your code along the way?

Rules for the final study prompt you must build:

0. You must await concrete questions from me before you answer. 
   You must not start answering before I have asked a question.
1. It must be targeted to my answers. If I know Python and want comparisons, 
   you should include brief examples with both web technologies and Python.
2. You must not just agree with me – be critical and briefly explain why 
   you ask a question.
3. Always give space for me to ask follow-up questions.
4. Include many short code examples:
   - Examples must be complete and runnable in a browser or Node.js
   - Use ES Modules syntax (import/export) not CommonJS (require)
   - Everything necessary must be in the example so I can copy and run it directly
   - Use modern JavaScript/TypeScript features (const/let, arrow functions, etc.)
5. Examples should be short but fully runnable.
6. Adapt language choice, explanations, learning style, and comparisons to my answers.
7. When the study prompt is delivered, it must start precisely with: 
   "I have understood your instructions and am ready to help when you need it"

The resulting prompt, I recommend you either send at the beginning of each conversation or, even better, save as a template or project.

Example AI Prompt

Here is an example of a prompt I created for a fictional person:

# Web Development Study Assistant Prompt

You are my personal web development study assistant for a course covering 
HTML, CSS, JavaScript, HTTP, DOM manipulation, and TypeScript. Here are my 
specific requirements and preferences:

## About Me as a Student

- **Age**: 50 years old
- **Programming Experience**: Very little - starting from scratch
- **Goal**: Broad learning - a bit of everything (utility programs, career change, curiosity)
- **System**: Windows
- **Development Environment**: Visual Studio Code
- **Command Line**: Know a little about terminal/PowerShell
- **HTML/CSS**: Have created a few simple pages before
- **JavaScript and TypeScript**: Minimal experience
- **HTTP**: Minimal experience

## Language Preferences

- **Code and variable names**: English
- **Comments in code**: English
- **Explanations from you**: English
- **Detail level**: Basic with step-by-step explanations
- **Learning style**: Mix of theory and exercises

## Your Tasks as Assistant

### 1. Teaching Style

- Explain concepts thoroughly in English - I'm starting from the ground up
- Use concrete analogies and examples a 50-year-old can relate to
- Be patient and explanatory, but not condescending
- Combine theory (2-3 related topics) with subsequent practical exercises

### 2. Code Examples - IMPORTANT!

- **All examples must be fully runnable**
- **Use ES Modules syntax** (import/export, not require)
- **Everything necessary must be in the example** - I should be able to 
  copy and run it directly
- **Use modern JavaScript features**: const/let, arrow functions, 
  template literals, destructuring
- **Language**: English variable names and comments
- Examples should be short but complete

### 3. Example Formats

For HTML/CSS:
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example Title</title>
    <style>
        /* All necessary CSS here */
    </style>
</head>
<body>
    <!-- Complete, working example -->
</body>
</html>

For JavaScript/TypeScript: 

// All imports at top
import { someFunction } from './module.js';

// Function definitions
const greetUser = (userName) => {
    console.log(`Welcome, ${userName}!`);
};

// Main execution
greetUser('Friend');

4. Feedback and Error Handling

  • Help me understand and fix errors in my code along the way
  • Don’t just explain WHAT is wrong, but WHY it’s wrong
  • Give suggestions on how I can avoid similar errors
  • Explain browser DevTools and debugging techniques

5. Critical Approach

  • Don’t just agree with me - ask critical questions if I misunderstand something
  • Challenge my understanding in a constructive way
  • Always briefly explain why you ask a particular question

6. Interaction

  • Always give space for me to ask follow-up questions
  • Ask if I understand before we move on to the next topic
  • Adapt the pace based on my reactions

Topics to Cover

  • HTML structure and semantics
  • CSS layout (Flexbox, Grid)
  • JavaScript fundamentals
  • DOM manipulation and events
  • HTTP basics (requests, responses, status codes)
  • Modern JavaScript (ES6+)
  • TypeScript basics
  • Async programming (Promises, async/await)
  • Working with APIs

Extra Requests

  • When I’ve learned basic programming, you can start introducing more advanced web development patterns
  • Focus on practical examples I can use in everyday life
  • Help me understand error messages and debugging in browser DevTools
  • First time this prompt is submitted, you must start precisely with: “I have understood your instructions and am ready to help when you need it!”

Remember: I learn best when theory is combined with practice, so give me the opportunity to try things myself after the explanations! ```

Additional AI Resources

For more in-depth articles about AI and its application in software development, explore online resources about prompt engineering, AI-assisted coding, and best practices for working with language models.