Prompt. Build. Ship.:: AI for Web Devs Build x3 Times Faster

Hey there, and welcome to Module One!

In this module, we’re going to go over a few key things.

First, you’ll get a quick overview of what you’re going to learn in this course—the full program.

Then, we’ll talk about how this course can support you on your journey to becoming a web developer.

After that, we’ll go over who this course is designed for.

We’ll also take a moment to introduce your instructor—just so you know who’s guiding you.

And finally, we’ll cover the tools and tech stack you’ll need to successfully complete the course.

Lesson 1.

What you’ll learn

Hey my friend, and welcome to Lesson One!

In this lesson, we’ll talk about what you’re going to learn throughout this course.

We’ll kick things off with Module Two, where we’ll cover the foundations. That includes what general AI is, how it works, and how to structure your prompts effectively. We’ll take a closer look at popular general-purpose AI tools like ChatGPT and Claude, and we’ll go over the four main ways you can interact with AI.

In Module Three, we’ll dive deeper into the web development process—specifically, how general AI fits into coding. We’ll review code generation tools, explore the strengths and limitations of using AI for coding, and talk about different tools used in modern web development.

Then, in Module Four, we’ll go over five ways AI can support you in your coding journey, and we’ll break each one down in detail.

In Module Five, we’ll talk about the two speeds of code generation and how to choose the one that works best for you.

Next, Module Six will be all about hands-on practice. We’ll build a real project using AI and follow a typical web development workflow.

Finally, in Module Seven, you and I will tackle two coding challenges together. You’ll build real projects, and of course, I’ll walk you through the solutions.

Lesson 2.

How this course will help youHow will this course actually help you?

In short, you’ll learn how to build and launch your websites and web apps faster.

I’ll show you real examples of how to boost your productivity with AI—whether it's generating code, debugging, fixing errors, refactoring, or following best practices.

You’ll also learn how to cut down on repetitive tasks, which can save you a lot of time.

And in the last two modules, we’ll walk through the full app-building process, where you’ll see exactly how to create web apps with the help of AI.

Lesson 3.

Who this course is for

So, who is this course for?

We’ll keep it simple—there are two main groups of professionals this course is designed for.

First, web developers of all skill levels. Why web developers? Because the examples we’ll use throughout the course are based on HTML, CSS, and JavaScript. That makes the content more visual and familiar if you’re already working in web development.

The second group is developers from other backgrounds—like mobile developers, software engineers, or anyone coding in different languages. It doesn’t really matter what language you use, because the core principles of working with AI are language-agnostic.

That means everything you learn here can still be applied, no matter what your tech stack looks like.

Lesson 4.

Who is your teacher

Let me quickly introduce myself.

My name is Ilyas Seisov. I’m a web developer, and these days I help businesses and entrepreneurs bring their ideas to life through design and code.

My main tech stack is React and Next.js. I earned my Bachelor’s degree in Computer Science in 2014 and completed my Master’s in 2016. I’ve been working in the web development industry since then.

In my free time, I enjoy mentoring and teaching—especially around AI for coding, web development, and web design.

If you’d like to check out my latest work, head over to my website at ilyasseisov.com. You can also connect with me on LinkedIn.

Lesson 5.

What tools you need for this course and tech stack

Let’s quickly go over the tools and tech stack you’ll need for this course.

First, you’ll need a code editor. You can use anyone you like, but I personally recommend VS Code—it’s the most popular choice among developers and works great for what we’ll be doing.

Second, let’s talk about the tech stack. You should have a basic understanding of HTML, CSS, and JavaScript. That said, it’s not strictly required to know these specific technologies. Since we’ll mostly be focusing on the fundamentals of using AI in coding, you’ll still be able to follow along even if your background is in another language.

Hello, and welcome to Module Two!

In this module, we’ll explore the following topics:

We’ll start with the basics of general AI and how it actually works.

Then, we’ll dive into some of the most popular general-purpose AI tools, and we’ll break each one down in detail.

Next, we’ll look at the four main ways to interact with AI.

And finally, we’ll wrap up with an introduction to prompt architecture—how to structure your prompts effectively.

Alright, let’s jump in and get started!

Lesson 1.

What is Generative AI and how it works

Hello and welcome to Lesson One!

In this lesson, we’re going to talk about how generative AI actually works—specifically, text-based generative AI. Why text-based? Because code is essentially just text.

Let me show you a couple of slides from Google’s official explanation. According to Google, generative language models learn patterns in language by being trained on huge amounts of text data—think terabytes of it. Engineers feed this massive data into the system, and the AI learns from it.

