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

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!

Module 2.

Summary

Congratulations on completing Module Two!

In this lesson, you’ve learned some very important foundations, including how Generative AI works.

How to use popular general-purpose AIs like Claude, ChatGPT, and others.

You also discovered the four main ways to interact with AI: through text, audio, image, and video.

And last but not least, you learned about prompt architecture – how to structure prompts properly to get the best results for your project.

Once again, congratulations – and see you in the next module!

Module 3.

Gen AI in Coding Process

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.