What is prompt engineering?

0:00 not quite getting the results you want from chat GPT wondering how you can use AI language models to your advantage then this course is for you if you have spent any amount of time with AI language models like chat GPT and Google bard you may have noticed the results can sometimes be a little frustrating effective prompt engineering is the secret sauce for getting the most out of AI in this course treasure por will teach you the Art and Science of effective prompt engineering to get the most out of AI language models and help you become a better web developer treasure is a software engineer and she's a technical content developer at scrimba hi free code Camp Learners welcome to my course on prompt engineering for web developers prompt engineering is the Art and Science of communicating with AI to yield better more precise more robust results AI interfaces like chat GPT and Google bar do a little bit of everything from writing silly poems to to summarizing large text to generating code Snippets this course is designed specifically with web developers in mind so it's packed with ideas strategies and

1:09 practice challenges that are going to help you get the most out of AI language models as a coder you're going to learn how to use prompt engineering to transform an AI language model into a par programming partner a personal coding tutor and even a career in interview coach with the help of AI you're going to be coding better and faster than you ever have before so I hope you're excited to get the most out of this course you should have some experience writing JavaScript and react but whether you're a senior Dev or just starting out there's something in this course for you so thank you so much for joining me and let's get [Music] started hello prompt Engineers welcome to my course on prompt engineering created specifically for web developers we are entering a future in which web development is so much more than writing code it's about leveraging artificial intelligence to supercharge your coding skills to build smarter and faster and this course is all about showing you how firstly though hello my name is treasure I've been a friend and developer since 2015 and a teacher and instructor for even longer than that I switched careers after going through a boot camp and I

2:18 love traveling karaoke and singing in a choir I've done hundreds of hours of research coding and experimentation with AI language models and I'm really excited to share what I've learned with you there's been so much Buzz about AI recently that you've probably heard a lot about language models like chat GPT or Google bard by now so I'm going to give you a very Lightning Fast definition language models are artificial intelligence tools that allow you to have humanlike conversations with a computer language models like chat GPT can help humans do pretty much anything involving words whether it's ad copy poetry or helping you brainstorm a list of names for your new cat I've split this course into three sections the first section covers many tips tricks and strategies to design and refine your AI prompts to get the most out of interacting with AI language models the second section is a collection of prompt ideas and examples exploring how you as a developer can use AI language models to generate document and debug your code as well as use it as an Interactive Learning tool you'll learn some practices to help you use AI as a PA programming partner a rubber ducky if you will that not only listens to you but helps you find Solutions and the last section is all about using AI language models to enhance your job

3:27 search I'll show you examples of how to use AI for everything from finding places to apply to learning and practicing algorithmic coding challenges to generating and practicing behavioral interview questions for this course we'll mostly be using open ai's public interface commonly known as chat GPT with a little bit of Google barge sprinkled in I highly recommend that you follow along and experiment with your own prompts and you can click on the logos to visit the public interfaces for these AI language models and sign up for an openingi account if you need to before we go into any further I want to quickly address a common question that pops up when people start learning about AI will AI replace developers or make it harder for me to break into the tech industry tragically I'm not a time traveler or a psychic or even an expert on industry Trends so I can't definitively answer this question but what I can say is that being a developer is so much more than being able to spit out code it's about understanding the user and how to create products and services that are intuitive Pleasant to use fast and that solve real world problems to make people's lives easier it's about empathy and creative problem solving and Innovation working as part of a team and the list goes on at this

4:36 moment in time we still need humans to do that and right now language models are really only good at one thing and that is guessing what word should come next giving a sequence of words at the end of the day language models are simply trying to predict which words should come next AI language models are also only as good as the data they're trained on they are prone to making things up and they become less effective as the complexity of your problems or your code bases goes up so the short answer is no in my opinion AI is unfit to replace developers anytime soon language models are best used as tools to streamline the most tedious rote tasks of a developer bringing us up to focus on bigger more complex more interesting problems now that that's settled and you know what you're in for let's talk a bit about prequisites it's important to note that while you don't have to be an expert you should have some experience with JavaScript and reactive be successful in this course as long as you've done some basic coding this course should give you a wealth of ideas for how to harness the power of AI in your webd Dev workflow so let's go let's do it the first step to getting the most

5:45 out of AI is learning effective prompt engineering so let's talk about what prompt engineering actually is this is a relatively new term that you may have heard out in the wild in all of the talk about AI recently and at first glance you might assume like I did that prompt engineering is a way to say software engineering via prompting a language model but it's actually a much more generalized term prompt engineering means crafting prompts to effectively guide a language model's responses here's another definition designing and refining inputs to obtain your desired output I like to think of prompt engineering as The Art of Getting AI to do what you want whether you want AI to write an essay or make art or produce code for you how you engineer prompts depends largely on what you want the language model to produce in our case we're going to talk about prompt engineering specifically for front-end development and our desired output is code or information about code when it comes to AI assisted coding a well-engineered prompt ensures gpt's output is tailored to your specific needs and it's going to mean hours of development time saved from repetitive boilerplate code debugging and a lot

