Prompt Engineering for Web Devs - ChatGPT and Bard Tutorial

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 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 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 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 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 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 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 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 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 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 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 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 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 Technical and contextual prompts to get GPT to generate code as an example let's start with a very broad non-specific non-technical prompt with no context and that prompt is how do I create a form GPT trying to be as helpful as possible responds that well there's lots of ways to make a form you can use a form in HTML for a web page you can use

Google forms or you can even create a form in Microsoft Word then also continues to try to be helpful by providing examples of how you might get started creating a form using all three of these Avenues so here is a challenge for you think about how you would improve this prompt so that it is specific Technical and provides context and here is your context you want to create a form that displays the reverse of whatever the user inputs into the form go ahead and pause go to gpt's public interface and play around with how you

would engineer a prompt to produce this code and when you return I'll show you the prompt that I crafted welcome back were you able to create a form here's how I did it I started by saying please create a form in JavaScript with one input that accepts a string and on submit prints that word to the web page in Reverse so I'm being specific about what I want the form to do I'm specifying that I want the form to be in JavaScript and that I intend to use it on a web page GPT responds with

the HTML and JavaScript that I need to complete this form let's quickly copy and paste this code in and see if it works so I have my HTML and my JavaScript and let's run this and because I put my JavaScript into a file called index.js I'm going to have to make sure to go ahead and change that in the HTML it generated this is another way that we could improve the specificity of the prompt by the way is we can say please assume that we have a Javascript file called index.js and that way GPT will

change its code samples accordingly but let's just go ahead and change it manually this time and see if this works I'm going to type this is backwards and we'll submit and there we go whatever we enter into the field is printed to the page backwards exactly what we wanted let's look at another quick example this is a less broad prompt with a little little bit of context I'm saying please show me an example react component and GPT responds making the assumption that I'm starting from ground zero so it's saying first make sure that you have

node installed on your system and use create react app navigate to the project directory then open the source folder and put this into appjs and it gives us an example of a little greeting component it then tells us to run our create react app that we need to PM start so it's trying to be as helpful as possible but this may end up being way more information than we're looking for and that is another thing to keep in mind when engineering as specific prompt and providing the proper context so take a moment to think about

how you might improve upon this prompt I want you to try to engineer a prompt based on all three of the following assumptions you want GPT to assume that you already have a react project set up let's assume that you want to see an example of use effect in this example react component and let's also assume that you want an atypical example and not the same examples that you see everywhere like a counter component that simply increments a number by one every time you click a button or a react component that simply says hello world

so go ahead and pause the scrim now go to gpt's public interface and engineer a prompt that addresses all three of these assumptions I'll see you when you get back welcome back hopefully you were able to engineer a prompt that got you some helpful results let's have a look at my prompt so my prompt is please create an example react component that takes at least one prop and demonstrates how to use hooks like use State and use effect now I've done something that can be incredibly helpful when prompt engineering I'm specifying what I don't want

GPT to respond with so I'm saying the example should not be a typical hello world example like a counter or a greeting and I'm saying assume that I have already set up a react project so this time given the specificity of our prompt GPT skips all of the setup instructions that it included before and it gives us this theme switcher example which arguably could be the third most common example that is used when teaching react but that's okay it didn't give us what we specifically said we didn't want so this is an area where we

could play around and try to improve this prompt a little more pi get an example that's perhaps a little more interesting but other than that it's given us what we wanted we have a react example that uses use State and use effect we also get a pretty good explanation of how the example is working and some instruction on how to use it in our existing react project when it comes to prompt engineering specifically for coding or learning to code specificity technical language and providing context will take you a long way but there's still a bunch

more to learn and a ton of new examples to try and all sorts of ways that you can tweak your prompts to get as close to exactly what you want so I look forward to seeing you in the next scrim where we'll continue to talk about more prompt engineering tips I will see you there now for a quiz and a bit of practice I really encourage you as you're going through this course to spend as much time as you can trying out different prompts in chat GPT if you need a link to open ai's chat

GPT interface I've included that right here so keep in mind when you're actively practicing rather than passively watching the scrims you're much more likely to retain the information I've sprinkled challenges and opportunities for practice like this throughout the course so do take your time to get your hands dirty like I said it's going to really help you remember everything that you've learned so we have a short quiz question for you to answer and a few less than ideal prompts that I'd like you to improve based on what you've learned so far go ahead and pause

the scrim now and work on the quiz and practice welcome back hopefully hopefully that went well let's go over some possible answers our quiz question is what are the three basic components of an effective prompt and those are to be specific use technical terms and provide context if we look at these suboptimal prompts they are missing one or all of these things so let's look at the first one I need to Loop through an array help how could we rewrite this so that it's more specific uses technical terms and provides context your answer is will

most likely be a little different than mine but let me show you the prompts that I came up with for this one I added some context and Technical Language by saying in JavaScript how can I utilize the for each method to iterate over an array of objects and extract a specific property from each so I'm being specific about the language I want to work in and providing some context about what I want to do for this second question I want my website to look good on phones 2o my prompt was what are the recommended CSS

media query breakpoints for for mobile tablet and desktop views to ensure my website is responsive across various devices so again more specificity more context and more specificity around technical terms our third prompt is I'm having issues bringing data into my react app my prompt for this is how can I use the use effect hook in react to fetch data from a rest API endpoint and store the results in a local state using the used State hook this is maybe a little more specific than I needed to be so if you find your s aren't quite

so specific that's totally fine as long as the basic elements are there you're more likely to get more precise results and that's it for the quiz in practice to take this a little further you can try entering both the vague prompt and the prompt you came up with into chat GPT and note the differences between the two the vague prompt might accidentally be correct or somewhat correct or help you get to your desired answer but generally a more precise prompt is going to save you time by yielding more precise results this is one of my

very favorite tips because there is so much that you can do with it so let's talk about all the ways you can fine-tune gpt's responses by controlling the length and format especially when you're trying to learn something new with GPT these are some really effective ways to get as much or as little information as you want in some formats you may not have thought about before let's look at some examples I could request information like this I could say provide a brief two step explanation of creating a custom JavaScript event and GPT responds with an

explanation that has exactly two steps I can say something like please compare CSS grid and flexbox highlighting their main differences and use cases in a tabular format so I'm requesting the response as a table and gbt responds with this great little table that compares grid to flex box in the way that I've specified it's pretty awesome I can also get extremely specific so I want to know why inner HTML should be avoided why we shouldn't use it so I'll ask GPT to summarize in exactly three bullet points why in HTML shouldn't be used I also

want each bullet point to be followed by a short explanation and a code example of what I should use instead here's gpt's response I get exactly three bullet points we shouldn't use inner HTML due to security risks performance ISS issues and accessibility issues it can cause problems for screen readers and other assistive Technologies GPT recommends some other things that we can use and shows us an example as we've requested this is a really good example of how granular we can be when controlling the length and formatting of a response from GPT a question that we

get asked a lot here at scrimba is how much Java Script should I know and be comfortable with before I start learning react let's see what GPT thinks my prompt is please list the five most important JavaScript Concepts a beginning developer should be comfortable with before learning react I want the response to be brief though so I'm going to be really specific about the kind of response that I want so I'll go on to say please provide a one sentence explanation of each concept and one sentence about why it is important for learning react let's

see how it worked out this is fairly close to what we requested we have exactly five JavaScript Concepts variables and data types functions and scope arrays and objects troll flow and conditionals and asynchronous programming and promises and then we get a one- sentence explanation of what that JavaScript concept is and why it is important to learn for react so for example understanding how to work with asynchronous code using callbacks and Promises is crucial for handling events making API calls and handling State updates in react this is an exactly what we asked for but it's pretty

close and if we wanted to we could go back and refine The Prompt a little bit if that's what we wanted to do I can also ask GPT to create flowcharts so here I've asked please create a flowchart describing how to submit a poll request using GitHub and it creates a text-based flowchart outlining all of the steps from forking the repository all the way down to creating a new pull request on GitHub and choosing which branches I want to merge if you ask me this is a really cool way to begin to understand a concept

with a ton of steps I can also ask GPT to create pseudo code please create pseudo code in the form of code comments describing how I can write a react component that displays the time in a user's local time zone I'm requesting that pseudo code in the form of code comments because I've discovered that when I ask for pseudo code it tends to give me code that sort of looks like Python and what I want are step-by-step instructions for how I can code this function myself and code comments are what's most effective for me so

let's see what GPT did in the form of code comments it's broken down into small steps with even more specific instructions so this would be great if I really want to make sure that I'm writing my own code but I desire some stepbystep help to help me think through how I might structure my code here are even more examples I can control the length by requesting a definition in one paragraph or one sentence I can even specify that I want a response in so many words or less this is also one of my favorites I

can request a tldr of a topic which if you're not familiar stands for too long didn't read it's basically another way of saying give me a short explanation so I can say tldr explain the difference between let and const in JavaScript I can request a specific task in a specific technology but request the solution without using any external tools or libraries I can ask for explanations in the form of analogies and metaphors I can also copy and paste GPT some code and ask for an explanation via code comments on every line explaining what the code

does and finally here's another one that I use a lot and we will see more of later I can prompt GPT with in your response please only include the code that needs to be modified and this is really helpful if you're having GPT generate some more complex code for you it does have a tendency to print out all of the code every single time and this way you can ask for just what needs to be modified we will talk much more about this in later scrims now that we've looked at quite a few examples please

take a second to think about how prompting to control the length and format of the response can be helpful to you go ahead really quick think of a topic that you're unfamiliar with or that you've always meant to look more into and ask GPT for an overview in whichever format you feel would be helpful and definitely use the examples on this list or the other examples that we've looked at for inspiration for example I was recently contributing to an open- source project that uses Redux which I'm not very familiar with pause now give it a

try and when you come back I will show you yet another example of how I prompted to get the response in the exact format I was looking for welcome back hopefully that was a really good exploration so as I said I wanted to know more about Redux so my prompt was please explain how to use Redux step by step using a simple code example such as tracking whether or not a user is logged in so I'm asking for a response in a step-by-step format using a specific code example and then I'm getting even more granular

by requesting one sentence that explains each step then once GPT has provided me with a step-by-step explanation of reduct with the code sample that I've specified I wanted to make up an acronym for me that's going to help me remember all of the steps I need to remember to use Redux if you're at all familiar with Redux or have ever tried to learn it there are a lot a lot a lot of steps let's look at the response I was able to get GPT says here's a step-by-step guide on how to use Redux with a

simple code example to track user login status thank you that's exactly what I asked for we'll use the acronym carts as a reminder of of the steps it's a pretty good acronym it's easy to remember it's an actual word so then using This Acronym it breaks down the steps we're going to create a redex door do some action craters and then here is the one sentence explanation of each step that I requested it goes on and shows me the rest of the steps and then at the end it says remember the acronym cards to help

you remember the steps for using redex in a react application and it goes on to summarize the acronym that I requested prompting GPT in a way that controls the format and length of its responses is a super powerful way to use GPT both as a learning tool and as a timesaver when coding up features this is really worth getting comfortable with so I really encourage you to just take some time right now before moving on to the next scrim to choose a few coding Concepts you've always meant to look into a bit more and explore

them with GPT using a variety of formats definitely refer back to the slides and to the list of examp this is going to get you familiar with all the many ways you can prompt GPT to share information with you time for a bit of a challenge you're going to design some prompts to build a small application that generates haikus if you're unfamiliar with haikus it is a poem with a 575 syllable structure so if we take a look at this example I asked chat GPT to generate a houp for me that was about prompt engineering

and this is what it came up with crafting questions sharp guiding thought with Precision answers clearer shine if you were to count the syllables in this poem you would find that the first line has five syllables the second line has seven syllables and the third line again has five syllables your task will be to prompt chat GPT to write you code for a very simple application where you'll push a button here in the mini browser and it will generate and display a randomly generated Hau so I've given you three vague suboptimal prompts that I want

you to improve you'll improve these prompts using all of the techniques that you've learned so far and then use those prompts with chat GPT to generate some code you can then copy and paste the code you've generated right here in the scrim into this JS file to make sure that your prompts have yielded code that does what you expect let's quickly read over the prompts that you'll be improving the first is make some lists of phrases for a haiku I want them to be about artificial intelligence the second is combine the phrases into Haiku and

the third suboptimal prompt is make the hius show up when I press a button I've asked for hius about artificial intelligence here but feel free to generate Haus about whatever subject you want rainbows unicorns math it's up to you also these prompts don't give you a ton of hints as far as how to structure your code so if you need some help on that you can go ahead and take a look at this hints MD file for some guidance before you get started I have one final important disclaimer you may have noticed that the title

of this scrim and this file is Huish gener and that is because for reasons unknown chat GPT is not great at counting syllables and will sometimes produce phrases that are a syllable or two off for the purposes of this challenge we're not going to worry about that but if you want to ensure 100% accurate results you can manually count the number of syllables in the list of phrases that you generate or ask chat gbt to break down each line and count the syllables for you have fun with this go ahead and pause the scrim now

and get started on the challenge welcome back I hope you had a fun time generating hauz let me show you the prompts that I came up with the first prompt that I wanted you to improve is make some lists of phrases for a h cou i want them to be about artificial intelligence here is my improved prompt generate three JavaScript arrays for a hou generator where each array represents a line of the ha cou the first and third arrays should contain phrases with five syllables and the second array should contain phrases with seven syllables all

the phrases should relate to artificial intelligence here are the lines for my Huish generator that chat BT came up with we have an array of phrases for each line of the poem The phrases for line one contain more or less five syllables the phrases for line two contain more or less seven syllables and the phrases for the third line of the poem contain more or less five syllables the second prompt that we needed to improve was combine the phrases into a ha coup this is my improved prompt for that write a JavaScript function to randomly

select one string from the three arrays of strings and return a combined string where each Haiku is on a separate line this prompt yielded the following function so we have this generate ha cou function that takes in three arrays containing phrases for possible ha cus there is a get random line function that takes in an array and chooses a random item from that array in this case a random line for a poem and it then calls the get random line function three times one for each line of the poem it saves each line into its

own variable and finally returns a string containing the three randomly chosen lines concatenated with a line break in between each the third and final prompt that I asked you to improve was make the haikus show up when I press a button my improved prompt for this was create a button in JavaScript that when clicked triggers the generate Hau function and displays the Haiku to the web page from this prompt I was able to get an eventless listen ER that is attached to an element with the ID of generate button and when clicked it calls the

generate hi cou function and sets the text content of an element with the ID of hi cou output to the results of the generate hi cou function it also generated a couple of lines of HTML which I will copy and paste into my index we have a button with the ID of generate button and a pre-tagged when I click it I get random Haus fantastic in this Grim you've built a haiku generator application in just three prompts if you've spent any amount of time with chat gbt you may be thinking well this could have been

done with just one prompt and well that's most likely true when you're using chat gbt it's good practice to always be thinking about how to split projects into smaller tasks more on that in the next scrim excellent work on this challenge or in the form of a hi cou challenge met with Grace generator speaks in verse student claims their place see you in the next one with the right prompts AI is surprisingly sometimes frighteningly capable and because it's so capable our first impulse might be to stretch it out as far as it can go how

much can I make it do how few prompts can I get away with can I get a whole app with a single prompt the answer is yes you probably can but the results might be a little me think of it this way say you're building a brick wall like this adorable little penguin if you were to build it by hand you'd probably go Brick by Brick right making sure that each element was in its place before moving on to the next one you wouldn't throw all the bricks and all the mortar into a pile and

smear it around until it sort of resembled a wall but one of the pitfalls of AI is that it's tempting to do this with code it's really tempting to hand AI a list of instructions and try to mold whatever it spits out into a workable application this is why I advocate instead that when you build with AI you break everything down into small smaller chunks and that means the tasks that you're trying to accomplish with AI as well as the instructions that you prompt the AI with and the features that you choose to build I

