Project Setup & AI Tools

[00:00:00]
>> Sabrina Goldfarb: So the repo can be found at sgoldfarb2/FEM-for-Frontend-Masters/practical-prompt-engineering-code-exercise. This repo has a branch called Reference Project, and that is what I showed you all earlier. So if you wanted to pull down the code for the reference project, you are welcome to do this here. I will be working on the main branch, which is currently empty other than a README. And I will be adding code to this main branch.

[00:00:29]
I will push up the code every time we take a small break. So if anyone gets lost or their application isn't working for some reason, maybe they've decided to go and try a couple different things and it just hasn't worked out, you can totally wipe the slate clean, pull down my main branch, and utilize that for your Prompt Library. So no stress if anything goes awry, right? Something else that we have available to us in addition to our codebase at sgoldfarb2/FEM-practical-prompt-engineering-code-exercise is we also have at sgoldfarb2.github.io/practical-prompt-engineering, we have a course outline, and we can see that we've already been through the introduction of this course outline, and now we're into the core prompting technique section.

[00:01:21]
If you click into these sections, you're going to have an overview of what we're going over for the section with some interesting facts and some of the things we're going over, and then you're also going to see that there are prompts we can copy. Some of the prompts we'll be utilizing today are extremely long, so I wanted to make sure you all had them accessible to you to follow along with me. So I'll be typing in some of the prompts.

[00:01:46]
I'll be copying over some parts of the prompts, and now you have the ability to do that as well by utilizing this course outline. So if you ever get lost and need to know where the prompt is, just take a look at the section. Like I said right now we're in standard prompt, click into it, and then you can see down here it says to see an example of a standard prompt in writing code, let's ask our AI assistant to write some code for us, so you can see that then you can copy the prompt and paste it into your editor of choice or your AI assistant of choice.

[00:02:16]
So I will be using this all day as well. I might adjust some prompts as we go depending on the behaviors of the models. Remember, they're nondeterministic. Sometimes they're going to have really good days and listen perfectly, and some days they're not. But now at least you have all of these prompts open and available to you as well. OK. Last thing is for myself, I will be utilizing VS Code, and I will be utilizing Copilot.

[00:02:44]
The reason for that is because VS Code is just the editor I am most comfortable with. I also really enjoy utilizing Cursor, so if that's something you've been wanting to experiment with, please feel free to use Cursor. If you prefer to use an IDE that's integrated into a browser, maybe like Repl.it, you're welcome to use something like that as well. If you are using VS Code with me, I highly recommend going into your extensions tab and searching for a few extensions.

[00:03:15]
The first one is Live Server, and the reason for this is because we're going to be generating HTML, CSS and JavaScript files. And with Live Server, I'm able to go down here. And you can see this Go Live tab, right? And if I hover over it, it says click to run live server, and this is coming from that Live Server extension. So when I create HTML CSS and JavaScript files, all I have to do is click Go Live and I can see my localhost in the browser.

[00:03:48]
So I highly recommend if you're using VS Code, you add Live Server to it. We can also see, because I'm utilizing GitHub Copilot, that I've downloaded the GitHub Copilot extensions. There is a free trial of GitHub Copilot for anyone who's interested in using it. I believe Cursor has a free trial as well. You're also super welcome to just utilize chat, but you're going to have to remember to copy and paste all of your code each time, which gets a little messier, which is why I've decided to use Copilot for this course, because it can directly edit my code instead of me having to copy and paste it in big chunks back and forth.

[00:04:25]
So all you have to do to search for that is search for GitHub Copilot. You will see two different extensions, GitHub Copilot and GitHub Copilot Chat. We'll be using GitHub Copilot Chat, but when you click to install that, usually they both install, which is totally fine. Another option that you have if you really enjoy using VS Code or I believe IntelliJ, but you don't want to use Copilot, you can also download Claude Code, which has its own extension and actually has a really cool beta out with their own chat right here that you can see as well.

[00:04:59]
But I won't be using that today as that's in beta, and I want to have a really seamless experience for you all, and I find that Copilot does that. Like I said, you're welcome to use any IDE you want, integrated development environment, right? You can use one on the browser, on the web, you can use one that you have downloaded. The only thing I would say is when you are prompting your AI assistant for the first time, ask your assistant what is the easiest way to then run your code.

[00:05:29]
For myself, I've added that I want to be able to use Live Server and press Go Live to see the application so this way the AI application kind of knows not to add any additional dependencies like Python or anything so that I can just go live, right? So if you're using something different, just prompt to add that in. OK. Last thing about Copilot is if you've never used it before, you might not know where to find it because I don't personally find it to be super intuitive to find.

[00:06:01]
If you look at the very top of my screen next to my folder name, which is FEM, right, here's my folder. You'll see this sparkly chat that says toggle chat. If I click into that, you are going to see Copilot. Great. That's all you had to do. Click on the top sparkly chat and Copilot opens up. If we look in our Copilot, we can see that there are a few things, right? Right now it says build with agent mode, we've got a bunch of things up here.

[00:06:32]
So we can see over here, we have to start a new chat, which we'll be doing a couple of times today. We can show our previous chats, so if you're ever interested in looking at your chat history, you can go right there. You can do some things to configure your chats. We won't be doing that today. We don't need to do anything too exciting to configure our chats. Over here we can see our views and more actions, and then the important stuff is way down here, right?

[00:06:58]
There's a place that we can add context. We don't have any context to add right now. I'm on my main branch. All I have is a README that doesn't really say anything that I need for my application, so I'm not adding any context. We can see though that because I'm sitting on the README, README.md is automatically within my context. So if I'm in a file within my directory, that's automatically going to be sitting right here so that I can quick add it to my context.

[00:07:31]
You can also add context using the pound or hashtag for the younger generation. You can add extensions, you can utilize commands. Then down here, the last couple of things we're going over are agent, ask and edit modes, right? So we can either just have agent mode where it's going to help us build and just build with us and for us. We can go to ask mode where we can simply ask about our code. Hey, I have a question about this.

[00:07:56]
Like, what is this doing? How is it doing it? Or we can go to edit mode where you can edit in context. I will be sitting on agent mode because like I said, I don't want to write any of this code today. I want my prompts to write them for me. And lastly, here we can see that we have our model picker. And this is a super cool thing because we have access when we're using Copilot or Cursor to a ton of models.

[00:08:20]
So if we have a pretty slim budget and we want to make sure that we are testing as many models as we can, I highly suggest trying to use Copilot or Cursor or something like that that gives you access to a bunch of models. And this way you can kind of say, OK, maybe today I want to try GPT-5, but maybe tomorrow I would use Claude 4, or maybe I have a really simple task so I can use a smaller model like Sonnet 3.5, right?

[00:08:47]
But you can kind of get a feel for all of the different models that you can use. Today, because we're going to be using Claude in chat, I thought it was only appropriate to utilize GPT-5 in Copilot Chat for as long as it'll behave for me, just because I want to give you all the experience of utilizing different providers and different models and seeing how they behave differently. So that's the only reason I'm using GPT-5.

[00:00:00]
If you don't have access to GPT-5, you're super welcome to use a Claude model, a smaller GPT, whatever it may be, it'll be fine.