Here’s the key point: the responses you get from a generative AI model aren’t calculated using fixed formulas—they’re predicted based on patterns the model has seen during training.

Let me say that again: it’s prediction, not exact calculation.

For example, take this sentence:

“I’m making a sandwich with peanut butter and…”

The AI might continue it with words like jelly, jam, banana, and so on. Each time you run that prompt, you might get a slightly different answer. That’s prediction in action.

Here’s another example. I asked ChatGPT to list different ways someone could respond to “Hello.” It gave me a variety of options—casual, friendly, formal, funny, energetic, sarcastic, short, and more.

So, when you prompt a language model with “Hello,” you could get any one of these variations, depending on the context and randomness involved.

Again, this shows that it's not about calculating the "right" answer, but about predicting a plausible one.

So why is this important to understand?

Because later on, as you gain more experience, you might want to build your own generative AI model trained on a custom dataset.

Why would you do that? Maybe you’re building a chatbot for a company or creating a code generation tool for specific technologies—like Nuxt.js, Next.js, or even C++—where you need precise, domain-specific responses.

To make that happen, you’d train your AI model on relevant material—documentation, books, and example code related to your specific domain.

So yeah, understanding this foundation is key if you want to go deeper in the future.

Lesson 2.

Popular general-purpose AIs

Hello, and welcome to Lesson Two!

In this lesson, we’re going to explore some popular general-purpose AIs. By "general-purpose," I mean AIs that can handle a wide variety of tasks, not just coding.

The first and most famous one is ChatGPT. It was probably the first AI model of its kind to hit the market, which is why it's so well-known. So, here we are inside ChatGPT.

In the center, we usually have the input field where we enter our prompts, along with some additional features like uploading files, searching the web, and using reasoning models for more advanced tasks. You can even use voice mode for voice recognition.

Let’s try something with ChatGPT. We’ll ask it to generate a basic HTML boilerplate.

As you can see, it successfully completes the task, and now we have a basic HTML structure that we can copy if needed. It also often includes helpful comments for better understanding.

Next up is Claude—another AI tool that’s known to be a great option for web developers and coding professionals. Many coding assistants and AI-powered code editors actually use Claude under the hood.

Here we are inside Claude. You’ll notice that its user interface closely resembles that of ChatGPT, with an input field in the center.

You can choose the model here, with both free and pro options available.

You can also adjust the style of the language it uses.

As mentioned before, Claude is particularly favored by web developers, which is why it integrates well with GitHub—you can connect your GitHub account and perform various actions with your code directly.

Let’s see how Claude works. I asked it to list CSS text properties, and as you can see, it returns a detailed answer.

One thing that sets Claude apart is that it provides artifacts—these are nicely formatted documents with grouped information, like text formatting, shadows, and more, along with small examples that you can easily copy.

Now, moving on to Gemini. This is a product developed by Google. Inside Gemini, the layout is similar, with an input field and the option to add files, either from Google Drive, your local computer, or even just an image. You can also use voice recognition through the microphone.

Let’s see what Gemini does when we ask it to explain the if-else construction in JavaScript.

As you can see, it’s processing and thinking through the answer.

It provides a clear explanation along with basic code that you can copy.

One unique feature of Gemini is that sometimes it includes links to articles where it pulled the information from, giving you more context.

Finally, the last AI we’ll take a look at is Deep-Sick. This tool was developed in China just a couple of months ago, and it functions similarly to ChatGPT. It’s especially known for its free APIs.

The interface looks very much like ChatGPT, with the input box, reasoning models, web search, and file options.

Let’s try it out. We asked Deep-Sick to list the most popular JS frameworks.

As you can see, it provides the answer, although it takes a little longer than the other tools. However, the response is still clear and well-structured.

To sum up: for general-purpose AI (including coding), ChatGPT is the best choice. Why? Because it offers unlimited messages, and the quality and speed of its responses are excellent.

For coding-related tasks, though, Claude is the way to go—just keep in mind that it does have some limitations in terms of the number of messages you can send.

Lesson 3.

Four ways of interaction with AI

Hello and welcome to Lesson Three!

In this lesson, we’re going to discuss four ways to interact with AI. By "interaction," I simply mean how you can provide information or prompts to the AI. Let’s dive right in.

The first and most obvious way to interact with AI is through text. This is probably the most popular and widely used method. We’ve already seen how this works: you type a prompt, and the AI responds. Let’s take a quick look at an example.

We’re in ChatGPT, and we’ll make a simple prompt: "Explain what CSS animation is, with examples."

As you can see, ChatGPT starts responding. It provides the definition of CSS animation, followed by a basic animation example with code.