also can't stress enough the importance of taking time to read and understand the code that AI generates along the way so why should you do this breaking it down into smaller steps is going to be better for manageability for Learning and understanding the code and for isolating bugs and other issues it is possible to get AI to spit out a whole react app in one go but the more complex the thing you ask for the more likely there are to be errors and inconsistencies and the less likely you are to understand the code or feel

any sense of ownership over it so it's really easy to get trapped in a cycle where you don't understand the code you're working with you ask chat gbt to debug it it solves one issue but introduces another and on and on until the brick wall crumbles and you storm away frustrated am I speaking from experience yes let me show you an example so what I'm after is to build this budget tracker basically in the form you can put a budget title your budget how much of that budget you've actually spent and then you can add

it to this nice little visualizer that represents your budget versus how much you've spent as a progress bar here's what happens when I try to do this in one big prompt so we're going to read all of this really quick my huge prompt is help me build a small react application to help users visualize their budget the application should consist of a form with three inputs a budget title a total budget and current expenditures when the user submits the form a progress bar should be added to the page the progress bar should be green if

less than 50% of the budget has been reached orange if more than 75% of the budget has been reached and red if 100% or more of the budget has been reached the app should keep track of the total budget and total expenditures and display a large progress bar with this info at the top of the page users should also be able to delete and edit progress bars create Json for four example budget progress bars and assume I already have react project set up this is a very tall order there is a lot of stuff and

the AI is smart but telling it to do all of this at once is going to make it more apt to forget things so I ended up with something like this as you can see this somewhat resembles what I asked for we have some budgets we have the total budget and the amount spent we have a little form and it does work but the following things are wrong there are no progress bars and that is because AI forgot to set a height for the progress bar so they're there but they're invisible it also completely ignored

my request for ADD and delete functionality which is honestly understandable because that adds a great deal of complexity to the application and it ignored my request for a main larger progress bar that represents the total overall budget not spectacular results so take a second and think about how you would break this down I don't think that there's necessarily a right answer here I think it's going to depend a lot on how your brain works and how you tend to build code in the first place but some suggestions are you could break the task down by

structure and style as then you could do all the HTML and then the CSS and then worry about functionality this is a react app so you could build each component one by one you could concentrate on certain features or any other number of possibilities but let me show you how I did it I'm going to concentrate first on building the budget form component my prompt is helped me build a small react application that helps users visualize their budget make sure it meets the following requirements and then I'm breaking down tasks into a list making a

list makes it a little bit less likely that AI is going to leave things out so this is another component of breaking things down into smaller tasks within a prompt so I say number one and include a form component with three inputs and number two I'm going to describe the functionality when the form is submitted add the new budget to an array of budgets here's what the output look like and this is what we end up with so it's pretty simple so far but I can add a budget let's say rent and it simply adds

the budget with the total amount of the budget and how much we spent now I want to make the form look nice so I'll say add styles to the form with three bullet points it should be responsive I want the form fields to be stacked and the fields are styled similar to bootstrap Fields but don't use any outside libraries and that yields some CSS which I will go ahead and drop into the CSS file and that is a pretty nice looking form with just a couple of prompts I'll now move on to displaying my budgets

in a progress bar so using this same format I'm going to say each progress bar component should have the following and then I'll make a list I want to display the budget title the budget versus how much we've spent below the progress bar and then the color scheme that I wanted for the progress bar so if you're close to reaching your budget it'll be red if you haven't spent much of your budget it'll be green then I specify that my progress bar should be thick with rounded Corners this yields some progress bar CSS which I

will put in my CSS file it also gave me some progress bar code which I already have in this file called progress bar and finally inside of my app it instructed me to rewrite this map function to use the progress bar rather than simply mapping through the array so we'll go ahead and replace all of this code and what's happening now is we are collecting the budget data from the budget Forum we're adding it to this hook that is keeping track of all of the budget objects inside of an array we're then mapping through the

array of budgets and passing that information to a progress bar that has all of the progress bar Styles and information about how we want to display it let's run and add a budget and there we go we have a working budget tracker that displays a progress bar I can then continue to iterate on this project in small steps for example I can ask it to create some dummy data so that we can see what our application looks like with a bunch of budgets add that here here are our budgets with a bunch of dummy data

and then finally I can take care of a couple of bugs as you can see the progress bar gets too long if you go over budget so for our entertainment budget we've overs spent by $50 making the progress bar too wide I also want to to change these harsh colors so I'll ask it for one final task before we wrap up this scrim the width of the progress bar should never exceed 100% if the spent amount exceeds the budget amount make the budget SLS spent progress bar text red display the spent budget text as a

dollar amount and use dark pastel colors for the progress bars so let's copy and paste the refactored code and run and this is pretty close to what I had in mind this gr has been about building iteratively and breaking up complex tasks into smaller steps as the the task you complete with AI grow more complex remember to ask yourself how can I keep breaking it down let's pause for a second to take a quick quiz to help things stick a little better read through the quiz questions and answer them to the best of your ability

go ahead and pause the scrim now and start working on it welcome back so why can it be helpful to break down a project into smaller steps even if the language model is smart enough to handle it my answer answer is that overall it makes the project more manageable it helps you to more thoroughly understand the code and more effectively discover bugs and other issues it helps you avoid a situation where you have a lot of code that you are unfamiliar with and not sure how it works because Chachi BT has generated all of it

for you the second question is how would you break down the following prompt into smaller tasks and as I said you didn't have to worry about actually writing the prompts I just wanted you to think about how the app could be broken down in a highlevel way to be built Inc mentally with the help of chat GPT there's going to be a lot of variations and answers here because everyone's a little different but here's how I would break it up I would start with the pet list and layout part of the application whether or not

I wanted the list to display as a gallery or as a straight vertical list and all of the components that I might need for that then I would worry about the responsiveness of the pet list and layout I then move on to accessibility finally I would look at filtering the list of pets building a pet detail page and finally I would worry about styling this isn't all-inclusive of course and some of this could be broken down into substeps but hopefully that gives you a general idea so that's it for this quiz thanks for taking the

time and great work when you're using a language model like chat GPT to help you build an application it might be tempting to assume that when you ask chat GPT to produce something for you and it fails that the language model is simply not capable of that task and sure there are plenty of things that chat gbt is not great at like the time I tried to get it to write fiction GH not good but I'm sure with the right prompts you could get close to chat GPT doing even that because making a few tweaks

to your prompts can make a huge difference this is a strategy called iterative prompting iterative prompting is the process of prompting evaluating the ai's response and either revising your prompts to get as close to your desired outcome as possible or clarifying what you want with a follow-up prompt let's look at a couple of simple examples I have an HTML table that has some information about board games let's say that it represents the inventory for a store called Roll With It games I start with the prompt please create a product web page based on this HTML

table and the result looks something like this it isn't bad it's simple bold colors I like the addition of a buy now button I think that makes a lot of sense but what I really had in mind was more of a gallery layout where each board game is a card in a row of cards also if you were to look at the code example you would notice that this is all hardcoded and the HTML and CSS is Allin one file which isn't exactly what I want so I'm going to iterate on my prompt tweaking it

to be a little more specific I kept my original prompt please create a web page based on this HTML table now I'm going to add use a responsive Gallery format where each product is a tile then I'll say convert the data in the HTML table to Json and use JavaScript to Loop through and display each game so that will take take care of my problem with it being hardcoded here's where things start to get a little messy it starts by converting my HTML table to Json but then if you look at the code it gives

me everything is still in the same file which is fine I didn't specify that I wanted it to be split but it also added a second games array of objects I have this whole Json file that isn't being used so there are sort of two ways that you can iterate on a prompt and this is the first one wherein I have clicked this edit button and simply changed the prompt and had the AI completely regenerate a response if you're unfamiliar with the interface you can then use these right and left arrows to Rifle through all

of the prompts and responses which can be pretty handy in some cases and by the way this says three out of three because on my second attempt chat gbt errored out and I had to regenerate because of that revising a prompt like this can be really helpful if what you generated is not close to what you want however in this case let's take a look at the output so in some ways this is closer to what I wanted I have each game as a tile I have some issues with responsiveness that I would need to

work on as you can see because there are four cards one is kind of in the middle of the second row which may or may not be what I want but I've also lost the buy now buttons and the color scheme that I was kind of fond of so maybe I didn't really want to start all over what I can do is I can go back to my original prompt so I'll click back through to my original prompt and I can continue the conversation with this prompt and instead of revising it I'm going to add

a follow-up prompt and my follow-up prompt will break down all of the changes that I want to make so as a list I would like the AI to break the code into separate CSS JS and HTML files I want to extract the data from the HTML table into a Json file and I want to create a function to Loop through the Json and display each game as a card in a responsive Gallery format and so through iterating with a follow-up prompt here's what I end up with I have the best of both worlds which is

the gallery format that I was after plus the buying Now button and the green color scheme so to wrap things up remember that iterative prompting is all about trial and error plus a bit of creativity and persistence if you follow this process prompting evaluating the output and either revising or writing a follow-up prompt it's going to make it that much easier to achieve smoother more predictable results let's learn a little prompt engineering Inception using AI to optimize and improve your prompts and then feed those prompts back into the AI for the most effective results the

strategy involves two stages the first is asking chat GPT to interview you about your needs so it can then craft and optimize prompt for you based on those needs stage two is using the prompt to prompt chadt to maximize the quality of your desired output let's look at an example my first prompt will be I'm going to give you a prompt and I want you to help me optimize it ask me clarifying questions then suggest a more effective prompt that will yield a more accurate and detailed output chat GPT says absolutely I'd be happy to

help you optimize your prompt please share it with me I'll then give it the prompt please give me some example code for react accordion menu now that I've asked chat gbt to interview me it will come back with a list of clarifying questions that's going to help me be more specific about what I'm looking for and this is cool because not only will it result in a more refined prompt but it's also kind of like a built-in brainstorming session so Chad jpt says to optimize it I'd like to ask a few clarifying questions would you

prefer that the accordion menu be made of class components or functional components using hooks are there any specific features you'd like the accordion menu to have like multiple sections open at the same time animations or accessibility features will there be any specific data structure for the content of the accordion or will it be text only and finally would you like to use a specific styling strategy followed by some suggestions for styling strategies that I could use I'm going to go down the list and answer each question I want functional components for my features I'll say

I want a smooth open and close animation I want only one one section to be open at a time and I'd like to use the open Sans Google font I want my accordion to accept Json data and I also going to ask the AI to generate some dummy data for me and finally I'll tell it I just want to use a regular external stylesheet I've given chat TBT a lot of detail about what I want here this strategy has helped me provide a lot of clarification on what I actually want chat gbt responds could you

provide me with example code for react accordion menu that meets the following requirements followed by a summary of the requirements based on my answers from the previous prompt so I can now dump this back into chat GPT as a much more specific contextual refined prompt so that's what I'm going to do I'm now going to prompt with this optimized prompt chat gbt responds with some example code for an accordion which I have copied and pasted into the scrim so let's take a look we have the dummy data we asked for we are using a functional

component with hooks and a regular stylesheet just like we asked for and as you can see this is a pretty good looking accordion menu for a couple of minutes worth of work let's do a little review of what we've just done I'm going to come over to my accordion. jsx file these are the steps I just went through to optimize my prompt first I prompted chat gbt to ask clarifying questions about my prompt I then answered chat gpt's clarifying questions and when chat GPT returned an optimized prompt I then fed it back to chat GPT

and the result is hopefully a more finely tuned code snippet that includes all of the features that you were after definitely try this strategy out for yourself I find that it works really well when I'm trying to do something relatively complex or when I'm murky or undecided on the details of what I need a function or react component to do time for a quick review and some more practice we've just talked about a strategy for optimizing a prompt and we did this in three steps your first prompt should be an overview of what you're trying

to accomplish and a request for chat gbt to ask you clarifying questions your second prompt will be answers to chat gbt's clarifying questions and after you answer the questions chat gbt will output and optimize prompt which will then feed back into chat GPT let's practice this by instructing chat GPT to help us build a simple modal window if you're unfamiliar a modal is generally a secondary window that opens up on hover or buttonclick on a website so think about a popup payment form or a box that pops up where you might enter a username and

password but I'd like you to do is starting with this prompt show me a code snippet for modal in react go to chat GPT I've included the link right here and follow the steps to create a more optimized prompt then just for fun I set up this scrim so that you can enter your code into this model. jsx file just to test it out and see if it works modal windows can have a lot of options and those will be up to you but my advice would be to keep it as simple as possible for

example I'm going to prompt for a modal that displays a box of text on button click and that's really all it's going to do go ahead and pause the scrim now and start working on this challenge all right we are back let me show you the prompt that I came up with my prompt was I'm going to give you a prompt and I want you to ask me clarifying questions to help optimize The Prompt suggest a more effective prompt based on my answer here's the prompt show me a code snippet for modal in react and

here are the clarifying questions that chat gbt asked me yours will probably be a bit different but the general idea should be the same that GPT wants me to clarify if I want a functional component or a class component in react do I want the model to be styled with play CSS scss or a specific Library like styled components do I want the model to open and close based on a button click are there any specific content types that I want inside the model like text images or a form do I want want any transition

effects for when the modal appears or disappears and am I using any State Management tools like Redux or do I want to use local component State here are my quick answers to these clarifying questions I want a functional component I want to use an external CSS stylesheet yes I want the modal to open and close on buttonclick just displaying text is fine for now I want my modal to use a simple fade in and Fade Out effect and finally I just want to use local component State based on the answers to these questions here is

the optimized prompt that chat gbt came up with that prompt is provide a react functional component code snippet for a modal that utilizes an external CSS stylesheet the modal should display text content and open close based on a button click it should have a simple fade in-out transition effect and manage its visibility using local component State just for fun let's look at the modal code that chat GPT output based on my optimized prompt so I'll go to model. jsx and copy and paste that code in so we have a clickable button that says toggle modal

and then we have some jsx for the modal code that's based on the local component state is open which our toggle modal function toggles from True to false notice that we do have hardcoded modal info here so that's something that we'd want to iteratively improve upon but this is certainly a good start chat GPT also provided some CSS which I will copy and paste into the CSS file so we have some styles to make sure it has a semi-transparent background when it's open and some key frames for some simple transition effects let's go ahead and

open the mini browser and run this to test it out got my toggle modal button and when I press it there we go a very simple modal in this challenge we've learned how to get chat GPT working for us to create more effective prompts well done let's talk about a really interesting way to plan learn and create with AI it's called role-based prompting role based prompting is a strategy in which you ask a language model like chat jpt to put on a costume so to speak you instruct the AI to take on a specific Persona

while interacting with you for example you might start a prompt with act as a or you are a and as we'll see you can have it act as a variety of things that will help you as a software engineer like product manager software architect or even career coach which we'll talk about in a later scrim let me show you how you can use role-based prompting to plan out basically an entire application I'm going to start by asking the AI to act as an expert in system design and architecture and advise me on how to design

the front end of a react application that helps users keep track of how often to water and fertilize their house plants this is a big comprehensive list it's kind of Broad and not super helpful right now but it will be in just a moment so my next prompt in the same chat window is going to be you're now a product owner tasked with Gathering requirements for this project what features andun functionality should this application have ask me clarifying questions if necessary this is a really good strategy when you need AI to help you brainstorm or

when you want to try to get a different perspective than you might be able to come up with on your own I'm instructing the AI to actually interview me about what I want out of my project the AI immediately assumes the Persona of a product owner and says it's my responsibility to ensure that the product we're creating truly meets the needs of our end users great it then makes a list of of basic functionalities and ask me some questions so do we need user accounts what kind of plant information should the app include water and

