Cursor AI For Beginners: Build a Website
Let's learn how to use Cursor AI📅 2024-09-01
Transcript
[00:00] now this isn't crazy but keep in mind I've only been at it for like 3 minutes looking pretty good so far while using cursor AI I'm going to show you how to build a ling page in under five minutes my goal of this video is to really show you the power of cursor AI when it comes to web development sound good let's jump in your first question might be Corbin how did we even get to this point how is there code over here how is it that I can just do this and then it just automatically saves over here if you want to learn how to do this check out that first video there I'll walk you step by step on how to set up your first project so you can actually start creating some code here and seeing the
[00:30] live results that's not the purpose of this video purpose of this video is showing you how to create a landing page as fast as possible while using cursor AI what's super cool about this comparative to what we've seen in the past in the industry is that we're actually doing Rock code here which is amazing this allows us to copyright it if we choose to do so gives us overall more value and allows us to create out applications that don't require us to pay absurd amounts of money this is cool as what we saw before in the industry when it came to something like Claude artifacts is that yeah we got our outputs yeah we had some code but it wasn't really within the same house of
[01:03] we own it so now we own it let's proceed let's create this landing page if any of this seems crazy or like Corbin you skipped some steps or how do we get here or what's even going on that means you ski some videos of mine so check out this playlist find the video in the very beginning as we jump some steps here to show you how to do this so right off the bat here this is why cursor AI is so powerful we can highlight an entire file like this hit command K and essentially ask in Layman dictation what to do next what makes this cool is that if you have coding terminology you've coded in the
[01:33] past you'll be able to finer tune your prompts but even if that if you just ask it to do something in lame IND dictation it will still do it even if you use no coding terminology this is why this is becoming a big deal here so in order to prove to you that even if you have zero coding experience you can still leverage cursor AI I'm going to use lame IND dictation when I prompt actually before I prompt that let's add some images that we can use within the actual landing page itself to do so we come over here so right now what you'll notice is that currently we're importing this little react Emoji or GIF from The Source
[02:06] itself now I go over this in other tutorials but you know just for good structuring here we're going to hit new F new folder in this folder we're going to call it images here's where I'm going to drag all my relevant images here we go so we got the images of dog chart puppy one puppy two puppy three or wait bone so the idea here is I'm going to create a landing page for a dog it's like chew bone going use these images what you'll notice is that within our code we're going to be able to add round wck uh basically add some shadow effects
[02:37] it's going to be pretty cool here so coming back to the code here I'm going to create a pretty lengthy prompt here but that's just to show you the potential of where this can go so again command K oh you thought we were just going to do a small prompt here oh no no no let's go all the way let's push this to its limits I'm not going to read all this for obvious reasons but let me read little parts and identify why I did what I did first off for context let's design a landing page for chewy bones a premium dog toy designed to keep dogs entertained and engaged page should highlight key features and benefits of chewy bones good so far next thing I want you to identify here is how I
[03:07] reference the images that I want to use within the lending page so it is going to be Source images than the image name Source images puy 1.png Etc next the actual underlying structuring of this is kind of how I want the landing page to be structured a few quotes or reviews from satisfied dog owners information on available size colors pricing a lot of this I'm leaving up for grabs for the AI to do itself I'm actually really curious to see if this works let's hit submit here we go oh yeah this is not a game anymore this is not a game now when we get the end of a prompt it's going to
[03:38] show the deleted code and then it's going to show the new code accept I'm going to hit command save here let's see what we have so far first round here obviously we need to shrink down this header image but if we scroll down here we're getting somewhere so we got our first little titles here huge images so right off the bat it's not giving CSS for these images that's why it's a little crazy although to be fair if I made this in 2004 I already know some of y'all would have converted on this let me go ahead and switch up these images a little so what I'm going to do in this context is I'm going to hit command a
[04:08] here command K I'm going to say looks good for the images let's make the max width 700 PX pixels and have it be around corners so like it's not like a square and with a slight Shadow effect hit submit here let's run the code back for reference typically it is a good practice to actually import a CSS file but let's first see what's going on here with accept all right better but we need to actually set a height here but it's getting better as you'll see that you know like the little Corners have been rounded it added a slight Shadow effect here although we need to change the
[04:40] color background because this is way too white I'm going to go to try this prompt it's pretty interesting here okay perfect but also make the height for all images 50% also can we change the overall branding to be more like chewy.com I have no clue if this is going to work I have no clue if it's going to be able to reference this but it would be super cool if it could except okay so I wasn't able to actually understand chewy.com so we you've identified that it's still got these images way too big let me try more lay in way of asking this images are way too big way too much of the fold please make all the images smaller and change the color of the background to a dark UI user interface and with the main brand
[05:10] coloring being orange make it structured more professional of two columns and the relevant points submit all right here we go here we go oh you thought we were playing we are not playing now this isn't crazy but keep in mind I've only been at it for like 3 minutes looking pretty good so far also if you want to get this chewy bone wolf at bones.com fur book Instagram twit fer that's kind of it's kind of cool though how it was a uh it has a very much like dog branding Ru funds policy Fetch and delivery info
[05:43] that's pretty cool is there more I could do here yes but does this show you the potential of where this is going yes now if you want to be able to deploy this and actually have this landing page as a live link check out this video right here I walk you through step by step to actually how to use Firebase hosting Google cloud provider in order to host this as a live link and the best part is that it will be completely free so we can take this kind of code environment and this kind of like local environment and actually push it to the interwebs so you could genuinely build out your first
[06:13] website with raw code in 2024 with AI check out these videos right here if you want to see other stuff on my channel here check out that right there if you want to see my face or you click it and I'll see you in the next video