8. Prompt Engineering

Introduction

• The world of web development is changing fast—it’s no longer just about writing code. Now, you’ve got tools like artificial intelligence (AI) to help you level up your skills and build apps smarter and faster than ever. How cool is that?
📗
Technical Vocabulary
• Artificial Intelligence (AI) — AI is making computers perform tasks that usually require human intelligence. This includes things like recognizing pictures, answering questions, or even having conversations.
• Large Language Models (LLMs) — LLMs are a type of AI that can understand and generate text based on the words and phrases you give them. They’ve been trained on huge amounts of information and they are shockingly good at lots of language-based tasks.
 

• By now, you’re probably familiar with Large Language Models like ChatGPT or Google Gemini! These LLMs are like your super-smart coding sidekicks. They can help with just about anything involving words—from crafting the perfect tagline for your project to brainstorming app ideas or even explaining tricky coding concepts.

• In this lesson, we’re diving into the art of writing awesome prompts for LLMs. Why? Because the way you talk to these tools makes all the difference in how useful they are. We’ll share tips and tricks to make sure your AI game is on point.
💭
Think About It (Think-Pair-Share)
How have you used LLMs in the past? What are the benefits and limitations?

This is a good opportunity to mention that there are other LLMs outside of ChatGPT. Other popular options include:
• Gemini — Google
• Llama — Meta
• Claude — Anthropic

Demystifying LLMs

• LLMs are essentially very fancy autocomplete systems. They rely on patterns, the context you provide, and huge amounts of training data to predict the next word in a sentence.

• LLMs break down text into smaller pieces called tokens, which the model uses to understand and generate language. Tokens can be as small as individual characters, but are sometimes whole words! For example, the sentence “I love coding!” might be tokenized like this:

• LLMs like ChatGPT process and analyze text at the token level, using patterns in these tokens to predict the next value in a sequence. For example, if you write “The best name for a dog is“ the LLM predicts the most likely tokens to come next, based on its model of human language. In the image below, you can see that while the model selected “Fido” to complete the sentence, there were other likely tokens that could come next such as “R”, “B”, “Spot”, or “Max.” It’s important to note that LLMs are generally set to include some randomness, so it doesn’t always select the most likely token! This is why when you ask an LLM the same question twice, you will likely get slightly different responses.

• Once the LLM selects the next token, it doesn’t stop there! Now, it uses the entire original sentence plus the new token to predict the next token after that and so on. This leads to a butterfly effect where small differences in the starting state of a system lead to vastly different outcomes. In the example below you can see that since the sentence was completed with “Fido,” the remaining tokens follow that idea.

• However, if the model had completed the sentence with “Spot” instead, the rest of the response would have been different as well.

• These examples begin to illuminate some of the limitations of AI tools like Large Language Models. The AI is simply guessing the next word based on statistical patterns in its training data, but it can’t really “think” like humans do.
💭
Think About It
Now that you know about how LLMs work, why do you think ChatGPT generated this incorrect response?

From the AI's perspective, "strawberry" is not a sequence of individual letters, but a sequence of token IDs.
Miscounting the 'R's in "strawberry" shows how humans and AI see text differently. We read text naturally, letter by letter, but AI tools, like ChatGPT, chunk text into tokens that combine multiple letters or even entire word parts.
Knowing this helps you use AI better! It’s a reminder that while these models are super smart, they don’t "think" like we do. That’s why they sometimes mess up even on easy stuff.

• Other limitations of AI:
• Beware of biases! These models are trained on large datasets that reflect societal biases.
• Watch out for hallucinations. LLMs sometimes make stuff up! Because of the tokenization process, LLMs sometimes generate text that seems realistic, but is actually inaccurate or misleading.
• Think of it like a friend who’s super confident about random facts but sometimes just makes stuff up when they don’t know the answer. For example, if you asked, "Who invented pizza?" and the AI said, "Pizza was invented by aliens in 1850"—that’s a hallucination. It’s not lying on purpose; it just doesn’t know the answer and guesses based on patterns in its training data.
• These hallucinations happen because AI doesn’t "know" things the way humans do. It doesn’t have facts stored like a library—it predicts what sounds right based on the data it’s been trained on. Sometimes those predictions are spot on, but other times... not so much!
• Limited knowledge. LLMs are essentially a snapshot of the world’s knowledge at the moment of their training. For GPT-4 Turbo, the training data cut-off was December 2023. This means the model typically does not have knowledge of recent events unless specifically enabled with a "browse the internet" feature.

• AI tools are fantastic at generating ideas and speeding up workflows, but they’re not magic. They’re super advanced word machines that still rely on your input. That’s why learning to craft effective prompts is such a big deal—it helps you get the most accurate and useful results from AI.

Privacy Considerations

Writing Effective Prompts

General Techniques

The Basics: Be Specific, Use Technical Language, and Include Context

Beyond the Basics

• Summarize in 3 bullet points the most important elements of JavaScript syntax.

• List the steps to incorporate JavaScript into a web application.

• Describe hallucinations in the context of large language models in 30 words or less.

• Explain how to round the corners of an HTML div element using a CSS code example.

• Compare HTML, CSS, and JavaScript in a tabular format.

• Write 3 analogies to explain the relationship between HTML and CSS in web development.

• Create a flowchart that shows the steps for changing a tire.

• Give me an acronym to help me remember the steps for using Flexbox in my web designs.

Iterative Prompting

1. Prompt

2. Evaluate

3. Revise/Follow-Up
1. You can revise your original prompt if the results aren’t close to what you wanted. From there, you can use the arrows to switch between prompts with their corresponding responses.
2. Alternatively, you can continue the conversation. Instead of revising the original prompt, add a follow-up prompt that breaks down the changes you would like to see.

<table border="1" class="dataframe table table-bordered">
	<thead>
		<tr style="text-align: center;">
			<th>Title</th>
			<th>Author</th>
			<th>Genre</th>
			<th>Release Date</th>
			<th>Pages</th>
			<th>Quantity in Stock</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>The Fault in Our Stars</td>
			<td>John Green</td>
			<td>Romance, Coming of Age</td>
			<td>2012-01-10</td>
			<td>313</td>
			<td>20</td>
		</tr>
		<tr>
			<td>Percy Jackson: The Lightning Thief</td>
			<td>Rick Riordan</td>
			<td>Adventure, Fantasy</td>
			<td>2005-06-28</td>
			<td>377</td>
			<td>15</td>
		</tr>
		<tr>
			<td>To All the Boys I've Loved Before</td>
			<td>Jenny Han</td>
			<td>Romance, Coming of Age</td>
			<td>2014-04-15</td>
			<td>355</td>
			<td>18</td>
		</tr>
		<tr>
			<td>The Hunger Games</td>
			<td>Suzanne Collins</td>
			<td>Adventure, Dystopian</td>
			<td>2008-09-14</td>
			<td>374</td>
			<td>12</td>
		</tr>
		<tr>
			<td>Wonder</td>
			<td>R.J. Palacio</td>
			<td>Friendship, Coming of Age</td>
			<td>2012-02-14</td>
			<td>320</td>
			<td>25</td>
		</tr>
	</tbody>
</table>

Practice

Other Tips

1. Don’t overthink it! Just get started. You can always redirect the AI after getting an initial response. That’s the great thing about using a language model compared to other tools — it’s a conversation!

2. If your question is complex, break it into smaller steps! The AI will be more accurate if you break up complex tasks into more manageable steps.

Resources

For a summary of this lesson, check out the 9. Prompt Engineering One-Pager!