fertilizer reminders should there be a catalog of plants to choose from and what about user preferences so this is all good to think about but very overwhelming at the moment so I'm going to prompt again kind of drill down I'm going to say let's concentrate on plant information first that's the second one on the list and the question was what type of information should be tracked for for each plant for instance do we need to track only watering and fertilizing schedules or should we include other details like sunlight needs optimal temperature plant species Etc so

as part of my prompt I will say let's include the nickname and image the watering and fertilizer frequency the last time that the plant was watered the last time it was fertilized and also an additional place for notes the AI then provides fleshed out requirements for the plant information functionality as well as some information about the overall plant display the date should be localized the information should be presented in an intuitive and userfriendly format that's great but this is all still a little bit broad to be helpful to me so I going to prompt again

to drill down even more I'm going to now ask the AI to assume a third role I'm going to say I now want you to act as a product manager please wrate user stories based on the above requirements if you're not familiar with what a user story is it's basically a way to explain how a software feature should work from the perspective of a user or a customer so notice that I did not ask for a specific number of user stories so the AI comes back with 13 user stories which is very thorough so you

see we have as a user I want the app to calculate and display the number of days since each of my plants was last watered or fertilized so that I can easily see when they need care next that's great another example is as a user I want to edit notes I've added for each plant so I can keep them current and useful this is great there are a lot of good ideas here but this is still a huge long list and as a software developer I'm still overwhelmed I don't really know where to start I'm

going to do another role based prompt you are the product manager of this application please advise me as a software engineer which stories are most necessary to create an MVP for prototyping and demo purposes so basically this prompt is asking the AI to pair down the list for me what are the most important things that I should concentrate on first so it picks six user stories assigning a nickname uploading an image of a plant setting the watering and fertilizing frequency and so on so if I'm looking to build a demo or a personal project to

put in my portfolio or something I now have a really well-defined place to start which is pretty cool now if I want some more advice on where to start how to structure what technologies to use I've had AI help me determine and plan so much of my application at this point that I can do one final role-based prompt we're going to bring it back to the software architect and say act as a software architect and give me advice on how to design the front end of a react application based on the following user stories I'm

then going to copy and paste the six user stories that the AI just determined for me and get some advice based on these user stories that I've worked with the UI to create the chat GPT then suggests a component hierarchy to start with as well as some advice about all sorts of things like State Management handling images calculating dates and some user interface and ux stuff so this will give me some really good ideas about how to get started and then here is one of my favorite things I can now do another rooll base prompt

that says you and I are a software engineering team discuss the requirements for the first three user stories and turn them into tickets to be entered in jira and now ai say sure let's break down these user stories into individual tasks that can be created as tickets in jira so I have my user story I have the tasks that go with it and the acceptance criteria so with role-based prompting I've gotten some ideas about how to structure my app I have determined the most important features I've determined what I need for an MVP and I've

generated tickets for jir now I can be Off to the Races building my app so this has been a scrim about how to leverage AI to plan out an application using ro-based prompt engineering now this method may not work for software engineering teams building software out in the real world it's often much much more complicated than that and there's a lot of back and forth and a lot of cooks in the kitchen when it comes to building soft soft ware but if you're looking to build a portfolio of personal projects for the purposes of getting

a job for example or if you're a oneperson startup company this can be a really effective way to use chat GPT as an idea engine and as a partner in brainstorming so I hope you found this useful happy role playing let's do a quick review of role-based prompting followed by a little exercise role-based prompting is when you use phrases like act as a or you ra to prompt chat gbt to assume a certain role while assuming the role of an expert you can prompt chat gbt to ask clarifying questions and you can also ask chat

gbt to assume a role to help you define Technologies determine key features and write user stories when you're planning a project so here's the scenario for the exercise you want to use chat GPT to help you build an MVP for a booking website that displays information on hotel resorts an MVP if you aren't familiar stands for minimum viable product and it's way to describe an app that has the most barebone features that you'll need in a working application so you can think about like a very simple prototype of Airbnb or Expedia with no bells and

whistles all you can do is view information about Resorts even an MVP of this type is going to be fairly complex once you think about all the pieces so we're not going to try to get chat GPT to build this site we're just going to get a little bit of practice using role-based prompting to plan an application so once again you're going use role-based prompting to get advice from chat GPT on how to create an MVP for a booking website that simply displays information on hotel resorts you'll want to start by writing a prompt that

will yield a broad overview of all the things you might need to think about for an MVP chances are chat gbt is going to point out a lot of things that you'll need to think about when planning this type of application so just pick one area of focus and prompt chat gbt to keep assuming a role and ask you clarify ifying questions to help you drill down into the area that you want to concentrate on planning and once you've drilled that down use chat gbt to create five user stories for that area of focus don't

forget to use role-based prompting here as well go ahead and pause the scrim now and start working on this challenge welcome back I hope you came up with some great user stories let me show you my prompts The Prompt I started with is I want to build a simple booking website for resort hotels act as a product manager and help me identify features I should include in an MVP as expected chat gbt came back with a lot of information going to copy and paste that in and as you can see there is a whole lot

to think about here user authentication search functionality Resort listings booking process the list goes on and on so the one that I'm going to choose to focus on is Resort listings so let me actually get rid of all of this other stuff so that we can better focus on Resort list listings here's a prompt I use to get chat GPT to help me narrow down what I want to do with Resort listings my prompt was let's focus on Resort listings acting as a product manager decide on the five most important features and write user stories

for them as requested chat gbt gives me five user stories that includes seeing a Details page high quality images the ability to read reviews and see ratings clear information on room availability types and their pricing and so on in this Grim we've narrowed down a plan to start working on a complex application and written some user stories in just a few prompts this can be a really helpful strategy for starting to plan an application and especially if you're a new developer just starting out and trying to maybe build portfolio projects it can also help you

realize the scope of a project that you have in mind and help you narrow it or expand it accordingly so great job on this challenge one of the most effective ways to engineer a good prompt for chat GPT is to show and not tell in other words prompting with examples of what you want chat GPT to do let me show you a couple of examples I'm in a prompt chat GPT to write a function to Total an array of numbers and return the value as a dollar amount rather than fiddling with this prompt and wondering

if it's clear enough and if GPT is going to be able to parse what I'm saying I'm going to include with my prompt an example input and an example output so my input is an array of numbers some with decimal points and my example output is 172.5 formatted as US currency GPT then responds with this function and even gives us a line of code with our example input so that we can test it so let's copy and paste that into the scrim and see how it works after I pasted it I'll run and as you

can see using the example input that we provided the output is 17250 which is the output we expected just for fun let's try some different numbers so five and five should be $10 great what if we just have one number in here that'll be $8 and if we have an empty array we get back $0 great let's look at one more example first I'm going to ask chat GPT to generate some dummy Json data for me I specify that I want it to be for music events and I'm going to give it an example of

all of the properties that I want my Json to contain so band name the event date and time ticket cost venue and genre I'll then request that it only generate dummy data for two bands because I don't want the Json data to be too long GPT responds with some Json data I'm going to go ahead and comment out this first example and copy and paste this Json data looks good we have a little error because this isn't a Json file but that's okay we'll fix that in a second I then copied and pasted that Json

data back into a prompt and my prompt is considering the following Json data so considering this example Json data please write a function that will take in this data and return a new object where the event date time is converted to a human readable format I then include an example that has an additional property and you'll notice that actually made a little typo here I write formatted data time when I meant formatted date time but as you'll see chat gbt was actually smart enough to correct this for me so this is my example output I

want the event date time to be converted to this nice human readable time wherein instead of a jumble of letters and numbers you can see that it says nicely may5 2023 at 8:00 p.m. GPT responds with this format event data function it puts my data into a variable for me and logs it out let's copy and paste this into the scrim and see how it did get rid of my example Json and let's run and you'll notice that it is taking in this array of objects that has five properties band name genre event date time

ticket cost and venue and it is returning an array of objects with six properties because despite my type of it has added a property called formatted date time and that is the power of prompt engineering with examples if there is a way that you can show chat GPT exactly what you would like your output to be I highly recommend you do so now stay tuned for a fun little challenge where we'll prompt with examples to build a Seltzer flavor generator I'll see you in the next one welcome back prompt Engineers here is a fun little

challenge that will give you some practice prompting by example I don't know about you but in my area of the world flavored seltzer water is extremely popular and there are hundreds of flavors ranging from pretty simple like black cherry or pomegranate to kind of out there like raspberry Rose hibiscus cloudberry and mango Cherry bliss all the way to downright bizaar this is a real seltzer water flavor it's called Yeti Mischief they also have one called unicorn kisses and one called Dragon Whispers I've had all three and of course I don't know what a real dragon

whisper tastes like but I guess I can believe that it tastes like a fruit bomb with a tropical punch it was good for this challenge you will prompt GPT to create a function that generates random salzer Water flavors some examples might be funky raspberry pineapple wacky strawberry whipped cream Zippy pineapple mango the format that you want to follow here is adjective followed by a flavor followed by another flavor and the flavor titles should be capitalized so make sure that the code that you generate with chat GPT capitalizes these flavors you'll want to give GPT example

inputs and outputs the function that you produce should take in an array of adjectives and an adjective is a describing word like funky or Zippy or blue and it should ALS o take an array of flavors so pineapple mango strawberry whipped cream all examples of flavors go ahead and ask GPT to generate these two arrays the array of adjectives and the array of flavors you decide if you want your flavors to be delicious weird bizarre icky inedible it's your choice have fun with it and then finally test the function that GPT outputs and if it

doesn't work or if GPT doesn't produce exactly what you've asked for keep iterating on your prompt until you get the result that you want grab a mermaid song flavored Seltzer and get started I'll see you in the next scrim with the solution hey there this is the solution to the flavor generator challenge your challenge was to prompt GPT to create a function to generate weird wacky or delicious random salzer Water flavors in the following format an adjective followed by a flavor followed by another flavor here's some examp examples funky raspberry pineapple wacky strawberry whipped cream

Etc you were also to ensure that chat GPT gave you the output you expected by giving example inputs and outputs let's take a look at the prompt that I wrote create a function that suggests new Selzer Water flavors I'm then going to be very specific about the arguments that the function should accept so the function should accept two arguments an array of flavors and an array of adjectives the function should pick two flavors at random and return a new flavor in this format adjective flavor flavor I give it an example input which is two arrays

one of flavors and one of adjectives and then in my output I make sure to follow the format I specified an adjective followed by two flavors let's take a look at the code that chat GPT generated based on this prompt copy and paste it into my index.js file as you can see it commented things nicely for me which is helpful it tends to do this randomly so it can be really helpful to specify whether or not you want comments when you're asking GPT to generate a function for you so inside the suggest new flavor function

we have a function to get a random index we then use the function to get a random number between zero and the length of the adjective array and save it to a constant and then we use that random number to choose an adjective from the adjectives array we're then doing something something very similar to select the two flavors we're using the get random index function to get two random numbers that we can then use to choose something out of the flavors array now it seems confusing at first why it decided to save one to a

const and one to a let but that is because on the next line of code we're looking at both of the random numbers that were chosen and we're ensuring that they aren't the same so we don't end up with a double flavor like wacky apple apple or something because that wouldn't make sense it's really cool that chat GPT checked for this on its own but this is definitely a potential bug that you would want to consider so finally it selects two flavors from the flavors array and returns a string in my requested format adjective flavor

it also provides me with some example usage which is great so let's go ahead and call this function run and open the console and see what we end up with I want to make sure that I am locked fogging out the result of this function let's run again we get sour grapefruit orange Tangy Orange grapefruit cool Orange grapefruit so it looks like we're getting the result we expected which is great but now I want chat TBT to generate me some fun flavor ideas so next I prompted please generate 20 sweet or dessert-like foods for the

flavors array I'm again going to give it some examples like cake pineapple and whipped cream then I say generate 20 wacky and fun adjectives the adjective array for example tart fresh and Smokey keep in mind that this prompt is based on the fact that I have just in the last interaction as chat GPT to generate a function for me so I'm not referring to that function I'm counting on it to remember the code that we're talking about but there are many instances where you might want to refer to the function as part of your prompt

so as you can see it gives me a list but that's not what I want I want to be a lazy programmer and I want these as arrays I I want to turn them into a raise myself so I'm going to update my prompt and be a little more specific and deliberate so I'm going to explicitly say please generate two JavaScript arrays the first one I want 20 sweet or dessert like foods for the flavors array and then I give my examples and then number two 20 wacky and fun adjectives for the adjective array with

some examples like buttery luscious and artisanal this time it does exactly what I ask it to do it gives me 20 flavors and 20 weird adjectives let's copy and paste these into the scrim so I will replace these shorter arrays and let's run see what we come up with Whimsical banana whipped cream interesting zesty caramel Cherry vibrant Cherry mango all right so we've got the result that we wanted but I see a little issue here I want these flavors to be capitalized quickly I'm going to say please write a function that capitalizes each word in

the Seltzer flavor this is something iterative and incremental I'm again going to provide an example so here is an all lowercase sour orange apple and I want the first letter of each word to be uppercase so it gives me this capitalized word function so we'll copy and paste this code in right underneath our other function and it did provide me with an example usage but instead of using that I'm going to come down here and I'm going to wrap my suggest new FL Flor function into this capitalized word function and that's how we'll test to

see if it works I'll run Zippy cake cinnamon interesting flavor and with that my salzer water generator is complete showing versus telling and using examples when it comes to working with chat GPT is incredibly valuable it's a great skill to learn so thanks for practicing with me hope you enjoy it let's continue on to the next prompt engineering tip in earlier scrims I talked a little bit about the dangers of chat GPT hallucinating hallucinating is language models tendency to sometimes simply make things up things that can sound perfectly plausible and true but just aren't chat

jpt can rather randomly make up facts misquote people or give false information so what I'd like to do in this scrim is show you an example of a time that chat GPT hallucinated while I was trying to work with it as well as talk about why GPT hallucinates and what you can do if it hallucinates or how to try to prevent it from happening so one day I was working with chat GPT to create an interactive timeline which is basically a web graphic that you can click on it will show certain years on a timeline

and you can click on that year for more information when I asked chat GPT to help me with this it immediately gave me an accordion menu which was not exactly what I wanted so here was my follow-up prompt what suggestion do you have for a more Dynamic user interface I was hoping for some something a little more graphically interesting than a simple accordion menu notice that my prompt is not very specific it's pretty open-ended and it's almost like I'm asking the language model to tell me what it thinks like I'm asking it for its opinion

rather than requesting it perform a concrete task and I think that might be one of the reasons that it began to hallucinate so its response was for a more Dynamic and Visually appealing user interface I suggest using a horizontal timeline layout with a sliding effect so what it's suggesting is something that is a photo Carousel where you can cycle through a collection of photos or other information by clicking on right and left arrows so it suggests this open-source Library called Chronos slider notice it even gives me the GitHub URL and it claims that this library

is lightweight and very easy to integrate it then gives me instructions and Sample code but guess what when I go to this GitHub link I get a 404 it doesn't exist when chat TPT does make mistakes it can be pretty good at correcting itself so I'm going to ask it to confirm its own information my next prompt was I get a 404 error when I try to visit the Kronos slider GitHub repository can you check the URL and then chat gbt is like oh apologies for the confusion I made an error in my response it

seems that the Chronos slider Library does not exist and then it suggests another Library which does in fact exist and not only does it exist but it turns out to be a little closer to what I was actually looking for so that's what happened Chachi BT completely fabricated a library and instructions for how to use it let's talk about why this happens why do language models hallucinate can be for a few reasons it can be limited or incorrect training data a misinterpretation of your prompt or and probably most likely for the example that I went

