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

Ilyas Seisov

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

Introduction

Hey there, friend!

First off, thank you for getting this book! You’ve just made one of the smartest choices for your learning journey.

This book is more than just something to read – it’s basically a full course in text form.

By the time you finish this book and complete the exercises and final project, you'll have a solid understanding of how to use AI in web development. Your speed will increase by at least 3x, and with some practice, you’ll develop your own style and get even faster.

This isn’t some strict rulebook. Think of it more like a set of flexible tools – like LEGO bricks – that you can mix and match to fit your personal workflow and projects.

The book is split into seven modules, each one building on the last.

The first module is just an intro, so if you’re eager to dive in, feel free to jump straight to Module 2.

If you'd rather learn by watching, you can grab the video course version here: dub.sh/pbs-course

Thanks again – and I’ll see you in the next module!

Module 1.

Course Overview

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.

Module 2.

Generative AI Foundations

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.