How To Use Cursor AI For Beginners

that's it submit and proceed I'm going to show you everything you need to know about cursor the new AI code editor as fast as possible by the end of this video you're going to have a complete understanding of how to leverage cursor as a code editing software in addition which is probably bigger here is I'm actually going to show you how to take code like this and put it into a development environment that allows us to see the actual outputs of what the code would look like this is super cool is I was able to create this little dinosaur game if you're familiar with Google Chrome very fast watch this using cursor like very fast it took me to do one or two sentences of layman terms to build out a game like this so let me show you how from start to finish everything you need to know about cursor AI to start off here go ahead and just download it it's completely free to start pricing wise there is a free tier $20 a month $40 a month but the best part is that there's a free tier so you can go to see if you even like this once you download it you're going to go ahead and launch in it's going to require you to create an account with cursor for free and on top of that ask some prerequisite questions but once you're launched in this is going to be your first project let me outline a couple things here as if you've never seen a single line of code I'm make this as simple as possible first major thing you need to identify what project are we in right now we are in the project of cursor tutor you can see that in the search bar here and you can see that over here in the side tab as a side note as well I'm probably going to do a ton more videos on cursor cuz this was actually a lot of fun second major thing you need to identify is what the heck's going on over here with this beginning project here we are given a couple a couple of things so if you can move over to projects JavaScript this is your index. js here is where we're going to build out our environment that's going to showcase on a web browser that you'll see later in this video but here's all you really need to know in the way this code is currently structured it's very much so where the rendering of the app the CSS the j6 everything's kind of just jumbled up into one file when you're actually coding out real software you definitely don't want to do it like this for the purpose of this video we're going to go ahead and leverage this file to Showcase from start to finish to even render this as a side note package-lock Json this is where we install dependencies as an example here this is very much react based but just to give you like more context of what a dependency is imagine that we wanted to integrate a payment system like stripe that would be a dependency our package. json is where we give relevant script commands in order to run this and also a bunch of other stuff when it comes to just the underlying application itself don't worry that do make a lot of sense you'll learn more as we go here and actually let me show you the first major feature you need to know about cursor AI which is your ability to conversate with your code so for example here let's say I'm looking at this code and I'm like what the heck is going on I can simply highlight all this and hit command l or control L what this allows us to do is actually conversate with the underlying file so for example I could say what does copy mean and for me asking that question what you'll see is that we can scroll down here and it give us idea of what this even means it helps you find bug earlier in development process It prepares your app for future react features Etc so this is very specific to the strick mode and what does strick mode even mean I mean you can go as far as actually asking a question on the underlying file itself as well and for anyone that's been coding for a while here let me show you a really really cool feature here so I can suit new chat they're making some type of chat interface here and we can actually chat with multiple files within a project so I hit this little add button here I could also add you know the package.

json maybe we have a CSS file another JS file so for example if I add the readme just to gut check this to show you what it could do here we only have the index. js but we also have the readme this is all that's in the readme so just to show you that this works in the context of that it's actually able to read multiple files here I can simply say output what is said in the read me and what is the header text so we're looking for an output of you know the MPI start and then also hello world which we can see both in the index. js and the readme if you're like Corbin I've been developing for 10 years this is too simple chill out I'll do more advanced tutorials later on on this channel for now this is just to give you an idea if you've never coded how to approach this that's the chat situation there's definitely more we can leverage there especially in the context of larger projects for now though let's move to one of its bigger features here which is code generation but before we do that and to be honest with you this is probably going to be the most watched part of this video let me show you how to actually run this so we can see Hello World in a browser first things first do the command line of npmi npmi next we're going to go into the specific directory of where all this code is even located what you'll notice is that that is why I referenced earlier in this video cursor tutor this is the name of where our code is found in but more specifically what we care about here is the package.

json this is what's going to allow us to build said react app as you'll see from these scripts here start build test eject therefore we need to find this directory within our computer first major thing you need to do PDW this is going to give you the first half of the path for what is relevant to us all right went ahead and enlarge this a little I already know some of y'all we're about to put something in the comments like Corin this is this is too small no don't worry your next in strength might be okay well if that means that's my path I'm going to go ahead and add cursor tutor to get me to the file of where all this code exists not so much to actually access the path that we'll have our package. json here is going to be the structuring I'll make sure to leave this in my description of this video or maybe it will be a comment simply put in your path that we found earlier also put incursor tutor projects JavaScript to clarify this what's incurring here is that we're going to cursor tutor projects JavaScript and then package.