through it has to do with the way GPT works I've heard GPT described as an incredibly sophisticated autocorrect basically the way that it comes up with responses is that it tries to determine the likelihood of the next word given a sequence of words so it's trying to optimize and guess what the next word is going to be and that sometimes causes the model to prioritize coherence over correctness in other words it will occasionally pick something that sounds good over something that's actually true at this point I have spent many hundreds of hours with chat gbt

and it's only hallucinated a few times to my knowledge so this isn't an error that happens constantly but it is something that is helpful to be aware of here are some things you can do when chat TPT hallucinates as I showed you you can prompt the model to double check its response and or you can confirm the response for yourself sometimes it can be good to do both breaking questions or tasks into smaller chunks can be really helpful and it's been shown that the smaller that you break down the tasks the more accurate the response

whether that means into smaller prompts or breaking stuff down into lists of things as well as encouraging the model to show its own work or Justify the choice choices that it's making in the context of code as we'll see later sometimes that can mean add code comments explaining what you've done and why you've chosen to do it that way and then finally you can rephrase the question to ask it in a different way be more specific or provide more context so those are some tips to mitigate tat GPT hallucinating tat GPT is an amazing tool

that if you remain just a little bit critical of the information that it's giving you congrat ulations go ahead and give yourself a nice pat on the back because you've learned a number of strategies for more effective prompt Engineering in this section we covered how to refine prompts with specificity context and Technical language we learned how to gain more refined control over the length and formatting of the ai's responses we've covered breaking down tasks and prompting iteratively optimizing prompts rule-based prompting and prompting by example I've included in this scrim a markdown file with a lot

of the examples that we covered and you can go ahead and use this as a reference if you'd like to save it you can click on this little gear here and download the file as a zip you can then open it up in a text editor like VSS code next up in the next section of the course we'll go over ideas and strategies for using AI to accelerate your coding workflow I'll see you there now that we've gotten comfortable with all the facets of effective prompt engineering let's explore some ways AI language models can help

you be a faster and more effective developer here's just a short list of some of the ways you can use AI for web development you can use it to generate project ideas plan projects write user stories and even Jura tickets you can generate code and code Snippets generate mock data debug get code review and suggestions for refactor convert code from one format to another like from python to JavaScript for example you can write tests and documentation and find that you can learn new technologies and advanced topics faster than ever before in this next section of

the course I'm going to show you a wealth of examples and ideas for how you can use prompt engineering to generate code in a precise and incremental way as well as how to use AI to explore learn and study web development topics so let's go let's do it as we've seen in previous scrims you can accomplish a lot with a well-crafted prompt by describing in detail exactly what the code should accomplish generating code from pseudo code is another effective strategy to maximize your specificity and fine-tune your results pseudo code is an informal way to describe

what your code should do in plain English and that could mean a bulleted list of procedural steps or very simplified code that doesn't follow the syntax of any particular language and this tip is going to be especially helpful if you're wanting to accomplish a coding task in a specific way if you're trying to generate code in a language you're unfamiliar with or if you simply want to code without worrying about precise syntax so let me show you an example let's say I wanted to write a function to find a book in a book array by

the book's ID my prompt will look something like this I'll start by specifying that I want the prompt to be written in JavaScript now I'll go ahead and start my pseudo code with something that pretty much looks like JavaScript I'll say I want to take two arguments a book array and an ID but now instead of writing a function I'm just going to do some quick pseudo code so I'll say for each book in the book array if book. ID equals the ID that we're passing into the function then return that book from the array

else return an error object with a message notbook found that's my prompt and here is the result as you can see this is pretty much exactly what I asked for we are looping through the book array we're comparing each book ID to the ID that we're passing into the function and if they match we're returning that book and if we don't find trying to match we're returning an error object no book found I then want to be able to test this function so I'm going to write another quick prompt that is just generate some funny

book mock data to test this function chat GPT returns some fun book data and I can test my function by passing in this books array and an ID of five so let's run and open up the console and that results in the book with an ID of five so we know that this function is working great so that's one method of pseudo code that we can do just basically it looks like code but with no formal syntax but I can also write pseudo code that is a little more conversational so for example here is another

prompt where I'm basically asking for the same thing in a longer form write a JavaScript function find book by ID so I'm calling it find book by ID instead of get book this time and this function should take two arguments book array and the ID for each book in the book array compare each book array ID ID with the past in ID if found return book if not found return error object sorry no book found I'll copy and paste the function that chat GPT generates and as you can see it is almost exactly the same

We're looping through the books comparing the IDS returning the book if we find it and returning an error if we don't find it I'll call this function with the same array of books let's try a different number how about book number four great and let's try it if we enter a book ID that doesn't exist we get an error message perfect we've covered in this scrim how you can quickly create and test a function using pseudo code to more finely controlled output if you'd like some practice here in index.js I have a few suggestions for

functions you can prompt AI to generate with pseudo code so you want to write detailed pseudo code for the following functions and prompt jat GPT to write those functions for you we have a function that adds two numbers a function that adds all the numbers in an array a function that that looks for a user ID in a user array and returns an error if not found a function to count vowels in a string and a function that finds the highest number in an array go ahead and practice prompting with pseudo code if you want

to and as I said before this is a really helpful strategy if you're trying to generate code in a language you aren't familiar with if you want to have more control over how a function is written or maybe you're still new to coding and want to work through the logic yourself and not have the AI do too much work for precise communication with chat GPT you can create a pseudo language which is basically an agreement that you are going to prompt chat GPT in a certain way and you expect it to respond in a certain

way let me show you what I mean I'm going to come over here to this counter MD file and here is the prompt that I shared with chat GPT I want to build my own react component library with common components like form Fields nav barss and an accordion menu then I break down two instructions create a pseudo language similar to markdown that will help me quickly describe a react component so that you can convert it to example code respond with the template I can use as well as an example component keep the template and the

component as simple as possible I added this last line here because in my experimentation chat tobt did tend to over complicate things here's the template it gave me this is our agreement of how I'm going to Define react components so that chat GPT can provide me with the code for these components I'm going to name the component I'm going to Define it State props what it should render and the event handlers that it has in this format under State I'll Define any and all state variables with their initial values under props I'll list all the

props that my components will take with the prop type I'll describe what I want the component to render and I'll list event handlers with a Handler name and the description of what the Handler should do here is the example that chat GPT provided for me so it gave me a simple counter example we're going to keep track of one piece of State called count with with an initial value of zero as a prop we're going to take in an increment value which is a number the increment of the count so instead of incrementing by one

we could increment by five or 10 or 15 or 7 or whatever we want to do the component should render a button that displays the current count and each click increases the count by the increment value which is the prop that our component is taking in finally we have an event handler called handle increment and that increases the count state by the increment value this is a fairly detailed description of what we want this component to do so let's see how it works I'll go to my counter. jsx file here's the code chat gbt generated

I'll go to index.js and we'll import this component finally we'll render it in our app component run and see if it works excellent we have established a pseudo language with chat GPT to describe in detail the components that we want to build this does have its limitations chat jpt is only going to remember this agreement for so long so you will have to periodically mind it but this is just one more way that you can communicate with chat GPT with Precision let's try creating another component I'm going to go to my navbar markdown file and

copy and paste in my pseudo language template I want to fill this out so that I can prompt chat GPT to create a simple navigation bar for me before I show you how I filled this out I'd encourage you to pause the scrim for a second and fill this out yourself think about how you would describe how to build a nav bar you can copy and paste this in the chat gbt and say hey this is the pseudo language I want to use to create react components and I want you to create a navbar component

pause the scrim now and when you're ready come back and I'll show you how I did it welcome back I hope you found that educational let me show you how I approach this I'm going to start with my render statement because for me it makes sense to describe first what I want the component to do so I'm going to say that the component accepts an array of objects each representing a link in the nav menu I want each object to contain URL name and I'll give an example here like home about or contact us Etc

and of course we want the URL we want our Navar component to render the list of links I know I want to keep track of which link is currently active so I'm going to have a piece of State called active link and that's going to keep track of the index of the menu item so I want the initial value to be zero I want my nav bar to take in an array of Link objects as I've specified here I'm going to refer to that as nav links and the prop type will be object then I'll

handle clicks on the link and when a nav menu item is clicked I want its index to become the active link a better way to say this might be update active link with nav menu item index let's look at the code that resulted from this prompt I'll go to my navb bar. jsx file and paste it in we have this Navar which is pretty much exactly what I described it Loops through an array of navlink objects and for each renders a list item with a link which when clicked sets that link to active let's import

this into appjs and try it out before we can test it out we're going to have to come up with some links to pass as a prop to the Navar I prompted gbt to generate this for us I asked it for some learning to code themed links here's what it came up with we'll pass the nav links array of objects to navbar as a prop just like that run here's a simple nav bar that we generated using a pseudo language with chat GPT this could use some styling of course but I think it's a pretty

good start welcome to another challenge where you are going to develop a pseudo language with chat GPT to help you gener generate forms first you'll prompt chat gbt to create a pseudo language for creating HTML forms and secondly if you like the suggestions go ahead and use the pseudo language to create a form can ask for adjustments if necessary and if the pseudo language it comes up with is too complicated reprompt with an instruction to keep it simple I've noticed that this is an area where chat TBT tends to want to provide you with a

very comprehensive solution it's going to account for everything you might possibly want to do with the pseudo language which is great but for the purpose of this exercise we want to keep it as simple as possible so it might be beneficial for you to instruct Chach BT to go for Simplicity go ahead and pause now and start working on the challenge welcome back I hope that went well for you here is my prompt create a pseudo language that will help me quickly describe to you how to provide sample code and styles for an HTML form

respond with the template I can use as well as a sample element here is the pseudo language that chat gbt came up with so we have a form we can specify an action a mage method and the types of inputs that we want and within inputs we can specify a type label any attributes and styles and down here you can see we can also specify styles for the form itself so this looks pretty good to me I'm now going to scroll down a little bit and I'll show you the example that it gave me so

we have a form where the action is submit form we're going to post and it has a text input for a username and a submit button and then also some styles to give it a border I'll show you the result when I use this pseudo language to make a prompt that I fed right back to chat GPT I'm going to go to the index.html and I'll go ahead and paste my form code here and into my CSS file I will paste the CSS let's go ahead and run and test this out and there we go

a nice simple little form in just a few steps using this strategy you can create a session with chat gbt where you can use this template over and over to quickly and precisely create a number of web components just keep in mind that chat gbt's memory is short and you may need to remind it of your template after every seven or 10 interactions or so thank you for trying out this challenge fantastic work there's a lot to think about when you're writing a function there's so many edge cases that you need to account for and

it can take a lot of practice to be able to identify what those edge cases are luckily this is something that chat GPT really excels at we can use it to identify edge cases and generate inputs so that you can test your function against those edge cases this strategy can be super informative and educational especially if you're new to programming so let's take a look starting in my remove dupes MD file I'm first going to prompt chat GPT to write a JavaScript function that takes in an array and returns a new array with any duplicate

items removed I'll now jump to my remove dupes JS file and here's what that function looks like the function is creating a set out of the array because set automatically removes duplicates and then we're turning it back into an array using array. from so basically we're going to pass the array into set set removes all the duplicates then we're converting it back into an array and saving it to a variable called unique array and then returning that array where all the duplicates are removed returning to remove dupes let me show you my second prompt and

that is list eight edge cases this function should account for and provide test cases for each you may want to ask it for all the edge cases or however many edge cases you want I specify eight edge cases just to keep it from going on and on and on this is gpt's response and it did include a definition of each which I erase just for the sake of brevity so the edge cases we want to account for are an empty array an array with a single element an array with all elements that are the same

an array with different types of elements like num strings and booleans an array with nested arrays Chad gbt sort of disclaims here that the function that it gave us won't work as expected because JavaScript only allows comparisons of simple data types so so if we wanted to check for duplicate arrays we would need another solution the six case is an array with objects then a non-array dealing with what the function should do if it receives an input that's not an array at all and finally arrays with special numbers like not a number and infinity it

also included with this response an additional disclaimer the function provided doesn't handle nested arrays objects or non-array inputs that's just fine for our purposes so let's return to remove dupes DJs here I made an additional prompt because I wanted the output to be in a specific format I asked for the edge cases in a single code block just for ease of copy and pasting and I ask it to denote the edge cases as part of the console log so here's an example of what I want each test or each Edge case to look like before

we call the function inside the console log with whatever our test case is I want what we're testing for to be denoted as a string here are the test cases as you can see they're in exactly the format that I requested that's great so let's head to index.html really quick and I'm going to add remov dupes DJs as my script Source let's return to remove dupes JS run and see how we go and open the console here are all of our tests and our results this is really helpful cuz if you take a look at

an array with a single element it's passing into one and we can see that our result is an array with one inside of it so we're dealing with that edge case as expected but take a look at non-array inputs in which we're passing in a string and you'll notice that we have two T's a capital t and a lowercase T which this function considers two different characters so they are not considered duplicates depending on your purposes that's an edge case that you might want to account for let's do one more example I'm going to go

up here to count frequency. JS and paste in a prompt as well as the function that chat gbt responded with so I prompted write a JavaScript function that counts the frequency of characters in a string this function creates an object it checks through every character in a string if it finds the character it increments the character count by one and if it doesn't find it it creates it in the Char count object what I'd like you to do is pause the scrim now and ask GPT for five edge cases and then test this function against

those edge cases when you return I'll show you my prompt and output I'll see you in a sec welcome back hope it went well here is my prompt my prompt is what are five edge cases this function should account for please list the edge cases followed by a single code block with tests for those edge cases here's what it came up with because I have already requested a similar task chat GPT is going to give me a very similar format to before which is great that's exactly what I want you may have needed to tweak

it a little bit that is completely okay I'm going to return to index.html and change my script source to to count frequency run and see our result in the console you can see the five test cases for these edge cases and their results as I said I think this strategy can be pretty helpful to almost anybody but especially if you're new this can be really really educational chat GPT can really open your eyes to edge cases and things that your function might need to do that you may have never thought about definitely use this to

your advantage and join me in the next scrim to talk a bit more about test cases language models can be extremely helpful when it comes to testing your code it's great at coming up with random inputs with which to test your function it can help you write tests using test Suites like justest and can even help you refactor based on those tests here in my scrim I have this password Checker function it checks if a password is valid and a password is considered valid if it has 10 or more characters includes at least one capital

letter and and contains one special character like a star an ampersand a dollar sign or an exclamation point say I just wanted to call this function with a bunch of different inputs to get a feel for how it will handle different inputs so I can ask for some really simple tests call the following function with 10 test inputs and console log the results and then I have an example of what I want the console log to look like I want to call the function with a random input and I want a label that lets me

know what input went into this function and then of of course I reference in my prompt the function that I want to test let's take a look at gpt's response as you can see it's made up 10 random passwords some of which are valid and some of which are not let's open the console and run this and we see the output of our various tests as I said GPT can also generate tests for specific test Suites and head over to my is even JS file we have this really simple function that takes in a number

as an input and uses the modulus operator to to divide it by two to determine whether or not it's even if I wanted to generate some just tests for this I can prompt to chat GPT something like please write eight tests for this JS function using just it spits out some functions using the just syntax and also makes some really good assumptions about the types of input and edge cases that we should test this function with for example it tests with zero with positive numbers negative even and odd numbers and so on now say that

I wanted to generate some test that look like just but I want to be able to run them quickly in my browser or in a scrim to do that all prompt please write 10 tests for this function that look like Jess but that I can run in my browser and then going to reference the function that I want it to write the test for and it responds certainly here's an approach for a very basic just like testing setup that you can run in your browser's console we have a test function that is going to run