Then, it gives another example with a moving element, and at the end, it shows a table with CSS animation properties and descriptions for each one.

The second way you can interact with AI is through audio. To do this, you’ll need a microphone on your phone or computer.

In ChatGPT, you can enable voice mode by clicking the microphone icon.

Once activated, you can speak directly to the AI. For example, I can ask, "Could you please explain the difference between React JS and Next JS in simple words?"

ChatGPT responds with a clear explanation, saying React JS is a library for building user interfaces, mainly for single-page applications, and Next JS is a framework built on top of React that adds features like server-side rendering and static site generation.

It's a great option for production-ready web applications.

While voice interaction works well for general conversation, it’s not the best for coding tasks. That’s why we move to the next method: image. This method allows you to upload an image to an AI and ask it to do something based on the content of that image. We’ll use Claude for this example.

Let’s upload an image of a simple contact form.

Once uploaded, we can prompt Claude to "Code the form on the image I have uploaded."

As you can see, Claude generates an HTML structure and applies Tailwind CSS classes.

It even provides a preview of the code. Sometimes, depending on the prompt, Claude will also display a preview of the form in action, especially when working with React components.

For example, when we tried uploading just an HTML and CSS form, the preview didn’t work, but for a React component, Claude could generate a preview automatically.

Lastly, the fourth method is video. While this isn’t as commonly used in coding, it’s still an option.

You can upload a video and ask an AI specialized in video operations to, for example, recreate the video with changes or modify a character in the video. However, video-based prompts are expensive and not as widely used in the coding world right now.

Conclusion:

For coding purposes, the best methods of interaction are text and, in some cases, images.

Text is straightforward and effective for generating code, and images can be useful for getting the AI to interpret and write code based on visual content.

Lesson 4.

Prompt architecture

Hello and welcome to Lesson 4 – Prompt Architecture.

In this lesson, I’ll walk you through the basics of prompt design and how to properly structure a prompt.

A basic prompt usually consists of three parts:

Task

Context

Exemplar

Let’s break these down.

The task is the most important part – it’s what you’re asking the AI to do. Without a task, the prompt won’t work at all.

For example, a prompt like “Name fruits” is a task. And the AI might respond with apple, banana, pear, etc.

These could come from anywhere – northern countries, southern countries, Europe, Africa, Australia – all kinds of fruits.

The context is good to have, because it gives your prompt direction.

Let’s say we add: “Tropical ones.” Now the prompt becomes “Name fruits, tropical ones.” The AI now focuses only on tropical fruits. So context helps narrow down the result.

The third part is an exemplar – an example. This one is optional, but useful.

Adding “Example: mango” helps the AI stay focused.

So now the full prompt becomes: “Name fruits, tropical ones. Example: mango.”

Here’s how I personally rank their importance out of 100:

Task: 50%

Context: 40%

Exemplar: 10%

Let’s look at another example – this time, building a city.

Task: Build a city.

Without context, the AI might build any kind of city – something real, imaginary, ancient, futuristic, or something from a game or book.

Context: Let’s say the city should have many trees, be cloudy, rainy, and have a cool climate.

Now the AI will avoid building a city in a hot or dry region.

Exemplar: Seattle.

Adding that helps the AI aim for a similar feel or environment.

Let’s try a coding example now.

Task: Build a form.

That could be anything – short, long, simple, fancy, with different colors or fonts.

Context: Use Tailwind CSS, colors should pop like the Google logo, and include fields like name, email, and phone.

That gives the prompt more direction.

Exemplar: You might even upload an image of a form you like – so the AI knows what kind of style you’re going for.

So that’s how prompt architecture works – task, context, and exemplar.

Once you understand this structure, you can use it not only in coding but in many areas of your life where AI can help.

Exercise.

Prompting practice

This is a practice-style task.

For this module, you’ll have a small assignment: create a simple prompt using proper prompt architecture, and then test it in the four different generative AIs we've discussed.

The goal of this task is to help you understand how prompting works.

To make it easier, here’s a breakdown of the steps:

Create a simple prompt. It doesn’t have to be about coding, although coding-related prompts are preferred since this is a coding course.

Apply the 50-40-10 rule we covered earlier – that’s task, context, and exemplar.

Use this prompt in four different AIs: ChatGPT, Claude, DeepSeek, and Gemini. Try it out and compare the results.

The main goal here is to get comfortable with using AI.

Good luck!

Hello and welcome to Module 3: Generative AI in the Coding Process.

Now the fun part begins because we’re diving into the coding zone! In Module 2, you covered the essential basics of using generative AI. But now, we’re going to get into the meat of it. In this module, we’ll start by discussing the role of generative AI in the web development process.

