Cursor Tutorial for Beginners (AI Code Editor)

today we're checking out cursor AI an AI powered code editor that promises to make your development significantly easier now I've been using this for the past few weeks it's pretty interesting and I wanted to make a quick tutorial on it to share with you what I've learned and some of the best practices that you can apply especially if you're a more beginner programmer and you haven't used a ton of these AI tools before you don't know exactly how they work and how to get the best results out of them so with that said let's dive into it and let's learn about how to use cursor AI now at this point I'm going to assume that you've downloaded it if you haven't give it a shot it's free there also is a paid version if you want some more features and unlimited usage but I'd recommend even if you're an experienced developer because it is pretty cool and it kind of makes you question how you've been working in the past and if this is something that you might want to switch to anyways once you've got cursor AI open what I recommend doing is just opening a new folder so to do that you can go to file and then open folder and then from here you can just make a new folder on your desktop for example and open it up that's because a lot of beginners actually just work in whatever the default folder is that it starts you in and then they can kind of lose their work if they don't know where that folder location is or it can be a bit more difficult to get back to it now especially if you're a beginner here what I'd recommend doing before you start using any of the features that I'm going to show you is making a little bit of a plan AI works best at solving really small discret detailed tasks the more specific you can be the more context and information you give it the better results you're going to get yet you'll notice if you just ask it to do something like generate me a to-do list application or give me a portfolio website or you give it like a really General one or two sentence long task you can get wildly different results and something that you're not looking for at all and once it starts going in One Direction it can kind of branch and just bring you all over the place if you don't know what you actually want so make sure you know what you want you have a clear vision of what it is that you want to build and I highly recommend at least jotting down some notes or even drawing out a picture piure of what you want the user interface at minimum to look like because that's really going to help guide you through this process anyways let's imagine you've got a plan at this point you know what you want to do and you've kind of thought about it at least for a few minutes the first feature I want to show you here is the compose feature now or the composer feature whatever you want to call it now in order to enable this uh you're going to have to go to file and go to preferences cursor settings and then click on features here now scroll down you should see the composer and then you can enable it by just selecting enabled I think by default it's disabled so that's why I'm mentioning that to you okay so now that we've got that what we can do is press control I and that's going to open up the composer view if you're on Mac it's going to be command I now this is what can actually edit multiple files at the same time and create new files for you so this is what I like to start with when I'm generating a brand new application and then if I want to do a major feature change or there's something that's going to apply to a ton of different applications or sorry a ton of different FS files I'll use this okay so first thing I'm going to do I'm just going to open the control panel so it's a bit larger and I can kind of see this here and I'm going to ask it exactly what I want it to do all right so I've written a quick prompt here you guys can breathe through it if you want but the important thing is that I'm specifying exactly what I want it to do and I'm telling it what framework languages Etc I want it to use now if you don't know you can ask it to recommend to you which ones you should use but I do recommend doing a bit of research before you just dive into this and use like a random language or random framework and you can actually ask other AIS or even the one inside of this app which I'll show you in a minute hey I want to build this type of application what's the simplest way to do that and then it can give you some recommendations point is I'm asking it that I want to use uh Express which is a JavaScript framework for the back end SQL light for storing the uh recipes which is my database and I want to use JavaScript HTML and CSS with Tailwind for the front end okay so I'm just going to hit enter here and what's going to happen is it's going to start generating a ton of different files for me so it will give me some instructions because it can't quite do everything like running for example terminal commands uh but it can generate a majority of the application so let me zoom out a little bit uh just so that we can see this a bit better okay and let's go back here all right so you can see that it is generated the server for me we have the index we have style we have script we'll just wait for that to finish and then we can actually just accept all of these changes and it will apply to our app all right so I finished now I can go and I can look at all these files I can ask it for revisions to change things around pretty much whatever I want and then I can just accept all of these changes or I can accept one file at a time so I'm going to go accept all and this is very similar to what you do in like a GitHub pull request or something uh and you can see that it's going to generate these files for me so let me get out of the composer view now I have my index my script my Styles and my server okay so that is the first feature that is the composer very useful for generating bigger features a lot of code getting you started but sometimes you can get a little bit crazy and also it's difficult to review all of the code that's inside of there so I want to show you the next feature that I found myself using the most and this is the kind of the general chat view I'm not sure exactly what they call it but if you hit contrl l or command L you're going to get into this chat now in here you don't actually have to ask anything coding related but this does have access to the entire context of your code base so you can ask about a particular file and it can go and look for that or you can specify context yourself so what I can do is press add for example and I can add different files so if I want to ask a question about my server file I just put server inside of here now I can also do things like ask it to search on the web I can give it an image I can uh what is it link different documentation so if I go to app mention you see I could give it a PDF file I can give it a folder code web docs git like there's so many different options here and the more context you can give this the better it's going to perform so feel free to go in here and mention a specific file or mention uh like a website that you wanted to go and read from for example if there's like a brand new feature or framework you could link the uh documentation to that and then get it to read that before it generates you the response okay so anyways let's say we want it to do something inside of server so I can say server I say okay this is nice but I want to add for example more recipes so say okay great can you add some new recipes please make them more unique okay so let's hit enter and let's see what we get all right so we got some code here and we could just manually copy this in we also can press apply if we do that it's actually going to make a diff inside of the file so you can see that it's showing us exactly what it's going to add uh right inside of here and this is completely different from something like Chachi BT where if you had uh you know comments like existing code or insert sample data or whatever you need to actually like copy parts of this and kind of splice it into your file here this can just do it for you so what I'm going to do is just accept this and you see that now we just get more recipes added inside of here and by the way if I didn't like this I could just reply to it directly here with this ask button now it's referencing this particular response and I can say something like hey I don't like this recipe swap it out with this one so just a really quick way to inject that context and again the context is so important when you're coding you want to give this as much information as you possibly can that's how you get the best replies so that's the chat window I think it's pretty straightforward you can men mention the context you can choose the different model you want to chat with you can link documentation and while we're here I will mention that there is actually the option to kind of search through your code base so you can just do the default chat which is hitting enter or pressing this button or you can do something like say you know where are my recipes defined so if you're looking for a specific piece of code maybe you're in a huge code base it's kind of difficult to navigate and then you can press on this button and it's actually going to search through the whole code base you can also do Control Plus enter or command plus enter obviously more effective in a larger code base but you see it now tells us kind of where this is and gives us links to the different variables to the files and notice I can actually click on these and go to exactly where they are uh which is pretty interesting so if I go to sample recipes brings me to that variable anything that's blue is clickable and it's really uh kind of easy to navigate through the code base okay so that's the chat window a lot of stuff you can do here especially with the context but now what I want to talk about is kind of the inline completions so while we're typing code like let's say we actually want to you know edit something ourselves so if we go to for example index. html uh maybe what I want to do is add another select box for some reason so I'm going to say okay select and then notice right away it gives me really long Auto completion so if I hit tab that's going to complete it for me I can press enter go inside of here it's already given me a bunch of options and I can generate code significantly faster using these so this is kind of the same one that I already had but if if I wanted to I can change this around and rather than mood select I'm going to go maybe time select or something and then we'll have an option and what else are we going to do here breakfast lunch dinner okay let me just press tab correctly here and you can see that I can kind of insert those inside nice now let's say maybe I just want to modify this block of code here I can highlight on it and then I have two options I can chat with it crl l or I can do contrl K and control K is going to bring up kind of the inline editor so if I do control K I can give this instructions on what I want it to do with this so I could even just say something like delete this I don't know why I would do that but I could and you can see now it generates the diff and then I can accept that or I can reject it if we go back here I'll say add some more detailed options please okay let's hit enter and then it again will give me the diff and you can see that it has early breakfast breakfast lunch Etc okay let's accept that and there you go now we have our options so as kind of a mini recap if you want to generate a ton of files you're creating new files you're doing like a big feature change it's going to be touching a lot of the areas of code then if you open up the composer with control I or command I you can make a new composer or use an existing one and then you can read through all of these files like something like a GitHub pull request and kind of make changes that way now if you want really smaller kind of targeted modifications you can just highlight lines of code and you can hit for example contrl K when you do this right in line in your code that opening up that uh other window you can make the change so this is like a really fast way to change it in the editor when you know exactly what you want and then if you want something that's kind of in between that and maybe doesn't even have to do with a code change you can open up the chat window now here you can ask pretty much anything that you want you can get it to recommend changes then directly apply those you can also ask it to for example explain code so maybe know I copy this and I paste this inside of here notice that context is automatically added when I do this and I can say hey can you you know explain these lines please okay and now it's going to go there explain it and kind of give me a description of what's going on so the chat window is more for that whereas in here it's to make a change and actually modify a section of the code in a more targeted approach so that's cool the last major feature I want to show you is that we can actually use images to generate code as well as well so let's do that okay so I just grabbed a kind of random image here from the web of like a really simple login form now obviously you'd maybe take like a figma file or something a designer sending to you but the point is you can take an image and you can pass it here and get it to generate code based on that so what I can do is pick the image so let's go I think it's this one right here it's going to show up I'm going to say can you please make a new HTML file that contains this form make it look EX exactly like this and let's see what we get so it generated some HTML but notice if I press on apply it's trying to apply that into my index. html now I wanted a new file and that's one of the things that this kind of gets wrong a lot in the chat it's not going to make the new file for you unless you use the composer so I need to make a new file myself so I'm just going to go form.