a test callback and print the result of each test with a check if it passes and an X if it doesn't pass we'll take a closer look at this in a second but it goes on to make a bunch of just like tests for all sorts of inputs decimals negative decimals positive even numbers negative odd numbers and even a string and note down here that it says JavaScript is a dynamically typed language and does type coercion so 12 the string is coerced to 12 the number which means that the string 12 will return true as

our function is currently written let's have a closer look at the response in the scrim copy and paste here we have a couple of helper functions that help us to create a justlike environment and a bunch of tests so I'm going to go to my index.html I'm going to make sure that the right script is uncommented then we can return to is even and run these tests all of our just like tests have passed but once again this draws my attention to the fact that the string 12 will be coerced into the number 12 and

therefore will return true as my function is written so based on the results of my tests let's say that I decide that I actually don't want that to happen I want my function to only accept numbers as input so to GPT I'm going to prompt please refactor my iseven function so that string inputs are invalid it suggests a couple of Alternatives one where it returns false if the input is not a number and one that will throw an error if the input is not a number with just a couple of prompts I've been able to

generate a test suite and refactor my function to cover more test cases based on the results of that test Suite I'm going to choose this first alternative which will return false if the input is not a number let's go back to the scrim and I'll comment out our old function and copy and paste in the new function let's run the test again and now this last test doesn't pass let's scroll down to this test and I'm going to change this because I now expect that is even will return false if the input is a string

and so I would expect that when is even is called with the string I would expect that to be false I can run again and all of my tests are passing this has been a few ways that you can use a language model to generate all sorts of input data and tests and also refactor quickly and with just a few prompts in this little challenge you'll jump in and use chat GPT to test a function and generate some edge cases especially for you new developers out there this is great practice getting familiar with all the

different possibilities your functions may need to account for so here we have a small function that takes an array and a chunk size and returns a new array of subarrays for that chunk size so here's a little example we have this array containing the numbers 1 2 3 4 we ask for a chunk size of two so this function then splits up the array into two arrays with two items each so the first thing I'd like you to do is go ahead and read through the function make sure that you understand what it's doing then

ask chat GPT to generate some test inputs for your function just so that you can make sure that it's working correctly then you'll ask chat GPT for five edge cases go ahead and read through those edge cases that it generates and pick a couple that you want to revise your function to account for some of the things that may involve infinite Loops so don't jump right in running the edge cases be sure to read through them and revise the function first once you've chosen a couple of edge cases you'll ask chat GPT to revise the

function based on those edge cases and you'll want to make sure to instruct chat GPT on how you would like to deal with those edge cases whether that's returning humanfriendly errors or returning false or returning one single error saying something went wrong it's up to you how you would like to handle errors so go ahead and end pause now and start working through these steps welcome back let's go ahead and generate some test cases I'm going to delete this example test case we have here and my prompt was call this function with three test inputs

and console.log the results and I included the function in my prompt here are the test cases that chat GPT came up with we have three test cases the first is an array with nine items and we're asking for a chunk size of three and our expected output is that we split this array into three chunks of three items each in the second we have some strings and we want a chunk size of two but since we have five items we end up with two items being chunked together in an array and then one item by

itself and in the third test case we are asking for a chunk size of one so each item in the array ends up in an array all by itself so that looks good let's go ahead and now generate some edge cases going to scroll down so we have a little bit of room and here was my prompt kept it simple generate five edge cases this function should account for and again I copied and pasted the function along with my prompt chat gbt suggested following edge cases if the input array is null or undefined so if

we get a null instead of an array if the chunk size is zero or negative that's going to cause an infinite Loop because if we look at our function we're incrementing I by the size of our chunk each time so it won't increment and we'll keep going and going and going not exactly what we want and then finally an edge case that we might need to account for is if the chunk size is null or or is not a number so for example if we tried to input the string two so I can see from

these edge cases that we're going to have a problem if this function is called with types we aren't expecting if the first argument isn't an array or if the second argument is anything but a positive integer based on that knowledge here is the prompt that I gave chat GPT to ask it to revise the function my prompt was revise the function based on the edge cases above and I'm saying above here because I am still in the same session with chat GPT so I can count on it knowing the function that I'm referring to throw

a userfriendly error if the first argument is not an array or if the second argument is not a positive integer so up here I'm going to delete my old function and replace it with my revised function designed to deal with these edge cases let's run this with our current test cases looks like we're getting our expected results with this revised function so that's great now let's scroll back down and uncomment these edge cases so we can test them one by one the first argument is null let's go ahead and comment out these tests just so

we can see clearly the first comment is null then we get the error the first argument must be in Array that's great test the second one this is the one that was in danger of causing an infinite Loop so instead we get an error that says the second argument must be a positive integer great that's what we want now let's test what happens if the chunk size or the second argument is null we get the error about the second argument we get that same error if we try to enter a string or anything that isn't

a positive integer in this Grim you've practiced using chat GPT to test and generate edge cases for a function so really great job I hope this will come in handy for the future perhaps you've already discovered in your experimentation with chat GPT and other language models how easy it can be to find errors and bugs in your code for example I have this function here and it takes some information about blog previews and it uses it to construct the HTML for a Blog preview element so as you can see it takes in a parent ID

a card ID a card class a title and some content and it makes HTML elements that look a little something like this however without having any idea what this function does I could copy and paste it into chat GPT and say hey chat jpt what's wrong with this function and it will indeed come back with a list of everything that's wrong with the function and it'll even correct the mistakes for you in an easily copy pastable code block don't look at this for too long it contains spoilers this is a perfectly great strategy as long

as your code isn't too complex what I'm going to suggest you in the scrim is a strategy to get language models to communicate with you about errors in a way that's going to let you better keep track of the changes that chat GPT has made so what I'd like you to do now is prompt GPT to fix the errors in this function by using these steps first run the function and copy and paste any error messages that you might get into chat gbt along with the function then I'd like you to ask the AI to

explain the errors to you as code comments this can be a good thing to do because it helps you keep track of what's going on with your code and also making chat GPT break down the changes and explain them is going to help you minimize the chances that it will make a mistake as we've discussed the more you can break down a task the better so go ahead pause the scrim now and debug this function welcome back hopefully you have some nice blog previews in your mini browser let me show you what I prompted so

my prompt was this function should return the HTML for a new blog preview post so I'm being really clear about what I expect the function to do and I go on to save but instead I'm getting the following error and I copy and paste my error and then I res followed with please fix the errors and explain the fixes with code comments chat TBT responds with the following I have a couple of problems in your code here is the correct code but rather than spitting out the corrected code or giving me paragraphs of explanation about

what it changed it's right here conveniently in the code comments let's have a look at this in the scrim I'll go ahead and delete my old code and replace it with the new so I know after taking a look at this that I forgot to call get element by ID as a function and I didn't pass anything into it I was trying to append the content of the card incorrectly and I had an error down down here because of the way that I was incorrectly calling get element by ID chat TPT provided an extra paragraph

explaining what happened if you would like to pause and read that you're welcome to I actually found the code comments a little hard to read so I amended my prompt a little bit right after please fix the errors and explain the fixes with code comments I say comment out the old code rather than replacing it so I can better see how you fixed it gbt then responds first with a list of of issues that it addressed this is helpful for understanding the problem if you want to read through it but let's see how this amendment

changed chat gpt's code output going to go ahead and replace my function again and let's close the console so now we have the old code so this was our old line of code and you see that we are assigning [Music] document.getelementsbytagname ID with parent ID as an argument so this is the corrected code and this way we can compare the old code to the new code to really understand what happened these are just a few examples of how you can tweak your prompts just a little bit to get some really incremental and helpful information out

of chat gpt's responses see you in the next Grim AI can be so so helpful at performing a variety of timeconsuming detailed rote tasks and one of those tasks is code conversion let's look at a few examples I can give the AI an API call and ask it to convert it to python I can convert from language to language for example this is an API call in JavaScript and I'm asking chat jpt to convert it to Python and this is what that looks like I can also this is one of my favorites convert CSS to

Tailwind I just have this blob of CSS as part of my prompt chat GPT spits out some Tailwind this came in really handy recently when I was working on a project the tailwind and I just wanted to make a small change without having to learn it right away real time saer I can also convert CSS to a styled component in react this is a really easy and often accurate conversion that I have found myself using a lot you can also convert data from one format to another so here I have a CSV file about sitcom

from the 9s and I want chat GPT to convert it to Json note that I do have to give it some instructions so that the Json looks how I want it to so I instruct it to lowercase and concat the headers these are the headers title main actors year and average rating and if it is two words I have asked chat chbt to convert it to one snake cased word I've also requested that it convert the main actors's column to an array so I want an array of actors and I've also specified a type that

I want for the year and average rating columns and note that this is also serving as an example of what I want the column names to be and quick as a flash I have converted the data to Json with the specified property names and types to review here are some of the ways that you can use AI to convert code from one thing to another you can do language to language like JavaScript to python file to file format like CSV to markdown or to Json framework to framework like converting a react component to view this

can be really helpful if you're trying to pick up a new framework maybe you have a piece of react code that you're really familiar with and you want to see what that looks like converted to view so you can start to use view there's a lot of possibilities here and then of course my favorite chat gp4 in particular is a really great CSS converter CSS to scss or to SAS or to Tailwind or styled components again a lot of stuff you can do I'm sure there are a lot more ways that you can use this

capability so keep this in mind as you're considering ways to make your development tasks faster here I have a little application that ideally when you click on this Blast Off button will count down from three and send this little rocket blasting off into space unfortunately the spaceship can't launch because it's programmed in jQuery and Tailwind which our scrim is not currently set up to handle so here's your task you'll want to prompt chat GPT to convert the jQuery to plain JavaScript and the Tailwind code in index.css to plain CSS then you'll click last off to

see if the button works and if you've converted Ed it successfully clicking the blast up button should start a countdown timer and the rocket ship should take off when the countdown reaches zero go ahead and pause the scrim now and work on this challenge welcome back hopefully you have liftoff here was my prompt to convert the jQuery to plain JavaScript pretty simple please convert this jQuery to plain JavaScript and then I copied and pasted the jQuery code in with my prompt I'll go ahead and replace my jQuery with my converted plain JavaScript code we're selecting

various elements in our HTML adding an event listener which starts a countdown on click and also calls this rocket blast function which uses the transform property to move the rocket off screen that looks good let's now go to our index.css and convert this Tailwind code my prompt here was also pretty straightforward please convert this Tailwind code into an external CSS stylesheet I'll go ahead and replace this Tailwind with my output from chat jpt so you'll see that it has styled everything nicely for me and now this should work so let's click run and the Blast

Off button to see if this works 3 2 1 zero we have liftoff which means we've used chachy BT to successfully convert the code great work it might seem like there's not too much to say about documenting code with AI you can use chat gbt to document a function or other small bits of code simply by copying and pasting the code into the prompt and saying hey document this for example take this little function that creates SEO friendly slugs if you're not familiar a slug is a unique identifier for a link to a web page

and if it's optimized for SEO it uses keywords and is often quite descriptive here is our AI generated documentation and as you can see this function takes the title of the web page and converts it to a slug you can see down here in this little example that if you pass it the string hello world it's going to return hello world with no capitalization and a hyphen between it and this would become part of a URL to uniquely identify the hello world page so with chat gbt you can request specific formats of documentation like we've

requested JS Doc and so it's going to document the parameters that the function takes as well as a description of what it returns and its type it also really neatly describes everything that the function is doing so it converts the title to lowercase it trims the leading and trailing whites space it replaces symbols and other non-alpha numeric characters like commas or quotation marks with hyphens and finally it removes any leading or trailing hyphens so that is some nice thorough AI generated documentation another example of a specific format you could ask for documentation is prompting GPT

with a react component and asking how do I document this using storybook and then chat GPT will provide you with some boilerplate code and you can start having a conversation with it about how you might do that so documentation is pretty much as easy as asking for it so Ai and language models really excel at helping you create all sorts of different types of documentation mostly for smaller bits of code like isolated functions and the like but here's a fun little strategy for when you have a longer piece of documentation you'd like AI to help

you with I'm going to prompt chat gbt to interview me about my thoughts and opinions on style conventions and best practices and I'm going to have it use my answers to generate a style guide so my prompt is I want to create a simple JavaScript style guide guide ask me 10 questions about best practices and style conventions and use my answers to write a style guide chat gbt says great here are some questions it ask me 10 numbered questions so pretty standard stuff like do you prefer constant let over VAR should we use semicolons what

maximum line length do you prefer single quotes double quotes the dreaded tabs or spaces debate Arrow functions and so on so the way I'm going to answer this is I'm going to create my own list from 1 through 10 and answer each and notice that there are places in my answer where I defer to the wisdom of others so for questions five and six I say use whatever is in GitHub style guide and for number nine which is what is your position on trailing commas and objects and array literals I'm just going to say go

ahead and use whatever is in Google style guide keeping in mind that this will be information from chat gbt's cut off in 2021 it is pretty cool though that I'm able to pull in other sources here to create my own style guide here is the response to my answers it's my own little style guide and now that I have this file I could ask chat jpt to convert it to markdown or something so that I could put it on GitHub although fair warning it doesn't do markdown perfectly because the response text is already formatting and

that tends to cause issues but the point is that in just a few minutes I've generated at least a starter document for a project that most likely would have taken me much longer if I were doing it manually or maybe if I worked for a small team at a busy startup I may not have ever done documented anything at all as a developer I've spent probably years of my life pouring over code that is minimally documented or not documented at all so let's all keep this tool in mind and put those days behind us happy

documenting AI can be a really powerful tool for learning in a personalized and interactive way in this scrim we'll talk over a few quick tips on how to use a language model like chat GPT to learn a new topic or technology as well as create highly tailored learning experiences so for example you can use chat TBT to summarize and explain info in a variety of ways find learning resources create a study guide Andor a study schedule and also to test yourself so let's go over these one by one and look at some examples as far

as explanations and summaries go my advice is to start broad by asking chat gbt about a general topic then drilling down into more and more detail as you're exploring a topic you can instruct chat GPC to summarize information and provide explanations by specific Audience by specific experience or skill level or by asking for metaphors and specific examples so let's say I've been studying JavaScript and I'm ready to tackle more advanced topics I can prompt something like please suggest four Advanced JavaScript topics that every junior or intermediate developer should study the result is a long list

of advanced JavaScript topics that I can study like asynchronous programming Advanced Dom manipulation design patterns functional programming whole bunch of stuff so I'm going to go ahead and pick one let's concentrate on async programming here in the explanatory paragraph it says familiarize yourself with Concepts like callbacks promises and async aake so I'll just start with please tell me more about callbacks explain the concept as if I'm a beginner and include a code sample so I'm requesting a specific audience and a specific example we get a nice explanation of callbacks that is relatively simple and jargon

free along with a couple of simple examples let's say I read through this explanation and I still don't quite grasp it I can ask chat TBT to use a metaphor or provide use cases I still don't quite understand can you explain callbacks using a metaphor and can you provide a couple more use cases the AI comes up with this metaphor of a waiter in a restaurant being like a callback you can go ahead and pause the scrim if you'd like to read through this and then it gives us a couple more examples like reading a

file asynchronously and making an a API call but what if I really really still don't quite understand or more realistically what if I want to start with a shortest most simplified conceptual explanation that I could get one strategy is to ask chat TBT to explain something to you like your five which is a really popular thing to do on Reddit there's a whole subreddit called explain to me like I'm five so I'll prompt please explain JavaScript call back functions to me as if I am 5 years old AI comes up with this example about you're