Then, we’ll take a look at the best aspects of AI and some of its limitations. Finally, a large portion of the module will be dedicated to an overview of the tools.

Specifically, we’ll cover tools for code generation, general-purpose AI chats for coding, specialized AI chats for web development, coding assistants, and AI code editors.

Let’s get started!

Lesson 1.

What role Gen AI plays in web dev process

Welcome to Lesson 1! In this lesson, we’ll explore the role that generative AI plays in the web development process. We’ll go through some examples, use cases, and key things you need to understand.

The first and most important point to grasp is that AI is a nice-to-have addition to your process, not a must-have. Why? Because you can still write code without AI, just like we’ve been doing for years.

It’s crucial to understand this because it helps you avoid FOMO (the fear of missing out).

These days, it feels like new AI tools are popping up all the time, and we might think, "I must use this, it’s going to make things easier." And yes, it might—but remember, AI is just a nice-to-have addition.

So, what role does it play in our process? How exactly does it help? The answer is simple: AI saves time and energy.

That’s it. It doesn’t add something new or necessary to your process—it just helps you work faster.

Yes, AI can write code for us and do some of the thinking, but we can still do this ourselves. I want to emphasize this: AI doesn’t replace us; it helps us work more efficiently.

Let’s take a step back and look at how things worked before AI.

As developers, we’d manually search for answers—we’d Google things, go to Stack Overflow, read articles, watch YouTube videos—and then we’d summarize all that information and apply it to our projects. We’d basically think through problems and write the code ourselves.

So, what’s changed in the AI era? Now, we ask AI for solutions. For example, if we have an app and want to add a feature, we’ll ask AI how to implement it.

We provide it with our files or the documentation of a third-party library, and AI generates the code for us. In short, we now prompt AI and check its output. Before the AI era, we would think and write; now, we prompt and check.

Here’s an interesting fact: according to Google’s CEO, over 25% of new code at Google is now generated by AI.

This is a big deal because it shows the direction the industry is heading in. To be a successful developer today, we need to be part of this trend. What does this mean for us? It means the pace of work has increased.

The key thing to understand here is that the speed has increased, not the foundational knowledge. As I mentioned earlier, we can still write code ourselves, but AI helps us write it faster.

This makes it even more important to have strong foundational coding skills. Why? Because while AI can generate new features and debug code, if we don’t understand what the AI has done, the code can become useless.

But with solid coding skills, you can review the AI-generated code, spot areas that need improvement, and even propose better solutions.

So, the priority is to first master basic coding skills, and then move on to coding with AI.

If you want to be a great developer, you need to see yourself as the leader, with AI as your co-pilot.

You can still be a highly productive developer, but AI will make your journey a lot smoother and more enjoyable.

Lesson 2.

Where AI Shines and Where It Doesn’t

Hello and welcome to Lesson 2. In this lesson, we'll explore both the strengths and weaknesses of AI when it comes to coding. Let's dive in.

AI excels at solving formalized problems. But what exactly does that mean? A formalized problem is one that has a clear, specific solution. For example, 1 plus 1 will always equal 2. It's straightforward and predictable.

In coding, the most formalized tasks are algorithms. These involve inputting specific data and getting a specific output every time. That's why algorithms are easier for computers and machines to handle—it's all about following a defined process.

Since many algorithmic problems have been solved in various ways over the years, these solutions are well-known, which makes AI particularly good at handling them.

Let me show you an example of how I practice algorithms. Recently, I worked on a simple task where I had to write a function that returns the number of words in a string.

I spent some time solving it on my own, and I came up with a function that takes a string as input and returns the number of words in it.

Afterward, I asked Claude (or ChatGPT) to check my solution and provide feedback.

It successfully reviewed my function, confirming that it handled basic cases well and even suggested improvements and testing tips.

Then I asked it for alternative solutions, and it came up with five different approaches.

This is a perfect example of how AI can help with formalized problems like algorithms. When you're working with specific, structured tasks, you'll get the best results from AI.

AI also shines when working with well-known libraries and frameworks. For example, React, Angular, and Vue are widely used, meaning there are tons of examples, articles, and documentation available.

This gives AI a rich context to work with, so you're likely to get good solutions when using these libraries and frameworks.

Now, let's talk about where AI doesn't perform as well.

AI struggles with less formalized subjects. One area where I've noticed this is CSS, particularly with styling and layout in web development. Why is this the case?

Well, CSS isn't as formalized as a programming language. It's less strict, so you might make a logical error without getting any feedback. For instance, if you use the same property twice in CSS, the second one will simply override the first, and there's no error message to warn you.