6:52 more for the next part of the course we're going to discuss prompt engineering specifically for frontend development and here's a sneak peek of the basic Strat strategies for Effective prompt engineering we need to be specific use technical terms provide context give examples and perhaps most importantly iterate so we're going to go through each one of these strategies look at a ton of examples and you're going to learn a wealth of great tips and tricks it's going to be great so let's dive into it I'll meet you in the next scrim let's talk about the basics of writing effective prompts it's very much a worthy Endeavor to take the time to craft a great prompt when working with language models like GPT a great prompt can mean the difference between Broad and largely unhelpful responses from the AI to finally tuned outputs that save you potentially hours of time I highly encourage you to follow along with me and try all of these prompt examples out yourself and you can click on this image to go to gpt's public interface keep in mind as we start looking at examples that there's a certain Randomness to how chat GPT outputs information so even if you enter in the exact same prompt your output is probably going to be a little

8:03 different from what chat GPT has given me how it responds depends on a variety of factors like I said Randomness and it can also vary depending on your prompt history and which model you're using so just keep that in mind the responses will be similar most likely but probably not exactly the same let's talk about strategies for Effective prompt engineering the first three are be specific use technical terms and provide context here's an example of a not so great prompt how do I Center something a slightly better example of this prompt would be how do I Center an element on a web page and an even better example is what's the best way to Center div element horizontally and vertically using CSS let's see what happens when we enter this into GPT when I use the broad prompt how do I Center something GPT says well I need more context what are you trying to Center and how are you trying to center it are you talking about physical space or a digital environment are you centering a word processor on a website graphic design software more information please so then I prompt again with something a little bit more specific and a little more technical I'm saying I want to Center an

9:13 element on a web page now GPT responds with well you can use cascading stylesheets there are several ways to achieve this but it recommends that we use flexbox or css grid notice here the assumptions that GPT is making based on our prompt it's perhaps assuming that we may not know what cascading stylesheets are it then provides us with some code for the HTML and CSS for flexbox and for grid let's see what happens if I refine The Prompt even further this time I'm going to say what's the best way to center a div element horizontally and vertically using CSS so I'm providing more context I'm saying I want to know what the best way is I'm also being more specific I'm saying I want specifically a div element and I want to Center it both horizontally and vertically and I'm also specifying the technology that I want chat GPT to respond with which is CSS this results in a similar response so it's still suggesting that we use flexbox or css grid but this time it gives us some pros and cons for flexbox as well as some sample code and some

10:23 pros and cons for grid so you can see how even the slightest tweak to a prompt can result in in very different outputs from GPT let's look at another example I'm going to start with the really broad prompt how do I use reduce with this prompt GPT responds by explaining that reduce is a function that takes two arguments but looking down a little further you'll see that because we didn't specify a technology it is providing an explanation of reduce in Python followed by some sample code on how to use reduce in Python so here's a small challenge for you think about how you would engineer The Prompt if you wanted a JavaScript example think about how you would engineer The Prompt if you wanted to understand what javascript's reduced method is used for in other words some use cases and also think about how you would engineer a prompt if you were a beginner and you wanted to make sure that GPT responds with simpler instructions and also think about how you would engineer a prompt if you wanted GPT to incorporate all three of these assumptions go ahead and pause this scrim go to chat gpt's public interface face and play around with prompting based on these assumptions and

11:33 when you return I will show you my inputs and outputs welcome back hopefully you found that exercise to be helpful let's have a look at how I engineered my prompts first I'm making sure to provide context be more specific and use technical terms by specifying the technology I want to use the specific method that I want to learn about and I'm asking GPT to provide examples of what I might use the reduce method for GPT responds with a definition of what reduce is followed by a stepbystep example of how you can use it great it also very helpfully provides the example in a single code block so that I could copy and paste this into a scrim if I wanted it also goes on to provide a more advanced use case of reduce which is when it takes in an array of objects and transforms that array of objects into something else in my next prompt I again am specific about what language that I want to discuss the reduce method in but this time I'm asking for its use cases specifically so again it provides a definition of reduce and then provides five instances in

12:45 which it might be helpful to use reduce so calculating the sum of an array of elements finding the product of an array of elements counting the occurrences of elements in an array flattening a nested array and transforming an array of objects into an object with a specific structure which happens to be the example that it showed us last time and in my final example I'm again asking for javascript's produce method and I'm asking gbt to explain it to me as if I'm a beginning developer just learning how to code I'm also asking for a very specific example I want to know how I can use reduce to calculate the total price of several items in a shopping cart you'll notice that the result is that GB output is a much longer and more detailed explanation of reduce using slightly less technical language it reminds us what arrays are and carefully explains how the reduce method works by going through each element in the array one by one and applying a function that you define it then provides a step-by-step shopping cart example just like we asked for pretty cool this has been just a few examples of how we can use specificity technical language and

13:57 context to tweak gpt's output to get as close as possible to the information that we desire we've seen how to use these strategies to get information about code and code samples now join me in the next scrim to discuss how we can use these principles to use GPT to produce usable code I'll see you there let's talk about using specific