a kid playing with your toys you can can go ahead and pause if you'd like to read through it another helpful strategy is to ask for an explanation based on a specific audience or skill level or Persona or all three as in this example you are a senior engineer and I am a junior engineer please explain JavaScript promises to me in detail so you'll notice that if you pause and read through this example the result is a quite long and detailed explanation of promises that is more Technical and detailed than than the explanations that we've

gotten so far because we've been really specific about our skill level and the skill level of the Persona that we want to have explain the concept to us this prompting strategy can be really helpful for learning especially if you're a person like me who needs a variety of different explanations to really grasp a new subject finally you can ask for explanations using very specific examples so say I want to learn more about JavaScript classes but I don't want to look at another Fubar or car example because they're so common so I can prompt the AI

explain JavaScript classes to me using an example class called pet then I can get an explanation that gives me a pet example or if I want to have even more fun I can say explain using mythical creatures like dragons and unicorns and chat GPT explains classes to me using this mythical creature class where we create dragons and unicorns named Smog and Twilight just a way to keep it fun especially if you're not a big fan of arbitrary Fubar examples so that's it for this scrim we've talked about how to learn with AI by exploring broad

topics and drilling down asking for summaries and to explain info in a variety of ways now join me in the next Grim to discover more ways to learn with chat gbt including how to find learning resources create study guides and test your knowledge welcome back we've talked about strategies for getting info from chat GPT in a more personalized and tailored way now let's talk about a few more ways that you can use chat GPT for learning this includes finding Learning Resource creating a study guide or a study schedule or using the AI to test your

knowledge you can use AI to find articles blogs YouTube videos and whole platforms like scrimba for example just about anything you're interested in learning so for example I could prompt something like list five great articles I can read to understand dynamic programming this can be any number of Articles and any topic another thing you could do is prompt for articles that are targeted towards beginner or intermediate or Advanced Learners on a certain topic so asking for articles will yield not only the links but short summaries of the Articles which can come in very handy and

it's not necessarily something that you could get from Googling or I could ask for YouTube videos or Forum posts or book recommendations and again get a list with some links I could also ask for a mix of videos Forum posts blogs basically whatever I want you could argue that this is a lot like Googling but I think first of all it's nice to have all this information in one place and I think it's a little easier to tailor your list of learning mat materials to your specific needs and skill level without having to do a

ton of searching AI can also help you structure your learning for example I can use it to create a study guide or a schedule so here I'm prompting write me a study guide on typescript including outside resources for further study assume I already have a strong grasp of JavaScript so I'm requesting a topic I'm providing more information about the kinds of information that I want and I'm specifying a certain skill level or a certain level of knowledge and it gives me this beautifully formatted study guide for typescript that is broken down by topic and subtopic

we also have some Advanced topics learning typescript with framework some books additional tips and so on pretty useful I can then follow up this prompt with something like based on the study guide please create a study schedule for me assume I want to spend about 10 hours a week studying the topic for each study session include the topics I should study along with additional resources and practice exercises and this gives me a really really nice study plan broken down by week and by session and also links to resources where I can read about these suggested

topics so this could come in really handy if you need to learn a new subject and you're not sure where to begin this probably isn't going to replace a curated course or even a really good YouTube video but it is a place to start if you just need a little bit of structure to your study now I have a warning as you are seeking resources from chat GPT or really any other language model keep in mind that that asking for resources there's definitely a danger of the AI hallucinating giving incorrect info outdated sources especially in

the case of chat GPT because as we have discussed at the time of this recording it only has access to information from November 2021 and nothing after that there's also a danger again of hallucinating and completely making up non-existent sources so just keep in mind that this strategy is a good place to start but right now ai model are often too wrong too unpredictable and too outdated to be anything but a supplementary learning tool so always take the time to fact check and seek out multiple sources now let's go to our final way to learn

and that is testing yourself so this is as simple as prompting something like I've been studying typescript generics quiz me on my knowledge all we need is a specific topic and a request for a quiz chat gbt does exactly that I could also say something like give me five small coding problems to practice practice and test my knowledge of some topics such as higher order functions in JavaScript and it generates some map filter and reduce problems that we could use for practice so in the last couple of scrims we've talked about the various ways that

you can use AI to study web development including strategies to get more specific and tailored responses ways to create learning schedules finding resources using AI to help you structure your learning and testing your knowledge I hope you found this useful and see you in the next scrim time for a bit of review and practice we've just talked about how you can use chat GPT to study web development and here's some of the stuff we covered you can start with a broad topic and narrow it down you can request explanations based on a specific audience skill

level or experience level you can request specific examples to help you better understand Concepts you can request learning resources like YouTube videos and articles and finally you can generate study plans and practice questions here's a quick opportunity for practice I won't be going over the solution for this because it's going to be very particular to you but what I'd like you to do is first ask chat TBT to quiz you on your react knowledge based on your skill level keep going with your quiz until chat GPT asks you a question that you're not sure about

or don't know then go ahead and use the steps above to learn more about that topic until you feel confident giving an answer chat GPT is a really great tool for learning so I do hope that you tried this out and I hope you find it very educational a big part of front-end development is learning and interacting with a variety of restful apis and using AI language models is a fun and interactive way to explore the possibilities as I walk you through an example of how to explore apis and generate API calls we're going to

switch it up a little bit and use bar which is Google's interactive AI to go to Bard and try it out yourself you can go ahead and click on this image and it will take you right to the site so your first question might be what is the difference between Bard and chat GPT and when might I use one versus the other so here are some key differences at the time of this recording Chad gpt's training data in other words all the information that it has access to stops in late 2021 in other words anything

that's happened since then chat jpt has no idea about B on the other hand has access to upto-date and current information it's also said to excel at simplifying information and being conversational there are a ton of chat GPT versus B articles out there so I'll let you make your own decision about that but what we do know is that Bard has access to up-to-date current information so it's great to use when you need to find out information that's timely for example I can ask it what's the most popular front-end framework today and it responds with

as of June 2023 and that is the year and month that I'm recording this scrim the most popular front-end framework is reactjs and then it goes on to give us a bunch more relevant information for this reason Bard can be a great tool to explore API documentation because it's changing all the time and we want to make sure we have the most updated information I unfortunately learned this the hard way by trying to ask chat GPT questions about open AIS apis it gave me outdated information and I ended up spending a ton of time debugging

so all that said let's use Bard to explore the GitHub API starting off here's an important tip when you're using Bard you'll get the best results if you're very direct about telling it exactly what you'd like it to do so I started off by prompting I want to explore the GitHub API what are 10 end points I can access and Bard responds I'm not able to help with that as I'm only a language model I think maybe what hangs it up is the fact that I sort of asked if I can access 10 end points

so so I'll revise my prompt a little bit and say please help me explore the GitHub API list five available endpoints and what information I can get from those endpoints and as you can see this time Bard is able to provide me with the list of endpoints to get information about repos issues poll requests commits and branches and also list what I can do with him so the repost endpoint is useful for finding out what projects a user is working on issues can be useful for tracking the progress of a project and finding out about

any bugs or problems and so on so now that I have an idea of what I can do let's say that I want to get some issues from a specific repo I'll ask Bard please write an example API call showing how to retrieve issues from the core react repository then I'm going to specify that I want to use fetch because it does tend towards using the axios library B generates me an example API call so let's paste it into the scrim and see how it works so it's given me the URL to Facebooks react repo

set up my fetch options gotten the response for me as Json and then it says I can do something with the issues so for now let's just console log the issues see if this works I'll run and open the console and the response is a bunch of issues from the react code base Bard goes on to say here's an example of how the issues object can be used to display a list of issues so here is some sample code that if I create a UL class called issues list then I can Loop through each issue

create an Li element get the title of the issue and append it to my UL so let's do that I'll get rid of my console log and replace it with some code to create a list then I'll make sure to grab this issues list that we're trying to append list items to and in the body I will create a UL with the class of issues list let run and open up the mini browser and in just a couple of seconds we have written an API call to retrieve a list of issues from the react codebase

and display them pretty cool I can continue to explore the API by asking for different information from a different repo so I'm going to say Show an example of how to request the star count of a repository from the GitHub API use free code Camp's main repository as an example and also use fetch this gives me an example API call for how to get the star count of any repository that I want but also a specific repository to test this out so let's do that I'll go back to index.js and I'm going to comment out

my first API call and we'll paste the new one in here and run go ahead and minimize this and we'll open up the console and it looks like free code Camp has 368,000 stars impressive so now that I've explored the API a little bit I can start getting more specific and more complex about what I would like from the GitHub API so this time I'll prompt I would like to build a tool that interacts with the GitHub API where I can send a search term and get back the name star count and URL of the

top five matching repositories with the most stars can you give me an example API call using JavaScript and the fetch API C gives me an example function that takes in as search term uses the GitHub api's search feature to search the repositories for my term then grabs the first five and gets all the information from it and console logs it so let's try out this code I'll comment this out paste the new code and then I'm going to need to call my function with a search term which I'll do down here call this with the

search term react run and open the console back up again and we get five repository names star counts and URLs I do think we have a little bug here I don't think that this is the top five with the most stars I think this might be the first five that the API returned but this is a good lesson in staying Vigilant paying attention to what the code is doing and making sure that you know how it works and that it's doing what you expect that is how you can use a language model to start exploring

an API as you can see it's not necessarily a good replacement for reading the documentation but it is a fun and interactive way to get to know a new API and start using it right away have fun seeing what you can do with Bard and the GitHub API and I will see you in the next scrim hello again in my last traditional software engineering role I had a wonderful co-worker who I could go to with all of my questions about git and GitHub and that was great for me because Version Control can get so complex

lucky for us now everyone can have a Version Control expert right at their fingertips and of course that expert is chat jpt let's look at a few examples of how chat jpt can be a huge help with Git and GitHub you can ask it to remind you of everyday commands like what's the get command to create a new Branch you can lowkey ask it to explain Version Control Concepts to you with prompts like my tech lead has ask me to rebase my Branch but I don't know what that means can you explain chat gbt without

judgment will say certainly and explain rebasing in as fine a detail as you require you can ask questions about using Version Control with specific Technologies like how do I resolve merge conflicts using vs code and again it'll give you step-by-step instructions for how to do that you can ask it to help you problem solve specific scenarios such as I want to open a pull request but I only want certain commits to be a part of this pull request what can I do you can get as detailed and specific as you want and chat GPT is

still going to help you out so this prompt is very very specific to my situation I say give me a stepbystep guide to submitting a PR for an open-source project I've cloned the repo locally my branch is called blah blah blah fix broken link and I want to PR into the main branch of a project called super awesome project as you can see down here it's giving us some commands that are personalized to the information that we gave it very very handy also notice that we have a very detailed step-by-step guide here that'll walk you

through it in much more detail than maybe even a coworker would this can make once intimidating tasks like trying to contribute to an open- source project that much less intimidating can also help you write pull requests if you're work workplace or the project that you're working on doesn't already have a process for how they want pull requests to be written I find this to be a really helpful prompt ask me questions about my PR and use my answers to generate a PR description it then generates six answers what's the purpose of your poll request what

issue or feature does it address what specific changes did you make are there any important considerations or instructions for reviewers have you tested your changes and do you have any additional comments or information that would be helpful for the reviewers so I answer each question one by one and enter that as a prompt and here is a full pull request description in just a couple of minutes it's a super timesaver so next time you have a question about Version Control git or GitHub keep chat GPT in mind see you later so you finished an amazing

project and now you need to figure out how you're going to get it up on the internet this is another area where language models can be extremely helpful deploying is an area where the information tends to change quite a bit so we're going to use Bard for this scrim to make sure that we have the most most updated information on how to deploy let's say that I'm not even sure at first where I want to deploy my project or what I can even use so I'm going to start with the prompt list five Services I

can use to deploy a front-end project we get back five suggestions here netlify versell Cloud flare Pages GitHub pages and surge.sh let's say I read all of these and the ones that I'm most curious about our versell and GitHub pages I can then dig down a little deeper with the prompt what are the benefits of deploying an application on forell versus GitHub pages so we can see quickly that forsell has automatic deployments free SSL Sears performance and integration things where GitHub Pages has free hosting a simple setup and integration with GitHub which makes it easy

to manage the website from within GitHub it then goes on to even create a helpful table comparing the two so once I've made my decision let's say I want to keep it simple and I want to use GitHub Pages now I can drill down even further with the prompt please give me a step-by-step guide on how to deploy my project with GitHub pages so we get a full step-by-step breakdown with some additional details about each step so I read through this I get a little bit familiar with deploying to GitHub pages and now I'm asking

myself well what if I have a react project so I can ask for more information my prompt is is there anything special I need to do to deploy to GitHub Pages a react project versus an HTML CSS JS project and Bard says yes there are some things that you need to do like building your files configuring GitHub in a certain way EX ET so you can start to see how you can use a language model to get the sort of information that you're looking for from here I could ask the language model to tell me

more about what a build process is or more about how to configure or really anything that I'm curious about I'm just going to keep asking questions and that's how I can sort of run my own investigation about the specific tasks that I'm trying to accomplish because Bard has access to the internet and more updated information it's also good for asking about specific services so say I have an old Heroku project and I know that I had at one point deployed it using the CLI but I can't quite remember how it works and this is definitely

a true story something that's happened to me before so I could say something like list some commands I can use to interact with the Heroku CLI to deploy a project and it'll remind me of all the things I can do very handy I can also ask it for advice on comparing different deployment services like for example should I use netlify drop or netlify continuous deployment it explains what those two things are provides a table that compares them along with some advice about some additional things to consider when I make my choice so let's say I

choose continuous deployment with Neto I can then ask how do I set that up and again it'll give me some really handy step-by-step instructions I'd like to point out here too that you can use this technique not just for deployment but for anything that you're unfamiliar with the idea is to start Broad and drill down into specific subjects as your needs require happy deploying I'll see you in the next grim let's talk about an important skill when using AI to assist with your coding and that is knowing when to stop AI tools like chat TBT

can be a huge help but there comes a certain point where they can start getting in the way and becoming really frustrating let's go over a few examples number one when you aren't getting the results you want after several iterations if you f- tuned to prompt several times and simply aren't getting the results you're aiming for it might be time to take a step back number two this is a big one when you no longer understand the code if you're finding that the code generat by AI is so complex or convoluted that you're struggling to

understand it that is a really good signal to pause related to this is being caught in a cycle of what I like to call copy paste and prey this is the term I use to describe the following scenario you've had the AI generate code for you and the code has some errors you've asked AI about the errors and the AI spits out more code and that new code may or may not have fixed the original error but has introduced a new error so you ask it to fix that error and before before you know it

you're copying and pasting big swatches of code into the AI without a solid understanding of what the code is doing a really good sign of this is if the AI is saying things like apologies for the misunderstanding or I see the problem now over and over again but it's not actually helping you move forward this is why I can't stress enough it's really important to take the time to read and understand what any code you generate with AI is doing it's really easy to get trapped in this Loop another time it might be time to

step back from AI is when the AI seem seems dumber than usual sometimes for reasons I can't explain an AI language model will just seem off the answers might be off base verbose or less coherent than usual or just missing the mark and this could be due to many reasons including the way that you're phrasing your prompts or some underlying issue with the AI when this happens best give it a break and lastly when the AI seems forgetful AI models like chat tobt don't have a memory in the same way humans do so if you

notice the AI seems to be forgetting the cont text of your interaction or not following the logical sequence of a conversation it might be time to prompt with reminders or the specific code that you're working for or asking for step-by-step instructions so remember that AI is a tool not a replacement for your own understanding and problem solving skills take the time to read your code and know when it's time to take over as a human being and stop relying on the AI for help well done for finishing the second of three for this prompt engineering