HTML okay and then I'm going to apply this so I'm going to click cancel go back into form when form's open it's going to default to using that and I'm going to go to apply notice it now says for. hp in here and then I can accept this so I'm going to hit control shift y to accept that and then let's open this up because I want to see what it actually looks like so let's reveal in file explorer let's open the form and that is pretty impressive that that is already created so if we go back to the image I was not expecting it to be that good uh let me open up the image again this is what the image looks like and this is the result that we got now sure there's a bit of an issue with the spacing but at least this like diagonal line got filled in which I was expecting it not to do yes there's some issue with the padding and the font but generally that's pretty close um and that's pretty impressive again I was not expecting it to give me that good of a result so that was pretty impressive and overall cursor has been super cool to use and it's definitely supercharged my productivity now with that in mind I'm only able to use this really effectively because I already know how to code now sure you can use this as a complete beginner with minor experience but it's going to be significantly harder to actually get anything done because if you do get stuck it just really is a little bit of a nightmare uh to try to figure out what's going wrong with the AI fixing the files and a lot of times I do find myself having to dive in there and kind of make the change myself now with that in mind if you do want to learn how to code or you want to learn even how the llms work or get more into data science machine learning kind of all of those interesting and new upand cominging Fields I recommend that you check out the sponsor of today's video brilliant brilliant is where you learn by doing without thousands of lessons in math data analysis programming and AI they adopt a first principles approach ensuring you understand the why behind each concept every lesson is interactive engaging you in Hands-On problem solving which has proven to be six times more effective than simply watching lectures the content is developed by top-notch Educators researchers and professionals from renowned institutions like MIT Caltech and Google brilliant emphasizes enhancing your critical thinking abilities through active problem solving rather than memorization as you learn specific subjects you're simultaneously training your mind to think more effectively consistent daily learning is crucial and Brilliant makes it effortless with their bite-sized lessons allowing you to acquire meaningful knowledge in just a few minutes each day perfect for replacing idle screen time additionally brilliant offers a comprehensive range of computer science and python courses as well as extensive AI workshops guiding you from a complete beginner to an expert through practical Hands-On lessons try everything brilliant has to offer for free for a full 30 Days by visiting brilliant.