course we've covered a lot of ideas and strategies for how to use AI language models in Daily coding tasks to free up time and improve your productivity we've learned that you can use AI to accomplish a huge number of tasks to generate project ideas plan projects write user stories and jur tickets generate code and code Snippets generate mock data debug get refactor suggestions convert code from one format to another write tests and documentation and learn new technologies and advanced topics faster in the the next and final section of this course we'll talk about how to

use AI to make job searching a little easier great work so far and I'll see you in the next section hello again this next section of the course covers a variety of tips and strategies for leveraging AI during a job search we're going to cover ways to generate learn and practice common DS and algo problems use role-based prompting to simulate a live coding interview generate and practice behavioral interview questions and write and personalized job docs such as resumés cover letters and elevator speeches come with me to learn how to use AI to tailor your resume

talk yourself up and interview like a champ the live coding interview is arguably one of the most intimidating aspects of becoming a developer in these interviews you have a limited amount of time to solve an algorithmic coding challenge while sharing your thought process allowed in front of another developer for the next few scrims we're going to talk about how AI can help beginners learn learn about solve and optimize easy level lead code style algorithmic coding challenges as well as help you practice and improve Live code interviewing skills before we start I have a couple of

small disclaimers first of all these strategies work much better with chat gp4 and Beyond I've noticed that version 3.5 and below is much more prone to Broad unhelpful or verbose answers or misunderstanding what you want it to do or simply giving you the solution even if you specifically ask it not to so if you can and you want to follow along with me I recommend using chat GPT 4 or newer my second disclaimer is that these strategies are also best for easy and maybe some medium level lead code questions even for the newer versions of

the language models the more complex the problem the more likely AI is to make mistakes and get things wrong if you're a relative beginner at leak code style challenges then this scrim is for you so if your desire is to get better at data structure and algorithm problems here are all the ways that you can use chat GPT to learn and improve firstly yes chat GPT can just solve a challenge for you directly you can definitely just dump an algorithmic coding challenge in chat gbt and it will solve it for you at least most of

the easy and medium challenges but it's my opinion that learning DS and algo problems with AI is best done iteratively and incrementally so you can use AI to generate code challenges generate pseudo code or step-by-step instructions for how to solve the code challenges you can learn about and analyze sample Solutions and one of the most helpful things in my opinion you can use it to study common patterns for solving algo problems more about that later let's start by asking chat gbt to generate some algo problems for us so my prompt is going to be give

me three easy level algorithmic coding interview problems chat GPT suggests these three problems the two sum problem reversing a string and palindrome number I'm going to choose the two sum problem as an example because it is fairly common and it's one of the first problems that you'll run into when you're studying leak code style problems now because our goal for this course is much more about learning how to use AI to solve algo problems and not learning about any specific problem I'm not going to go into too much detail about what the tuome problem is

and how it works and how you solve it but I do have suggestions for how you can use AI to to start to learn and familiarize yourself with these types of problems first I prompt chat GPT for a short short explanation explain the goal and solution of the two suum problem to a beginner in 150 words or less if this is a really new subject for you I would recommend that you pause the video here and read through this so go ahead and do that now if you need to but here's the gist two sum

is an exercise where you look at an array of numbers and you want to find a pair of numbers that adds up to a Target so in this example our Target is nine so we would want to write a function that looks at all of the numbers in the array and figures out if they add up to nine this is easy to do by site with a small array 7 + 2 is 9 and you'll notice that part of the problem is to find the indices of the two numbers so the index of two is

zero and the index of seven is one so we would want to write a function that returns 01 the index of the two numbers that add up to the Target to understand this problem further I could ask the AI to generate an explanation in a variety of tones or ask it specifically to use example and metaphor so I could write a prompt like please explain the twosome problem succinctly using a metaphor It won't always come up with a great metaphor this one is a little iffy but it's basically uses the metaphor of trying to find

two items at a yard sale that add up to exactly the amount of money that you have if you're the type of person who learns best from real world examples you could also prompt something like please explain the toome problem using a real world scenario so it says imagine you're at a supermarket doing your grocery shopping you're trying to stick to a budget and you only want to buy two items for dinner you have $15 and your task is to find exactly two items that add up to $15 of course in real life it might

be okay if you went to the grocery store and only spent $14.97 but sometimes putting these types of problems that can feel a little arbitrary into a more real world scenario can help you with your understanding so definitely something that is worth giving a try so after you have taken some time to understand a certain leak code problem you can also use the AI to start figuring out how to solve it one of my favorite ways to do that is to ask for pseudo code pseudo code can mean step-by-step instructions for how to solve a

problem or it could be as detailed as something that looks like code but doesn't quite have the syntax of an actual programming language and I'm going to show you an example of both so my prompt is give me pseudo code that will help me solve the following algorithmic coding problem that I'm going to include as part of my prompt the problem statement for the tuome problem I'm going to ask that chat GPT assume that I will use JV JavaScript to solve it and I'm going to explicitly state that it should not give away the answer

this can be unpredictable sometimes it will do it anyway especially if it is chat GPT version 3.5 or below chat GPT responds with nice step-by-step instructions for how I can solve this problem and if you'd like to read through the pseudo code I have included it in this Tu sum MD file so I can ask for pseudo code or I could ask the AI to generate and explain to me a variety of different Solutions so for example I could prompt walk me through a Brute Force solution and an optimized solution to the two sum problem

a Brute Force solution is a solution that works but might take up a lot of computing space or take a long time to finish its process in other words it's a less efficient way to solve coding problem this prompt is going to result in an explanation of the Brute Force solution of the two sum problem as well as some more minimalist pseudo code your results will of course vary on this but but in general you should get an explanation of the approach as well as some sample code and I should mention here that I got

a little bit lucky because I didn't explicitly request pseudo code because I wrote this prompt just a couple of steps after I had told chat gbt not to give away the answer but it probably would have been a stronger prompt to specifically state that I wanted a pseudo code brute force and optimized solution so along with the Brute Force solution it provides an optimized solution and some code and if you'd like to take a closer look at that I've also included it in the two sum MD file yet another way to start to understand how

to solve aite code problem is to prompt for a solution in your language of choice with a line byline explanation of how it works so my prompt is generate a JavaScript solution to the tuome problem and explain line by line in code comments how it works and then I can look at a solution with some comments that will explain to me exactly what it's doing now some of you might be saying but treasure isn't this cheating and that is definitely Up For Debate but in my opinion no a lot of it is about learning the

steps to problem solving or learning a trick to solve a specific problem so I think that it's completely fine to look at a solution but it can be really helpful to first set aside some time trying to figure out how to solve the problem without any help at the end of the day people who are successful at this type of interview generally are successful by solving similar problems over and over and over again and it's mostly a skill that takes a lot of practice in the next Grim we'll go over more strategies to generate learn

and practice elgo problems I'll see you there to solve data structure and algorithm problems it's really crucial to understand the different patterns and tricks and approaches for how to crack them so one pertinent question to ask might be what are five common patterns I should be familiar with to get better at solving algorithmic coding challenges chat gbt comes back with a list of commonly used patterns and says getting better at solving algorithmic coding challenges often involves recognizing and applying some common patterns here are five the one we'll concentrate on is the sliding window pattern and

as it says here this pattern is often used when dealing with arrays or lists where you're asked to find a sub range that satisfies a certain condition so a good example of this would be if you're given an array and you need to find the sum of three items in that array that are right next to each other the point here is there are a lot of problems that you'll find on lead code and similar sites that can be solved using this sliding window pattern if I wanted to get really comfortable with solving problems using

the sliding window pattern I could use chat GPT to generate numerous example problems and that's going to give me much finer control over my learning experience that I might get on a website dedicated to these sorts of problems so I'm in a prompt give me one example of a problem you can solve using the sliding window pattern that's going to give me a problem called maximum sum subarray of size K and this this is a version of the problem that I just described given an array of positive numbers and the positive integer K find the

maximum sum of any contiguous subarray of size K it then goes on to explain step by step how you could solve this problem but let's say that I have read this and found it jargony and a little hard to understand it's fairly common for these types of questions to be jargony or obtusely worded so to try to understand it a little better I'm going to prompt please restate the problem statement for beginners and avoid jarg GPT says sure I'll break it down so you have a list of numbers for example this array your task is

to find the highest total you can get by adding up any three numbers that are right next to each other in the list so you would add 2 + 1 + 5 1 + 5 + 1 5 + 1 + 3 until you checked all combinations in the array and found the highest sum so I can tell by looking at this that the highest sum of three numbers is probably going to be nine and as you can see it very helpfully walks you through this so if you add up the first three numbers you get

eight if you add up the last three numbers you get six and the answer that we're looking for is the highest total so if you add up five 1 and three you get nine which is the highest possible total so hopefully that makes a little bit more sense than find the maximum sum of any contiguous subarray of size K I can also do the opposite and start with an algo problem then ask what pattern I can use to solve it here I'm throwing into the AI an explanation of a problem that's pretty similar to the

twosome problem that we talked about in a previous is scrim and I'm prompting what pattern can I use to solve the following algorithmic coding problem the key difference in this problem statement is that we're dealing with ass sorted array meaning all the numbers are in ascending order but we're still looking to add up two numbers in the array and see if they add up to a Target sum which in this case is six and we'll get back some information about an optimal pattern to solve this challenge which is the two pointers pattern as well as

some instructions on how to go about it if you want to learn more and take this a little further I've included the problem statement for this sorted toome problem here in the scrim and here's what you can do to take it further you can read through the explanation down here and if necessary ask for an explanation of the problem statement in a variety of tones with less jargon or with examples or with examples and metaphors whatever you think is going to help you out the most then use the AI to generate pseudo code to help

you solve the problem ask about brute force and optimize Solutions ask chat TBT to generate a solution and explain to you how it works and as for other problems that can be solved using the two pointers pattern and this is kind of a good skeleton for a process that you can go through with any variety of L code style challenges for this challenge you're going to use chat GPT to generate and solve the simple classic fizzbuzz problem what you'll do is ask chat BT to give you the fizzbuzz problem and remember to specify that you

do not want the solution because the second step is to attempt to solve it yourself if you've already solved pH buzz in the past and you feel pretty comfortable with it feel free to go through these steps using the problem of your choice if you solved the problem go ahead and ask chat GPT for advice on how to improve your solution and if you don't solve ask chat GPT to help you solve it using some of the techniques we've learned in earlier scrims go ahead and pause now and start working on the fizzbuzz challenge welcome

back I hope that you had a good experience solving the fizzbuzz problem so I prompted chat GPT to give me the FSB problem and here is what it output the instructions are to write a program that prints the numbers from one to 100 but for multiples of three instead of the number print Fizz and for the multiples of five print Buzz for numbers which are multiples of both three and five print fizzbuzz that's the classic fizzbuzz problem best of luck solving it thank you chat GPT so here is my very quick solution to the fizzbuzz

problem it's a series of condition statements for every number between one and 100 we're going to check the number and if it's divisible by 15 meaning it's divisible by both three and five we're going to print fizzbuzz else if it's divisible by three we're going to print Fizz and if it's divisible by five we're going to print buzz and if none of these conditions are true we will simply print the number let's call this really quick so that we can make sure it works run and open up the console and if you go ahead and

scroll to the bottom you'll see that it is working as expected my next prompt was how can I improve my solution so that it's more succinct and efficient to which chat GPT responded the solution of the fizzbuzz problem is already quite good the logic is clear and it's easy to follow however if you're looking to make it a tad more succinct without sacrificing readability you might consider the following so it suggests a solution in which we are keeping track of the output so if the number number is divisible by three then the output will be

Fizz if it's divisible by five the output will be buzz and if it's divisible by both they'll be concatenated together into fizzbuzz and then we'll console.log the output or the number if the output is an empty string because if the output is an empty string that means that none of these conditions were met I'm going to replace my old solution with the new one and we'll uncomment and see if it works open the console and if you this looks like it is working as expected great Chachi BT did have one final comment which was that

the efficiency Improvement here is minor since the complexity remains o of n however the solution is somewhat more concise in this gr you've gotten some valuable practice using chat TPT to generate and solve the simple classic fizzbuzz problem really great work you are doing excellent especially if you aspire to work in big Tech learning about time and space efficiency in algorithmic and data structure focused coding problems is an unavoidable part of interviewing so let's talk about Big O notation if you're not familiar with Big O it's beyond the scope of the scrim to teach it

to you but I can suggest a few ways you can leverage AI to start familiarizing yourself with the concept for example you can ask for a succinct beginner focused explanation let's go ahead and read through this bigo notation is a way to express how the time or space used by a programmer algorithm grows relative to the size of the input it provides a high level understanding of which parts of your code might become bottlenecks as your data gets larger you can also ask for a slightly longer explanation with some examples go ahead and pause here

if you want to read through the explanation or you can ask for an explanation with specific JavaScript examples here are a couple of explanations pause now if you want to read through them the shortest and simplest explanation of bigo is that it has to do with measuring how long it takes your function to run or how much space it takes up in Compu computer memory AI like chat GPT can help you out not only by reviewing your DS and algo code for efficiency but by analyzing the time and space complexity of your Solutions take this

example my prompt is this is my solution to the two sum problem please do a code review of the solution analyze the time complexity and provide suggestions for improvement and I include a solution to the two sum problem chat gbt outputs a nice little review here comments on readability correctness efficiency and code style and make makes suggestions for a more efficient solution as you can see here under efficiency is where it says hm here's where your code can be improved because as you may have noticed my solution to the tuome problem was a Brute Force

solution basically it uses nested Loops to check every single element in the array and chat gpt's suggestion for a more efficient solution goes through the array and uses an object to keep track of the array items that we've already looked at it's faster to look something up in an object because you can go straight to it without having to to examine every single item in the array so a prompt like this is one way you can use AI as a tool for code review just be aware that there may be some inaccuracies from time to

time and that you'll probably want to seek review from human eyes as well here is another way you can learn about or familiarize yourself with bigo using chat GPT as we've seen I can give chat GPT a specific solution and ask it for a review but another thing I can do is have it generate different solutions that I can study so I can prompt some like this show me three example JavaScript solutions to the two sum problem each with a different time complexity include comments explaining each solution and its time complexity this will give me

three different solutions to the two sum problem along with code samples so I have a Brute Force solution a solution using a hashmap and a solution where it first sorts the array and uses a method called two pointers to look through the array in a more efficient way and just a reminder at any time you can pause the scrim to to look at these examples more closely asking for different solutions can be a really great thing to do once you've done the work of solving the problem yourself or of it least attempted to and now

you want to study different solutions so that you can become familiar with different approaches and how to talk about them as well as becoming familiar with their time and space complexity and be able to talk about it in terms of Big O notation let's quickly go over what we've covered in the scrim which is a variety of ways that you can use chat GPT to review and analyze your code you can use it to generate code reviews to make General improvements ask questions about efficiency and to learn and study time and space complexity and to

start recognizing how to describe the time and space complexity of different solutions using big on notation you can also use chat GPT to generate and study multiple solutions to the same DS an algo problems and ask for Solutions with different time and space complexities because a good way to become familiar with Solutions in Big O is to look at a lot of Solutions and a lot of examples none of this will take the place of practicing these kind of problems really the only way to master it is to practice solving a variety of questions over

and over again but AI might help you get there faster and contribute to a more well-rounded understanding of how to approach DS and algo problems what I have for you here is a problem statement and a solution to the palindrome number problem let's quickly read through the problem given an IND write a function to determine if it is a palindrome a palindrome is a number That Remains the Same when its digits are reversed in other words it reads the same backward and forward return true if the number is a palindrome otherwise return false so if

we look at this solution it basically takes a number reverses it then compares the original number with the reverse number and if they are the same it returns true because that means we have a palindrome else it returns false no palindrome so so down here we are calling the is palindrome function with the number 414 so if I run it will return number is a palindrome if I enter a random sequence of numbers and run number is not a palindrome what I'd like you to do with this is first you'll prompt chat GPT to review

the solution describe its time and space complexity and suggest improvements and then ask chat TPT to provide an explanation an example for a more efficient solution go ahead and pause now and complete this practice welcome back hopefully you have a much improved version of this is palindrome function if you had a look at it I'm sure that you may have noticed that we have some variables that don't have great names and maybe some of the logic could be shorter so let's see what chat GPT came up with I'm actually going to create a new file

called code review MD so we can have a look at chat gpt's response my prompt that I came up with was this is my solution to the palindrome number problem please do a code review analyze the time complexity and provide suggestions for improvement and I made sure to include my is palindrome function with the prompt here is chat gpt's code review go ahead and pause now if you'd like to read through the whole thing but basically as I pointed out before it says you could have some better variable names could rewrite your if else block

to be a little shorter and that you should probably handle negative numbers it also had some things to say about time complexity but said your approach is already quite optimal for this problem the improvements are more about readability and handling potential edge cases fair enough so let me go ahead and go back to index.js and we will replace the is palindrome function with the improved solution that chat gbt suggested in my opinion this is much easier to read so first we're going to make sure that is palindrome returns false if the input is a negative

number then we'll set two variables one for the original number and one for the reverse number do some work to reverse the digits of every number and then finally we'll compare the original number to the reverse number and this equality operator will return true if these two variables are equal or false if they are not let's go ahead and try this out I'm going to click run we still have our jumble of numbers in here and you can see that it said number is not a palindrome now let's try a palindrome just to make sure

we'll say 919 or run again number is a palindrome so we have a nice little improved function that is working as expected Chach GPT is extremely helpful when it comes to finding potential problems and inefficiencies in your code so I really encourage you to use that to your advantage excellent work the idea of using text based AI to practice Live code interviewing might seem a little strange and sure it's not going to be the same as practicing with a live person or come close to simulating the nail-biting experience of an actual Live code interview but

it can definitely help and that's what we're going to talk about in this scrim in a live coding interview you'll likely be expected to ask clarifying questions about the possible constraints and edge cases of the challenge plan out a solution and talk through the problem as you're solving it so let's take a look at how AI can help you practice these activities via role-based prompting to review role based prompting it's it's generally when you engineer a prompt that begins with act as a or Ur to encourage the AI model to take on a certain role

here's a prompt designed to help you brainstorm some clarifying questions that you might ask during a Live code interview act as if you a developer in a live coding interview and you've been given the problem below and ask me clarifying questions about the problem is if I am conducting the interview we have this palindrome number problem and this is basically a number that reads the same forward or backward here is an example of a palindrome number because forwards it is 121 and back backwards it is 121 chat GPT will generate a list of possible questions

that you might ask an interviewer during a live interview some examples are what should the function's behavior be with negative numbers since negative numbers have a negative sign in front of them they won't read the same backwards so should I assume that all negative numbers aren't palindromes good question how should the function handle singled digigit numbers how should the function deal with zero what about large numbers should it return a Boolean value and should I aim for a certain level of time or space complexity the cool thing here is that after chat gbt has generated

these questions I can then ask it to switch roles and answer these questions so my prompt will be now answer the above questions as if you are the interviewer assume the candidate is applying for an entrylevel position this will hopefully give us some ideas about questions an interviewer might ask based on the experience level of the interviewee so here are some answers as if chat GPT is the interviewer that's a great Point negative numbers are not palindromes so you're correct that you can return false for any negative input then if we jump down to six

here we can see that probably because this is for an entrylevel person it says try to come up with the most efficient solution you can but the most important thing is that it's correct once it's correct you can think about optimizing for efficiency in this way you can create a back and forth with the AI where you're almost like a fly on the wall of an actual live coding interview of course it's going to be hard to vouch for any kind of accur y as far as these simulated interviews go but it is really good

for brainstorming and getting ideas of things that you might say and things that you might be asked here's another potential strategy based on the above exchange write a script that models how an interviewee might successfully solve this problem while reasoning loud and communicating well with the interviewer TBT will then write you a whole script filled with things that an interviewee might say as part of a successful interview so the conversation kind of picks up where it left off the interviewer has clarified the answer to the interview's questions and the interviewee says all right thanks for

the clarifications now that we've established that we're only dealing with non- negative numbers we can start to plan our solution one way to check if a number is a pol androme is by reversing the number and then comparing the reverse number with the original number and then they go on to talk about their initial approach which you can pause if you want to read more about this so this might not be the greatest or most accurate portrayal of how a person would talk to another person but this is definitely an effective way to get tidbits

of information or angles that maybe you wouldn't have thought of or haven't thought of before so think of it as a good brainstorming tool and those are some creative ways that you can use chat GPT to help you get better at Live code interviewing how much do you love writing resumés and cover letters if you're anything like me probably not very much luckily what better use for an AI language model than to generate words you can use AI to write all sorts of job search docs you can get help with writing résumés cover letters elevator

pitches or one of my favorites using it to help you talk about your accomplishments that said it's good to keep in mind that AI when it comes to writing job docs especially résumés it's a good starting place but certainly not a destination I would not recommend having AI fully write your resume but but you can use it to work on improving bits and pieces of it which I'm going to show you today so I'm going to use a couple of strategies here I'm going to provide some context I'm a frontend of developer who needs a

general resume then I'll do a role-based prompt act as a resumé writing expert and ask me questions about my current job interview me as a resumé writing expert and then use my answers to create two resumé sections one about my work experience and the other about my technical expertise chat gbt will then ask me a few questions about my work experience like my job title and what company I worked for how long I've been there my main responsibilities key achievements and what technology tools are language that I used and I find that this format of

having AI ask you questions be really helpful if you kind of have blank screen syndrome and when you sit down to write a resume you're just kind of staring at the document not knowing what to write in this way AI is a really good idea machine so it then goes on to ask me about my technical expertise and then and I'm going to go ahead and make up some answers so I was a front-end developer at excellent software company for 2 years then you'll notice that I wasn't exactly sure how to answer this second question

can you describe your main responsibilities so I'll say I want you to ask me more questions to help me describe my main responsibilities I also asked for some help talking about my key achievements or projects that I'm proud of I'm simply going to answer I can't think of any what are some examples based on my job title so again using AI as a brainstorming tool then I make up some stuff quickly for the technical questions and chat gbt says great thank you for the information let's dig a Little Deeper so it asks me questions about

my main responsibilities and key achievements I go ahead and jot down some quick answers to these questions and from our interview session chat gbt generates a section that I can put on my resume I was a friend and developer at excellent software company at these dates and here are the things that I did based on the information that I gave the AI so a lot of this sounds pretty good specialize in optimizing web pages for maximum speed and scalability ensuring high quality graphic standards and brand consistency leading code review processes is maintaining code quality and

encouraging best practices Mentor interns guiding them through technical processes and providing valuable industry insights your own results will vary and you'll definitely want to go through and personalize this but look at all of the resume fodder that I was able to generate in just a couple of minutes super useful it then gives me a list of key achievements and Technical expertise and like I said you're probably going to have to work on the formatting and to decide for yourself where you would want to put this information on your resume but especially if you're someone who

who struggles to talk about their achievements these are some good guidelines this is also great for brainstorming if you have little to no experience like for example if you've just finished a boot camp and you want advice on how to talk about things on your resume I prompt I'm a front-end developer who is looking for my first job I have experienced working on a project management application as part of a six-week internship as well as several completed boot camp projects act as a resumé expert and make suggestions for how I can craft resume we look

at the outp puts advice is as a new front end developer looking for your first job your resume should focus on your relevant project skills and education and offers some suggestions for structuring your resume some of this advice is arguable I don't know about putting an objective statement on your resume I've heard that that is getting to be a little old-fashioned but again that's something that you would want to check for yourself and your own specific needs and so these are just basically suggestions for sections that you could put on your resume and here's an

example of what it might look like so front and developer intern company name dates along with a description of the things you did and any certifications that you've earned another thing you can do that comes in really handy is I have gotten these qualifications from some job ad on LinkedIn and I am going to dump it into chat GPT and say I want to apply for this job here's a description of my current position please make suggestions for how I can tailor this section for the job that I want ask clarifying questions if necessary and

then here is where you might put in a description of your current job job but I'm using the fake one that I use chat GPT to generate for me so I think this is pretty cool this prompts chat GPT to ask me questions about my experience related to the job qualifications that I gave it do you have experience with web accessibility standards or guidelines how comfortable are you with working independently and so on so I'll go ahead and answer all of these questions and chat GPT will use that to tailor my resume this could potentially

be a really huge timesaver at this point I've spent a long time having a conversation with chat TBT about my skills and experience going to take advantage of the back and forth we've had so far and ask it to write me an elevator pitch while prompt I have a phone screen with the recruiter next week based on all the information I've given you so far write a 30-second elevator pitch that I can use to introduce myself pause this and read through it if you want it writes me a nice short speech that I can use

to introduce myself and talk about my skills in a really succinct way I can also take advantage of this conversation by starting to ask chat GPT how I can answer certain interview questions especially one that a lot of recruiters ask which is tell me about yourself and it gives me some suggestions for how to do that but stay tuned because we'll talk a lot more in the next roomm about how to use AI to practice interviewing so see you there we've previously discussed ways that AI can help you with technical interviewing but it can also

o help you with behavioral interviewing which can sometimes be just as big of a challenge to find out how chat gbt can help with behavioral questions I decided to start by asking it how can you help me as a friend and developer practice behavioral job interviews it responds behavioral interviews typically involve questions about your past work experience and how you handled specific situations in the workplace and it says it can help us do mock interviews use the star method which is a way to structure your interview answer questions it can give feedback information about industry

Trends and knowledge and can also review your interview questions the first thing it says it can help with is mock interview questions so I'm going to say let's start with some practice questions the result is a list of questions based on teamwork problem solving technical skill leadership and so on these are all broad topics so I'll start by concentrating on one of these areas first then I'll say I want to specifically practice the star method please give me a star method example for the first question if you're not familiar with the star method hopefully this

will help you understand it so our response is absolutely here's an example of how you might use the star method to respond to the question can you tell me about a time you had a conflict with a team member how did you handle it so you first explain a situation the example is that I was working at excellent software company we were working on a large project with a tight deadline and a team member let's call him Bob who is constantly missing our daily standups and failing to meet his coding deadlines the task is that

we felt we had to address the issue and this is the action that we took we had a one-on-one meeting with Bob to discuss my observations and then you talk about the results Bob was initially defensive but he appreciated my Approach and opened up about some personal issues that were affecting his work and after our talk Bob's participation and output improved considerably way to go Bob so it can be pretty difficult to think of scenarios to talk about during a job interview so I find these examples to be very helpful and in my interviewing EXP

experience some companies will actually ask you specifically to use the star method it is a really worthy Endeavor to get used to how it structured and get used to answering interview questions that way I've seen an example I understand the star method a little bit better now I need help brainstorming some scenarios that I can use to answer this question what are some situations where a front- end developer might have conflict with a team member this is a way that I can start to think about my own personal story so hopefully the AI is going

to come back with something that will remind me of something that happened to me at work so that I will have a good answer for the question how do I deal with conflict with a team member comes up with several good possibilities differing opinions on design code quality misalignment on priorities project Direction disagreements communication issues and workload imbalance hopefully a list like this will help you think of situations that happened in your own work experiences that you can talk about during a behavioral interview I can also ask for behavioral interview questions related to a specific

area that I want to work on say I'm looking for a job as a lead developer or an engineering manager and I want to practice talking about my leadership experience I can prompt please ask me five behavioral interview questions related to my leadership experience and AI has a lot of good ideas for that taking initiative resolving conflict making decisions mentoring or leading a project it then reminds you that a really good way to practice answering these questions is by using the method I can ask for example answers based on my experience level I'm asked the

question what are your strengths and weaknesses not only can this be a really difficult question to answer because you're never quite sure what they're looking for when they ask this question but your answer might be different if you're an entrylevel developer versus a principal level engineer so the prompt is I'm interviewing for an entry-level web developer position how can I answer the question what are your strengths and weaknesses the AI comes back with as an entry-level candidate you want to highlight your strengths and weakness NES in a way that communicates your potential for growth your

ability to learn and your dedication to the profession so your strengths might be more focused on your education internship or personal traits that will help you succeed in the role and here's an example of how you might answer and you can pause if you'd like to read through it the some of the same ideas for answering the weakness portion of the question and posits that the key is to show that you are aware of areas Improvement and that you are actively working on them so it uses the example of working on my familiarity with certain

web develop ment tools and Frameworks there's still a lot for me to learn but here's all the things that I'm doing to make sure that I'm learning and getting hands-on experience this is some pretty decent advice but of course you'll want to tailor it to your specific situation as we're just using the AI to generate ideas and jumping off points here's a prompt that will encourage chat GPT to act as your interview coach I am interviewing for a junior front and developer position and I want to practice answering questions about my technical knowledge acting as

my interview coach ask me questions and provide me with feedback on my answers with this kind of prompt you can get an endless number of questions essentially about your technical skills and get a lot of practice answering a variety of different questions so this is a really powerful tool the back and forth goes something like this it starts with a double and triple equals equality question which I would say is pretty appropriate for a junior level developer so I went ahead and made up an answer to the question talking about type checking and type coercion

chat gbt says my explanation is great thanks chat GPT and then goes on to ask me another question the question that it asks is can you explain how CSS flexbox works and give an example of a scenario where you choose to use it in my opinion this is a super cool thing about AI if I were reading this off a list that I found on Google and I didn't know the answer I would simply have to move on to the next question or do some research and formulate an answer without a lot of feedback so

let's pretend that I don't know quite how to answer this question so my follow-up prompt will be I'm actually not sure how to succinctly explain how flexbox Works can you give me an example of a solid brief answer and that will help me answer it a little better or collect my thoughts so I can answer it a little better next time then moves on to a third question how would you approach making a website more accessible what are some key considerations to keep in mind this time I'm going to answer this question incorrectly my answer

is to make a website accessible you want to make sure that you have a really good URL that closely matches the matter of your website otherwise your customers might have trouble finding it chat GPT responds that's a great Point regarding search engine optimization but when we talk about accessibility and web development we're generally referring to making web content usable for people of all abilities and disabilities and then it gives us some pointers for how to enhance a website's accessibility what I think is really cool about using AI to practice interview questions is that you could

easily go on Google and find a list of these questions somewhere and maybe even read the answers but what you can't get is Real Time feedback or help with how you might go about answering the question and you might be able to find the answer to the question but it's not going to feel as interactive so I find this a lot more fun and engaging way to practice these kind of interview questions I hope you found these ideas useful I personally find behavioral interviewing to be really tough and I appreciate having a brainstorming buddy like

chat GPT so happy interviewing and I'll see you later congratulations you finished the course and are now a capable prompt engineer and superpowered developer who can harness the power of AI to accomplish a huge variety of tasks let's go ahead and recap a little bit of what you've learned we covered the basics of prompt engineering specificity context technical language controlling the length and formatting of responses breaking down tasks and prompts iteratively optimizing prompts rule-based prompting and prompting by example we also covered AI assisted coding that's using natural language models to generate code with pseudo code

and pseudo language also generating test cases and edge cases debugging converting and documenting code and avoiding pitfalls like hallucinating and copypaste loops and finally we looked at how you can use AI to help in your job search including learning generating and practicing DS and algo coding challenges tailoring resumés and cover letters and practicing interviewing you've done an incredible job now go forth and prompt engineer something amazing