Cursor AI: Web Design with AI Coding for Total Beginners | Create websites without coding

1. Introduction: This is one of the best things that you can learn for your future. This is your chance to level up to learn something that's going to significantly improve your life. And that's vibe coding. Vibe coding simply means creating websites and apps by using AI, artificial intelligence. You imagine it, you describe it in simple terms, and then you get it. The platform creates all the code automatically, so you don't have to learn Python, Javascript, or anything else. We are going to use cursor, which is one of the best vibe coding platforms out there. Cursor is like having a team of senior developers with all the knowledge in the world at your fingertips 247. No time off, ready to build with any you want. And all of this at a fairly affordable subscription. You don't need any previous experience or know how to code. This course is beginner friendly, and we're going to take it step by step. In the past, creating any type of website or app meant thousands, maybe tens of thousands of dollars, weeks and months of development and a whole team of people. Now, it's all inside one platform. Vbe coding is the best shot for most people to create a solid, reliable income. You can use vibe coding to get a better job to freelance or to start the business. And I repeat without being technical, without knowing how to write code, this is the future right now. In this course, we're going to make a website from scratch, and we're going to launch it on our own domain step by step with the help of AI. This is not going to be easy, though. I'm not going to promise you the world. It is gonna be frustrating at times, and that's because it's so early. But being early is where your main advantage is. Imagine investing in Apple 20 years ago, or buying Bitcoin when it first got started. Sure, there's going to be uncertainty, issues, bugs, but don't wait until it gets mainstream. This is your shot right now. In this course, I'm going to explain what you need to know, just started and launch at first website in no time at all. I'm going to teach you in plain English what everything means, AI, LLMs, models, MCPs, all of that. I'm a designer, and if you've ever watched my design courses, you know that I focus on getting results fast without any boring theory. I'm not going to fill your head with tons of complicated terms and concepts. No, instead, I focus on examples and fun exercises. Invest in your future. Get started today. Don't wait right now is where you have the biggest advantage. 2. What’s Cursor and vibe coding: Welcome back. In this course, we're going to use cursor to vibe code. But what's cursor and what's vibe coding, right? So first of all, cursor is a platform. It's a program that helps you build software with the power of AI, and that's without knowing how to code. The company behind cursor, AI Sphere, just raised $900 million at a $9,000,000,000 valuation billion. Those are crazy numbers. It's one of the hottest things right now. It's 20 bucks per month at the time of this recording, anyways. And what you get in return, it's a complete game changer. With Cursor, you're working side by side with artificial intelligence that understands your project, follows your instructions, and builds your project for almost like magic. You write what you want. That's called the prompt. Maybe you describe what the project should do. And then the AI takes over and does most of the heavy lifting. But let's simplify it. What can you actually build in cursor? Well, first of all, mobile apps, both for the IOS and Android, just like the apps you see in the app store or on Google Play. You can create anything from a fitness checkup to a chat app to a personal finance tool, though, to be fair, at this point, you should aim for smaller apps. The next thing that you can build websites, any type of presentation, websites, landing pages, portfolios, personal blogs, landing pages, for example, are absolutely fantastic for products, for startups, for events, all responsive, all clean. So that's a good way to go about it. The next thing that you can build SAS products. CAS means software as a service. Cursor can help you build everything about it. The front end, the back end, the database, everything, and CAS platforms are everywhere. We have a few examples on screen CAS platforms are fantastic because they're one of the best ways that you can earn money. The next thing that you can build plugins, tools like Chrome extensions, discord bots or maybe some specific tools for you team or company or on the flip side, you could go for WordPress plugins, right? If it lives in a browser or runs online, there's a good chance that you can build it with cursor. And here's the big idea. So cursor connects directly to the smartest AI models in the world. So that means it knows how to write Python, JavaScript, react, next JS, tailwind, typescript, note, and so on. It's like having a team of senior developers available 247 with infinite patients ready to code whatever you want on the spot. You tell it what you want, and it starts coding. You review the results, you check it out, and then you give it feedback, and it constantly improves. This is without you knowing how to code, talk with in plain English. That's the essential part. So imagine this. You've got an idea for a product, right, a plugin, an app, a platform, a website, right, something that solves a problem that maybe you've had for the few years. Normally, you would need months of development. You would need a team, a budget, endless meetings, right? But with cursor, you just describe the idea. And in minutes, you've got something real, something functional, something that you can test, improve, and then maybe even launch after some work. That's vibe coding. So vibe coding is you telling Cursor what you want done in plain simple language, plain English, and then the platform executes it. And that's what makes cursor so powerful. It doesn't help you write code. It helps you build products, solve problems, and move you from idea to execution faster than ever. Okay, please download the attachment and use the link to sign up for Cursor. So please sign up, download, and I'm going to see you in a second. We're going to install it together. But now let's take a quick break. 3. Install Cursor and setting your expectations: Welcome back. Installing cursor is quite easy because it's just a simple program. There's nothing special going on. So please follow the same steps and check the same boxes. While I work in the background, let me set your expectations. We're early. Things are changing rapidly. Every week or so, there's big news, improvements, and that's a bit uncomfortable. New features are coming out, and I'm sure this course is going to be outdated, even though I'm going to do my best to keep it current. Now, my goal is to teach you how to learn and how to use these tools. I'm going to teach you principles, and that's the real value of this course. But let's go back to the constant changes and improvements. This is the price you have to pay for being early. You need tons of patience. You need to let the frustration wash away from you. And that's because you are going to get stuck. I promise you that. And it's not about my course, my teaching style, or my knowledge. You know, I've personally had countless cases where the official guide said to click on the blue button, but it was only red buttons. Or the guide said to click on the save button, but there was no save button whatsoever. It's so frustrating. I had issues where I couldn't work anymore because of problems with my VPN. But I don't use a VPN. I followed every single official step, and I still got stuck with a problem that nobody else had. I used three different computers, and I got three different issues, and I could go on for ages. This is bound to happen to you as well. Now, my advice, use the guide from the attachment to get help. Most of the time, the short answer is this, you will have to do a lot of searching and fixing all on your own. I'm here to help. You can count on me, but some issues are going to be specific to your situation, to your computer and project, and you will need patience. But what's the upside? What's the advantage of being so early? We get the downsides. What's the plus? Well, you get a huge head start in the race, whether it's for the job, freelancing or building a business. This is massive. You learn from your mistakes. You see common issues, and you get ahead. As I said, it's like investing into Apple 20 years ago. Nobody knew it was going to be such a big success. But here, I promise you, there's nothing bigger than vibe coding. And it's all in your hands. You can create incredible stuff, or you could postpone. You can wait until things are super clear, super easy for everyone. There are no more issues, no more bugs, no more frustration. But then you're going to have 100 times the competition because everybody's going to do it. So it's as simple as that. If you invest now into Apple or Bitcoin, sure, you may do well. But if you were there at the beginning, the rewards would have been infinitely higher. So please understand why you're going to suffer and you will have headaches and a lot of frustration. It's for your future. And if you can handle that, if you can continue to push on, the reward is going to be huge. If you can continue to push on to work to the width, rewards are going to be huge. That's why I love vibe coding so much. It's exactly the right difficulty. If it was too hard, it would be classic coding, right, four to six years of studying, of working, being an apprentice, being a junior, leveling up, slowly super difficult, right? But if it was too easy, everyone would do it. So the reward would be next to nothing. So this is right in the middle. This is a fantastic deal. It's the right level of difficulty. Back to wit. Again, you won't actually code. You don't need to know any programming of any kind. You will need to think logically and clearly explain what's on your mind, what you want to do. And that's a skill that you're going to have to develop throughout this course and through practicing. But you won't code, you won't actually read code. You're not supposed to understand everything that's going on in cursor. No. One of the key principles that I want to teach you is this, you can spend all day, for example, creating memes, creating funny images to share with your friends, or on the flip side, you can create a platform that allows people to create memes. And then, based on that, you can create a source of revenue. It's all about your focus, where you put your focus, and how you come up with ideas. I'm going to have a lecture on that, so stay tuned. But yeah, what you focus on is one of the most important things. You got to set the right goals and the right ambitions. Yeah, for now, we have cursor installed. We have a dark interface, and we are about to create our first project. Now, one final thing. I'm going to simplify a lot of stuff, so it's easy to understand. If by any chance you're the coder with a lot of knowledge, with lots of experience, please understand that when you say that cursor is a fork of VS code, that really doesn't help a lot of people or when you say something like pull up your terminal and run this quick Python script. Again, that's a bit overwhelming for most people. I'm not going to do that. Now, I may oversimplify some stuff, but this is a course for people that are not technical, and I think that's the best way to go about it. Okay, I'm going to see you in a second. 4. Our first website in Cursor: Welcome back. Let's create our first website in Cursor. Before you start, please watch this lecture twice. The first time around, just watch and see what's happening. Then rewind from the start and pause to work along. You will have to pause quite often. Please don't try to work along on your first viewing. You won't be able to keep up. So again, please watch twice, and the second time, pause as often as you need to. Okay, let's launch cursor and wait a few seconds until it loads up. The next step is what you're going to do every time you want to start a new project, and that's make a new folder. All our projects have to be organized into folders, one website, one folder. So let's open up our computer and create a new one. If you don't Windows, try to avoid the C partition, the C drive because it may create some issues. Okay, call it, whatever you want. I'm going to use portfolio, but the name really doesn't matter. Of course, the folder is going to be totally empty, right? Next, back to cursor, maximize it, so it takes up the entire screen, and now we're going to open that folder. So nothing special so far, but that's how you start a new project in cursor. And then attached to the course, you're going to have a text file with a prompt, with a task. It's what we want to build, and it's something quite basic. So this is what we're going to paste here to the right side in this field. Now, after you paste, Control V, don't head Enter. First of all, we are in agent mode. This means the AI is going to make all the code for us. We're not going to use anything else, so it's all automatic. Next, from this job down, I'm going to use Gemini 2.5 P. Please use the same one or if it's not available for whatever reason, any of these other options listed on the screen. I'm going to explain everything in detail later on. So please for now just carry on. Okay, here's the task. It's the following. Create a model portfolio landing page for me, Chris Barron 36 from Bucharest Romania. Have 14 years experience in design. I'm an Adobe certified instructor, and I specialize in web and app design. I prefer a red and black colored scheme, nice animations and a portfolio section with five categories. Use placeholder images for now. It will be a single page with a main menu at the top that takes you down to that particular section that you click on. My office address is the following. And please add the me reviews. Add a contact form for people to message me and show my phone number, as well as my social media profiles. Use best practices to build this landing page. Okay, good stuff. Please use the same task, but be aware it's totally normal for your design to look different. That's not an issue. That's how AI works. Now, in case this doesn't work at all, continue to the next lecture where we're going to set everything up, and then you can come back and try again. Okay, now, once we hit Enter, we're off to the races. Notice this area here. This says it's generating. That means it's working. Here, in case you want to stop it, you can use this button, though you won't really do that. Inside this panel, you can see how the model thinks, and some models are very descriptive. They explain everything in detail. By the way, model with AI, it's the same thing. Here, this very washed out gray tells us what the model is thinking. And after a while, a different shade of text shows up. This one is easier to read. So let's pause. So basically, we have a washed out text that's hard to read. Those are the thoughts of the model. And then this text, this is the actual reply. So it's like being able to read someone's mind, and that's fascinating. Okay, now, the AI says it's going to start with an index file. And from here, we can make sure the AI understood the task. Okay, great stuff. Now, after a few more seconds, the index file shows up in two places. On the left side, we can see where all the files are listed from that folder that we previously made. It was empty. Now it has a new file, an index file inside it. Okay. And in the central part of the screen, we can see the contents of that file. But here's the thing. 99% of the time, you're going to focus on the right side. Okay. Now the next task is the CSS. This will style the code. It will make it look better, so to speak. Now, this is going to take a few seconds, but please note I will speed up the recording as sometimes this takes a while. Quite a few minutes. Okay, now let's see what's next. JavaScript file. Okay, il stuff. We don't have to follow along. We could just grab a cup of tea, but it's a good idea to see how the AA thinks and how it works. Okay, right. We can see we have some instructions. These are for us. These are things we should do to finish the project. It's things like adding some images. Because we didn't provide any, the website will be quite empty, right? And the contact form won't actually work because it's not connected to anything. But that's all fine and well, for the first exercise. Let's move ahead. And here we are. The AI finally stopped. You can see that it's no longer saying generating, and we have a new button here that says accept all. So let's click on it. That's how we commit. That's how we can save our progress. Of course, we could potentially read this summary, but in short, it says a basic version of the website is done, and we can launch it by using the index file. Okay, let's go back to the folder and open up that file. I'm going to use Firefox to open it, but you can use any browser. And let's have a look. Here's our lovely website. Now, is it absolutely gorgeous, beautiful? No, of course, not, but it took us a few minutes, and we have something to work with. Because we didn't provide any images, the AI won't download anything from the web. So obviously, the website looks a bit empty. But it did follow all the instructions from the text file, and the AI did say it optimized the design for mobile use. So let's right click and choose Inspec. In Firefox, the button that I'm looking for is this one here. In case you simply can't find it, just resize your browser to a mobile phone size. But yeah, this looks good on a phone, too. No surprises here. This is the power of vibe coding. You think about something, you type it out, and then after you hit Enter, in a few minutes, you get it. It may not be perfect, but we can build on it. So, let's actually take another step. Let's change the color scheme. Let's say it's too dark for my taste, right? So let's change it to blue and white. I'm going to tell the AI to do exactly that. You have to be natural in your language. You don't need to use any technical terms. The AI understands it, and it starts editing the CSS file. Now, quick pause. When you see red lines, this means those parts are going to be removed. And in this case, it's the old colors. And these greenish lines, they're not exactly green, they're greenish, those are the new lines. So it all makes sense. When it's done, I'm going to hit Accept yet again. You're going to have to constantly do that, by the way. Now, we could potentially read the summary, but let's just go back to the browser and refresh. And, yes, it's now white and blue. We're still in mobile mode, but that's totally fine. We can go to the website and right click. Choose inspect yet again, and then we'll have to click the same button as before to get back to desktop mode. Or we could potentially just close it and open it again. But yeah, we're good. The AI gave us a new light colored scheme. Everything is nice and clean, nothing too special. But yeah, this is quite cool. Let's do one final step. Let's add a map instead of an address. So let's see how the AI manages that. As you're about to see in these lessons, there are quite a few limitations. The AI can't implement absolutely everything that you can think of. But a map, it should be able to do. So let's have a look. Remember, always hit Accept. And then when you're inside the browser, you can use the refresh icon. You can use the shortcut F five, or the hot key control or it's up to you. And yes, this is a fully functional map that you can use. You can zoom in, you can zoom out. And this is awesome. This is vibe coding. You imagine it, you describe it, you get it. And then it's all about refining it. So it's more like you imagined it. What I want you to do right now is create your own version, starting with my text file. So create a new folder on your computer. Then go to cursor to the top menu and use Open folder. It's as easy as that to start a brand new project. Replace my name in the text file, change a few details, and then create it. When you're done, take a screenshot of the entire design and post it so I can see it. Now, before we end, for some people, this may not work. Cursor may give you various errors, issues. It may stop working. It may ask you to install stuff, and that's totally fine. We'll do all that setup very soon, and then you can come back to this lecture. So if you don't have a website, leave a comment so I know what issue you are facing and then move ahead to the next lecture. Don't be disappointed. Remember, have fun with it. 5. What can you build with vibe coding in Cursor: Chris, what should I build? I get it. I know that you may not be an entrepreneur with some thick whiz, but let me help you out with some quick ideas. Now, before that, I have to tell you one important thing. Execution is essential. Ideas are worthless. I'm going to say that again. It's all about the execution. It's not the quality of the idea. I'm going to expand at the so let's start with this website. I lovemg.com, right? This website shrinks your images. If you've ever worked with Photoshop, for example, you know that sometimes it's going to give you huge file sizes, like two, three, 5 megabytes, right? Now, with this platform, you drag and drop the images, and that's that. You cut down their size by 80% without losing quality. And it can also help you resize images quickly. Again, drag, drop, and that's that, right? And you have a few other features here. But the price it's four to seven bucks per month. It's nothing. Even I signed up. So that's one idea. And here's one platform that changes your PDF to an Excel file, so your accountant has an easier time with it. It's super niche, right? It's only for the select group of people, but this does 38,000 bucks per month, $38,000 per month. Crazy stuff. And that's another one that's doing very well. This renames all of your photos, and that's it. The entire thing. That's the entire platform. So instead of calling them IMG 010203, it gives them a proper name, which is awesome for those cases where you go on vacation and you have thousands of photos lying around, right? Again, this is a very specific service. Next, let's use this one poly.com, which helps you post and schedule your content on all of your social media channels. This platform has one single person, one single guy behind it is making over $1 million per year, Australian dollars, but still, and now he's Channel se now, let's take a break. These are not incredible ideas. These don't come from business geniuses, right? These are regular people that had an idea. They had a problem, and they fixed that problem. They executed that idea, and they did it well. There are maybe 50 other platforms like Poly, for example. So more expensive, some cheaper. That's why I said it's all about the execution. And my advice, focus on the design side. Take something that's already been done 100 times before, add a beautiful design, a small twist, and you got yourself a business. Of course, you still need to promote it. You need to advertise, but that's a different story. Now, let me continue with a few other examples, something a bit higher up. So here's base cam, a seemingly complicated platform that's focused on one thing messages. It basically allows you to create a to do list in a very similar way to notion. Of course, there's a lot more to these platforms, a lot more features. But then you start off with a simple idea, and then you expand, you make it grow. For example, make an app that reminds you to get up from your chair every hour, right? That's a business. That's a service. That's an app, that's a platform. And that small idea may give you another source of income, how you monetize it, how you build an audience. That's a different thing again. That's besides the scores. But I promise you, there are tons of platforms built around a very simple idea. Here's a WordPress extension that simply allows you to insert social media posts into your website. Super easy, and they make a lot of money, mostly passive, right? Now I've seen paid WordPress extensions that allow you to add a bar with a custom message at the top or at the bottom of your website. That's it. That's the entire thing. That's the entire plug in the entire business. So the thing is, the sky is the limit. It's all about solving problems, problems that you know that you care about, that you want to solve for yourself. Still on WordPress, there's an app that helps you insert the Google Analytics code or Facebook ads tracking. And it's as easy as that. It's nothing too complicated. Now, a guy vibe coded a horoscope platform live on TikTok, and it's doing very, very well. Hodoscope whatever. It doesn't make any sense. It's not for me, but maybe it's for you. Now, another guy made a wallpaper app, but only for the specific type of anime. You don't have to make the next Uber or door dash. You get to one, five, ten K per month. You actually need to solve a problem for a small niche of people. But let's say you don't have any of these ideas, right? Well, we made the portfolio website, right? Why not offer this service to some local businesses? Find 100 of them in your area, in your city, in your country, and ask them for $1,000 or 80 bucks per month. And you've just made a good chunk of change. There are other platforms that offer you lists of all the dentists in your York city or country. Now, what matters is, you find the right approach. Do you email them? Do you call them? Do you show up at the business? Do you charge $1,000 or 800? And of course, you don't have to do that only with dentists. Think about all the other businesses in your area that make good money, but they have horrible websites. In my part of the world, that's restaurants, that's lawyers, that's service shops, it's vets. The list goes on and on. I have countless web design agencies, of course. But yours can be different because you can specialize in one certain area that you may know very well. Or that you're about to learn very well. You offer a good website already coded with little to no maintenance. This is why it's a race because more and more people are going to start offering the same thing, right? Because if you can do a website in five, ten, 15, 20 minutes, of course, what's the worth, right? Are you going to charge maybe 600 bucks? The next guy is going to charge 400 and all of a sudden from $1,000, you start offering it for pennies. So time is of the essence. This is why I said it pays to be early. But of course, there's no need to panic. There's more than enough for everyone to go around. So my advice before you create anything that you want to sell, start with a few small fun projects. Now, let's pause. Hopefully, you can now see there's a world of opportunity, but you don't have to aim for the $100,000,000 business. Just solve small problems like transforming square corners of an image into rounded ones, right? And that maybe you a funds 100 bucks per month. It sounds silly, I know, but social media is filled with stories like this one. It's called building in public, and it's a great way to advertise. You constantly post about your journey. This building in public movement is fantastic because you can actually get inspired by their projects, and you can also learn from their mistakes so you can avoid them. You see the profiles, you can see that these are just regular people. So that's how you can get some inspiration. The guy that coded ply.com documented every step of his journey and how he grew it over the course of many years. He was totally alone. He coded everything, the old fashioned way. He was the only developer. But now maybe you're alone, but you have the knowledge and the power of 100, 1,000 skilled developers, in your corner for 15, 20, 25 bucks a month, right? So it won't take you years to build your project. You may fail at marketing, but then you can do it another time and another time and another time. You can try again. You can fail fast, you can learn. And then at one point, you're going to have success. Whether it's big or small, it's up to you. It's in your hands. But yeah, now the question is, what do you want to build? It may be silly. It may be small. But if you keep trying and learning, I promise you you're going to have results. 6. Getting around in Cursor: Welcome back. Let's fire up cursor so we can explore the interface. This may change on your end, but the basics will always be here. Because we don't have any project opened up, the interface is quite basic. We can open up an existing project or launch a new one by opening a brand new folder, an empty folder, or we could use Github to start one. But we're going to keep it simple, and we're going to create a new folder anywhere on our computer, and then we're going to open it in cursor. Now, even with an empty project, the interface to be fair doesn't change that much, but we do see a few key areas. On the left side, we can see all the files in that specific folder. Right now it's totally empty. We just made it. But let's do this. Let's add a random text file inside that folder. Now, we could do that from cursor directly, but let's just do it the old fashioned way. So any random text file the file should show up right here. If you don't see it, you do have a refresh icon if you move your mouse in this area. And once you click it, you can use the scented part of the screen to edit that file. But the key to vibe coding is right here in this panel. This is where you talk to the AI. In case you can't see it, use the hot key Control L, but by default, you should see it. But yeah, Control L. We're going to go back to this panel in a moment. For now, let's go to the top menu to terminal. From this list, choose new terminal, and that's going to open up a panel at the bottom. Here we're going to see several tabs, but with only interested in the terminal. Now, from time to time, this area may show us various issues, errors. It's going to show us some progress, and we may have to pay some commands or simply hit Enter. But yeah, to keep it short, to recap, 90% of the time, you're going to look here in this right panel, and maybe 10% of the time, you're going to check out the terminal at the bottom. Though in most cases, even the terminal is going to pop up here on the right side. Now, the rest really doesn't matter at all that much. In case the interface is too small, you can use the hockey control plus to make it bigger. This should help you see everything without any effort. So that's Control plus. If you want to shrink it, use the opposite, Control minus. Okay, great stuff. Even so, this dark interface may bother you. So here's how you can change it. Go to the top menu to file. From here, go down to preferences. Then look for Team. And finally, here, click on Color team. Right now, after you click on any of these choices, the window is going to close, which is not ideal, but open it up again, file references team, color them, and then choose any of them. It's up to you, but I really like the darker ones. Okay, now let's focus back to the interface to the chat interface. The first thing you need to know is that for the vibe coding, we always want to have this set to agent. The other modes are for developers with a lot of experience that want to use the AI to improve the code writing to make it better, to help them write code. But we don't want to do that. So that's why we're going to set it to agent, which simply means the AI will do most of the work. Next, uptop. You can reference a file from within the project, basically point the AI towards it. Now, just to be clear, the AI is going to change all the files that are inside the project folder. It can work on any of them. That's how you basically keep things separated. If you want to start a new project, you create another empty folder in a different place on your computer, and then you go to the top menu to file open folder. So that's how you keep things separate. It's like everything. When you install games, programs, when you copy images from a vacation, everything should be nicely organized into proper folders. So that's how you switch from project to project. You basically go to File Open folder, right? Or another approach that's basically the same thing. You can go to the top menu to file, and from here, you can choose new window. And basically, then you can open up a folder, and it's basically the same thing. Now you can drag images into the chat. That's why you have this icon here. You can click on it or you can drag and drop. But we're going to do that later. As I already said, you can also reference certain files if you want the AI to focus on them. Right now, you can see the text document is shown right here, and that's telling the AI that you wanted to pay closer attention to it. You can go over it and click on the X symbol to remove it. We're going to chat about that later on. The final important setting here is this part where you choose your model. That's going to dramatically change your results. Let's talk about models in the next lecture. For now, please change it interface to a new team, increase the size by using Control plus and create a new photo on your computer and open it up in cursor just so you get used to that flow. Okay, I'm going to see you in a second. 7. Get better results with these tools: Come back. Develop a few tools that you can install on your computer, so cursor can do a better job, especially if you want to do the least amount of work possible, and that's what we want to do. Now, we're not going to give the AI complete control. Instead, we're going to install some very well known software that's going to help cursor work better. So first of all, we have to install Python. By the way, you have a file attached to the course, so don't worry about it. You have all the links, you don't need to write them down. Please work along on your second viewing. Okay, this is the official website, and we'll click on the latest Python release for the Windows in my case. In this new page, we're going to have to scroll down, and under the file section, we're going to find the download link. Sure. Do a few choices, but here's the thing. Look for the recommended label. That makes it easy. So we'll download it and install it. Now, there's one important thing here, this second checkbox here. Now, I'm not going to get into details because that would really sidetrack us. So just check both of these boxes, and we're going to be good to go. It takes a moment, but there's nothing special going on. Sometimes Python won't install correctly, and I have a lecture about that. Now, to check and see if your installation is good, click on the Start menu and then type in CND. CMD is short for command. Again, you have all of this attached, and you have something for Mac users as well. Now, this is what I want you to type here in command prompt. And if you see something like this, you're good to go. Most likely, you're going to have a newer version, but that's fine. As long as there are no warnings, you're going to be good. Now, in case you can't manage, you can do the following thing. You can go to cursor to the top menu to terminal. Here, stop the new one, and you're going to be able to see it right here. Type in the same thing, P and Y, and you're going to see if it works. On my end, it's all good. Now, before we go on, I got to say I'm not going to explain every single piece of software because it's counterproductive. Instead, I'm going to attach a file with a few details about every program, but these are very well known, and there's nothing to worry about. They're going to be good. So again, I'm going to focus on practical things. For me, the goal is quite simple. Create websites as fast as possible. Learning about Python right now won't really help. It's going to make you head spin. So let's keep this short. So Python is checked off the list. Ideally, you would restart your computer, but here I'm going to continue, even though that may cause some issues. Next on my list, Node JS LTS version. This is a must have, and it's really going to help us. Now, during the installation process, it may ask you if you want to install a few other tools. We want to make sure that we check that option. We want that. So this is going to show you another window with a lot of text, and I do mean a lot. It doesn't ask us for anything, but you may have to wait for the few minutes while it does its thing. I'm going to speed up the recording, but please, on your end, have patience. One funny thing, though, on my end, it says it can't actually find Python, even though it's 100% installed. Now, a restart could have potentially solved this issue. But yeah, I know it's installed, so it's not a big deal. The thing is, after the while, this installation process, well, it simply stops. But here's the thing. Open up another command prompt, CMD, and type in the following node and then version. Remember, you don't have to memorize these commands. They're all attached. Okay, yeah, you can see my version here, we're good to go. Next on my list, Power Shell seven. We're on the official Microsoft Store, and this tells us there are many ways of installing it. It may seem a bit overwhelming, but actually it's quite simple. We're going to use this method when This is the recommended method, so that's why we're going to use it. Here, there are only two steps. This is the first one. You open up command prompt, you click here to copy this text, and then you paste it. You're going to get a question here, type in Y as in yes, and then hit Enter, and you're going to see that have two versions available. Now, preview simply means it's like a Beta version, something that's usually less stable, experimental. So we're not going to do that. We're going to choose the one, the first one. Okay. Now, to install it, copy this command. Again, not the preview version that's a bit lower down, this one here, and then paste it in command prompt and had Enter. And of course, after the few seconds, this is going to install. Okay, fast FdwardT test it out, open up your start menu and type in the following. It's push but with a W, and you should see Power Shell seven available. Okay, we are doing very well. Let's continue with GitHub. We need to make an account. But like with everything else, it's totally free. So you got to put in your email address, and then you got to verify it. But yeah, after that, you're pretty much good to go. Github is very much needed, even though it may be quite intimidating. As you're about to see, we're going to focus on the essentials, and soon enough, you're going to be comfortable with it. Okay, great stuff. Next, let's install Docker. This may be optional. It may be considered optional, but I had quite a few issues because we didn't have it installed, so I would much rather install it and then be done with it. This is one of the slowest programs out there. It's totally free. There's not a lot that you have to do, but it's quite slow. So you got to be patient with it. After this ready, and again, please be patient. You will have to create an account. But the thing is, we already have a GitHub account, right? So rather than putting in on email and registering the old fashioned way, why not use the GitHub account, right? It's much faster. So click on the icon. That's the GitHub icon, and then you're going to be golden. Okay. There are a few other things here. But as I work in the background, let me explain what's going on. So we're about to cook many dishes in the kitchen. We're going to cook breakfast, lunch, dinner. We're going to make desserts. We're going to make snacks. We're going to make full blown meals, quite a lot of variation, right? So this means we got to have a fully stocked fridge and utensils. We need ingredients. We need knives, forks, spoons, the works, right? This is what we're doing right now. Now, are we going to use absolutely everything in every single dish? No, some tools are only specific to certain projects, but it's much easier to prepare everything right now versus trying to find them while you cook. That's going to be horrible. That's a bad experience. See, when you get issue after the issue in cursor, because you're missing this or that, you're going to waste time. You're going to waste energy and, of course, credits, which basically mean money. So this is why I strongly suggest you install everything right now. You pause often, you get to the width, and then you're going to be flying. Okay, good stuff. Next, we're going to install something called Git for the Windows. Now, this program is going to have a lot of settings, a lot of checkboxes. But what we're going to do is we're going to use the default values every single step. Now, you could potentially pause, but just accept everything as it's set up because cursor is going to manage everything. So just hit next and it's going to be good to go. Now I realize that this isn't all that comfortable, but this is going to make the AI work much better, much faster, and it's not going to bother us every single step. It's not going to ask us to confirm stuff. It's not going to ask us to do stuff. Now, when we'll create various projects in cursor, all of these programs and accounts are going to come in in handy. So that's why we installing them right now. Stick with me, we're just about done. Okay, Fast Food web and we have just a few accounts to make. But these are an instant. It's just one click or so. VersL is the first one. We're going to use it to host our websites so everyone can see them. Again, this is totally free for now, so don't worry about it. Sign up by using Github to simplify the process. Of course, pause as often as you need to and review the file that's attached. So that's VersL. Next, we're going to use a platform called resend.com to send emails. This is totally free for up to 3,000 emails per month. So this is awesome for getting started. Remember, we made our portfolio website, but the AI told us that the form would not work because it's not connected to anything. Well, resend fixes that. Good stuff. And one final account is super Base, which is fantastic for databases, for complex projects, which we might do later on in the course. This is very much needed, but again, later on. It's one click, though, so why not get it out of the way. But, yeah, believe it or not, we're done with these tools. There are a few other settings in cursor, but we're going to do that after you catch up. For now, please pause, install everything, review the attachment, and only continue after you've gone through the checklist. Remember, be patient and install everything. Thank you. 8. Set up MCPs & rules in Cursor – the easy way: Come back. We've installed quite a few things like Python, no JS, and Power Shell, but there are a few things we can do in cursor, as well. The first one is rules. And you can get to this section by focusing on the top right side of cursor. Click here on this gear icon to open up cursor settings. You're going to see it opened up right here and there are a few things to choose from. Let's start with rules. So here, there are two main choices. It's user rules and project rules. We're interested in the first one. You have a file attached that's called exactly that. All that you have to do is space the content inside Cursor. In short, this tells cursor how it should act. It's like telling someone how we like our coffee, and it's quite basic stuff. We want cursor to be efficient. We wanted to use best practices. We want it to be safe and cover up sensitive information, and so on. You can find templates for rules on the web or you can simply use mine. I got it from the web as well. We chose user rules because we want cursor to apply them to every single project. Now on the flip side, project rules would be specific to this single project. For example, let's imagine that we switch to a mobile app project on IOS, right. We may have different requirements, right, different rules. But since we're going to focus on web design work in this course, we want to keep it simple, so it's quite easy, paste those rules, and that's going to be that. We want them applied everywhere. Next incursor we're going to click on MCPs. I'm not going to dwell on the technical stuff. It's quite simple. These are going to help us quite a lot. Now, here's the thing. In short, this is going to give the AI more control. If we don't use these MCPs, we would have to do more work. We would have to write more code. We would have to type in more commands and move stuff around. That's not great. For example, we're going to have a Github MCP. That's going to allow the AI to make a new project all on its own. It will allow it to upload everything automatically. Basically do everything on its own without us having to follow certain instructions. I hate it when the AI tells me what I have to do. So MCPs are fantastic. And once they're set up, the AI will use them as needed. These are basically tools for the AI in case it needs them. Now, at this time, this interface is not beginner friendly, but I'm going to help you out. You have a file attached that you simply have to copy paste and then replace a few keys. This is the file, and here are the things that you have to replace. First of all, let me show you how to remove or add one just in case you want to add an MCP or remove an MCP. You select the entire file, Control A, then you copy it, Control C. Next, you open up chagpt.com. You don't need an account, you can use it totally for free. Then you say something like, remove the Super Base MCP from this code, and then you simply paste it. You had enter, and that's going to be that. Chad GPT is going to give you the updated code, so you don't have to worry about opening and closing brackets or whatever else. And it's the same thing if you want to add something. So, yeah, that's how you do it. I'm going to stick to my original list, and that's what I recommend you do as well. So with the original text file that you have attached, go back to Cursor, to MCP and click to Add it. I'm quite sure that this interface is going to change in the future. It's going to be more beginner friendly. But for now, it is what it is. Okay, once you paste, you have to switch tabs. You have to go back to cursor settings. Here, you're going to find a list of all the MCPs that are set up. Green means they're good to go. Anything else is not ideal. In case you have issues with some of them, continue watching. I'm going to show you how you can fix them. Now, there's a limit to how many MCPs you can install. There's a limit to how many tools they can use. Now, they're so great, you may want to add tons of them, but over 40 tools in total is a nog, at least for now. Now, you may say, Hey, Chris, but it's only a few entries here. We have Github. We have memory, sequential thinking. These are not 40 items. You are correct, but it's tools, not items. See, every MCP has all of these tools. That's the actual limit. 40 tools in total. Github alone has over 20, but it's so useful that we're going to keep it. Just a few words about them, though, just so it's a bit clear. Sequential thinking, this is going to help the AI break down the task into smaller bits. It will help keep track of them, those smaller bits, and it's going to give us a much better result. It's basically helping the AI not lose focus. It's going to keep track of everything. It's basically a checklist. Or the file system MCP. This is going to allow the AI to make folders, to move files around, to cut, to delete, and so on. This is critical because some projects are going to have lots and lots of files and folders, and you really don't want to dig through them. You don't want to move them around on your own. Letting the AI do it for you is totally awesome. But let's put in your keys because again, you have to connect some of them with your personal keys. So let me show you how that works, starting with GitHub. Now, you can use Google and look for GitHub personal access token. Or you can do this. You can go back to your browser to github.com. From there, you can go to account settings, and from here on the left side at the bottom, you're going to see developer settings. And from this new window, you're going to see exactly what we want personal access token. We want the classic one. So creative, but be aware that you will have to set up a name, an expiration date. 90 days is what I recommend. And then you're going to have to check off absolutely everything. It's a lot of clicking. I know you're sick of these settings, but I promise you this is going to make our lives that much easier. But yeah, once you're ready, you're going to have the key, paste it in, and that's that. Make sure you always hide it. It's only going to show it to you once for security purposes. Think of it like your credit card number. Now for the super Base, it's much easier, nothing too complicated. But let me tell you this just so it's super mega clear. Never will show you keys to anyone. It's like showing your credit card number on the Internet. It's not a good idea. You got to keep it safe. You got to not show it to anyone else. That's why most platforms are only going to show you your key once. If you lose it, you're going to have to make another one. It doesn't cost you anything to make a new key, but it's not a good idea to have whatever 15 keys randomly in your account, not knowing which is which. So keep it safe, paste it, and then that's that. Now, we're basically done. You can pause. You can set up everything on your own and make sure you're up to date. If you have any issues, don't worry. In the next video, I'm going to show you how we can fix them. So keep that in mind. For now, go ahead and get to work. Thank you. 9. How to fix issues: Come back. Issues are bound to come up, and the most frustrating thing, it can be anything. You're going to have issues specific to your computer, to your operating system, to your project. For example, if you have an anti virus, you may struggle for days and no tutorial can help. That's why I want to show you how I learned to deal with these cases, how I did it on my own. For example, let's say the Git MCP server doesn't work, and it says it's due to Python. Now, we installed Python, and it seemed fine, right? So what I did was I copied the error, and then I used Google. I found a few things on stack overflow, which is a platform for developers. I tried different solutions, but none of them worked. Now to be clear, I'm not a developer. I have no idea what's the problem. Now, how you handle these situations, these issues, that's going to determine your level of success. So I repeat, you're going to follow instructions, be it from this course or from the web, but things won't work. And how you manage to handle that, that's going to determine your success. Here, I tried a few things, and then I switched to chatgpt.com. You can use it for free or you can sign up. I do recommend you sign up, even though it's another subscription. I used this model, which is very good for reasoning, and I told it exactly what's happening. Hey, I'm using cursor AI, and I'm getting this issue. The first solution it gave me seemed a bit too complicated for my taste, so I just skipped it. I just moved on to the second one. Here, I had no idea what these meant, but I just started pasting in CMD, and that was that, you know? The first line didn't seem to help. So then I just moved on to the next one. And here's the thing. After the few seconds, it installed something, and I had a feeling it worked. So I went back to the program. I refreshed, and yet, it was all good. I have no idea why, but that was the fix. Now, this was one single situation. Here's a different case on a different computer, the G MCP doesn't work, but for the different reason. I don't know why, and I want to be totally transparent. I don't plan on learning this stuff. Instead, I'm going to use the same method as before. I'm going to ask GPT about it. Preferably OT, because OT is the most advanced reasoning model, so it's very good at logic and coding. But if you don't have access to GPT to chat GPT, you could potentially use the chat window in cursor, and you're probably going to get a similar result. Now here in Chat GPT, I told it what's going on, and after about 90 seconds, it gave me a step by step plan. So first of all, I have to install something by using PowerShell, and here's the exact command. Okay, I think that's simple enough. I'm going to use the start menu. I'm going to type in push, but with a W or just simply Power Shell. And then inside Power Shell, I'm just going to copy, paste that command and had Enter. And again, it seems like it's installing something. I'm really not sure what. It's doing various things. But, yeah, I think it's good to go. Now for the next step, it gave me a different command, but it's insisting I open up a new terminal. Okay, I'm going to type in push again, and then I'm going to paste that in. Of course, that raises an issue. I've copied two different lines, which is not ideal. It should be one by one, but no matter, I'm going to paste it anyway. And yeah, I think this is actually good to go. Okay, now we got to restart the program. Let's not skip that. I'm happy I don't have to restart the computer. Now, we're going to have to wait for the second. But yeah, after it's loaded up, you can hit the refresh button from the right side, and basically that's that victory, no more error. This is great stuff. Now, to be fair, this is a different program than cursor. That's why it looks a bit different. But the point still stands. On your end, you're going to have other issues. But remember one thing. Once you solve them, you're going to be good to go with it won't come up again. The crucial thing is you got to remain calm. That's the essence of vibe coding. You don't have to know how to code, but you do have to A, have patience. B, ask the right questions, and see the most important thing, try stuff until it works. Now, here's the thing. We have chat GPT, but we also have cursor that uses chat GPT, right? Well, GPT 4.1. Why not use cursor, right? Because basically, I'm trying to protect my credits. Instead of using one credit, I would much rather use chagpt.com where I have a separate subscription, and I can ask as many questions as I want without any limitations. So that's why I prefer using chgpt.com and I have a subscription because it's basically unlimited questions, whereas in cursor, every single conversation, every single time you hit and one credit goes down. So that's why I'm doing it like this. But yeah, that wraps it up. You're bound to have headaches. It happens. In tutorials, it's always A, B C and success, right? But in your case, you may spend hours on step B on the second step, and you are stuck and you can't proceed. As long as you keep my advice in mind, patients ask the right questions and try stuff until it works, you're going to be just fine. Remember, this is the price to pay for being so early, but we have so many advantages that overall, this is a fantastic deal. And with that, let's continue. 10. Claude vs Gemini vs GPT: Come back. LLMs are large language models and they're the main thing that cursor uses. So all the intelligence comes through these LLMs, which most people call models. That's what we'll use as well. AI LLMs models did the same thing. So just to be clear, cursor is the main program, but most of its intelligence comes from these models that come from different companies. Cursor is a pipe where the models are the water. Now, could the water flow without any pipes whatsoever? Sure, of course, but the water would go all over the place, right? Cursor makes sure you're getting more of what you want, so that's why we're using it. Otherwise, we could potentially just sign up to one specific company and use their models, but that would be much more limiting and substantially more expensive, especially if you want to use multiple companies and multiple models. Now, this is why cursor is a much better choice. To do cursor, you get access to most of the companies and to most of the models out there. That's why when you click here, you can choose from quite a few of them. Actually, there's quite a lot more. You have to load them these are the mainstream ones, and these are the recommended ones in short. Now, the key question, the million dollar question, which one should you use, right? The short answer is, it really depends. So here's what we're going to do. We're going to compare them. I'm going to give the top ones the same task so we can compare the results. You have the task attached, so you're going to do the same thing on your second viewing. For now, just look and see what's going on. Now, one thing models change often. So what's slow today may be quite fast tomorrow. So that's something to be aware of. Things constantly change. Now, I'm going to be using a Pro plan, so I'm going to have access to the latest Cloud four model. But if you're using the free plan, you're going to have to use the 3.5 model. But as you're about to see, that's not really an issue because our goal is to get a sense of these models through testing them. So it really doesn't matter what you use right now. Now, to keep this short, I already made three empty folders on my computer. The names really don't matter, but I wanted to clearly label them so you know what's what. Make it a bit more interesting, I attached some images to the course. Now, hopefully the models will be able to use them. For that to happen, I'm going to copy that folder inside the Cloud four project location. That's the first one. So that should help the model make a more beautiful website, right? Now I'm going to show you the task in a second. But first, we have to help the model by pointing out the images to tell the model they're there. I like to give clear instructions. Use the images from this folder and then add the path, the exact location of the images. Now, to get the path, go inside that folder and click on this area, and you're going to see something like this. That's what we need to paste inside the text file. Okay, again, make sure you work along on your second viewing and pause as often as you need to. Okay, the prompt is ready, and now we can copy it. Back to cursor, there's no project loaded up, so let's choose open folder. We'll now have to navigate through our computer and find that location, but that's nothing special. Once the interface is loaded up, get a prompt and paste it in the chat. Make sure you select Cloud four or Cloud 3.5 if you're in the trial mode. Okay, now I'm going to make my interface just a bit bigger so it's easier to follow along. Okay, let's go. Now, immediately, clot four is planning a lot of moves. I've paused the recording because as you can see, there are quite a few steps here. Now, remember, washed out text means with seeing what the model is thinking, but it hasn't replied just yet. After the second, it does acknowledge the task. It understands it, and it says it's going to make a beautiful website. It then says it's going to use HTML five, CSS three, and Vanilla JavaScript. Okay, this is fairly important because if we know what the model uses, we can potentially fix any issue with a lot more ease. We know what to Google for, right? And now it started making the index file. Now, what I want to say yet again is that you have to be patient. I'm going to change the speed of the recording from time to time so we won't wait too much. Actually, I think having a timer somewhere in the corner may be a good idea. So let me add that. That's one way of comparing these models. Okay, the index file is loaded up and the CSS file is next. Now, the CSS file determines the style of the project, the look. It seems that Claude wants to use the red pink and dark blue color scheme, along with a specific font called Fredoca. So it came up with this specific typeface. Interesting. Well, this is taking quite some time. If you check the files, you're actually going to see hundreds of lines of code. So I think the weight is warranted. Don't rush it, right? Claude does not hesitate, but it does take a bit of time to write out all the code. One quil feature. Claude is creating a read me file. This is useful, and I do appreciate the model doing that. Of course, we have to compare it to other models to see what's what. But, yeah, overall, so far, good stuff. And yeah, it's finally done. So let's accept everything and check it out. So about 3.5 minutes or so in total. And the website, the website looks good. Actually, this is better than good. I like the gradient in the main menu, the chunky font. This is quite lovely. The entire color scheme is actually on point, but I do have to say I'm a bit disappointed about the map. It didn't add a functional one. We have to sign up and give it a key for it to work. Okay. But other than that, the newsletter area, that's solid, the footer looks awesome. This is a great result in just a few minutes. Have a look at the mobile version as well. That's a good thing to check. In some cases, there may be alignment issues of various problems. And here, surprisingly, look at some of these issues. Wow, this is shocking. So the top navigation is fixed, which is a great idea, sure, but it's actually covering the main headline. That's super surprising. And in the central part in the hero area, I really I can't say that I'm in love with this layout. Text on the left, photo on the right, and then this button is quite separated at the bottom. It's too far away. Though to be fair, the headline is also quite far away. Uh, this is the most important area, and I don't think it's good enough. And there's also something to be said about the Instagram feed. It's not correct. Sure, it's somewhat tricky task. It's a challenge, but here's the thing. For the map, it said we needed a key, and it gave us some instructions. Okay, cool. But for the Instagram feed, it just made one up based on my photos. This is not great because it can confuse us. It's somewhat deceitful. If it can't make it work, if it can't implement it, Okay, just say so, right? This is quite dangerous for the vibe coding because we may look at something, and we might assume, Okay, it's working when, in fact, it's not. So this is a bit of a red flag. We do have to continue with our comparison, and then we can have a better idea about clot four. But, yeah, this is quite interesting. But now, please don't work along, continue to the next lesson, and then it's going to be your turn. I'm going to see you in a second. 11. Claude vs Gemini vs GPT – part 2: Come back. We saw how Claude four did ups and downs, but we got to compare it to something, so we have a better sense of these models. So let's get to work with Gemini from Google. So start by pasting the images inside that folder and add that location to the text file. That's quite important. Now, you're soon going to get used to this approach where you constantly make new projects, make a new folder, then open it up, then make sure the settings are right, and then it's off to the races. Okay, so Gemini is a Google product, and lots of people have very high hopes for it. Let's see how it does in our case. Now, the train of thought is super fast, and it has a lot of detail in it. But let's see what the actual reply is, and we can see that Gemini wants to use a different technology versus Cloud. Okay, it wants to use react and VT, which may not tell us much because we not coders, but it's an interesting difference. That's with noting. Another thing here. Now, for the image assets, Gemini is saying that it first has to know what images are inside that folder and if we can list them ourselves. So we have to list the photos. Okay, this is shocking, actually. This is very unexpected. Claude immediately saw the photos. Now, to be fair, we could have provided fewer photos or named them in the same format in the same way, like IMG 01 with whatever. But yeah, overall, this is a comparison between models. We're giving these models the same computer, the same task for exactly this reason to compare them. Okay, anyway, moving on with this tech approach, the model is going to make a few different files, starting with package dot JSON. Okay. Again, we don't really care, but it's nice to notice these things. As you get more and more familiar with these models, you should get used to these approaches. And okay, at the two minute mark, I think we may be already done. Okay? Cool. We can see a huge summary here. I'm just going to skip over it for the purpose of this recording. In real life, I do suggest you read everything the model says because there may be key information there. But yeah, here, I'm just going to accept everything and see how I can launch the project. Because we using a different tech approach, the index file may not be the key to opening the project. And if we focus on the chat, we can see in the third step that we need to run a development server. Okay. That's interesting. But here's the thing in number four, it says the feed is just a placeholder and that we need a key if we want to use a real one. Okay, so I do appreciate that. You can see how the personality of this model comes through. Now, I'm not saying that it's better than clouds, but it's something to note. It said I can't do it. You have to provide the key. Okay, good stuff. Now let's try to open the local host link, but I'm quite sure it won't work because Gemini is asking us to run a server. I don't want to do that on my own. So here's what I'm going to do. You do step number one, and immediately you see here the model says, Okay, I'll do it, which is a bit funny, considering it could have done it before, right? Keep in mind every command, every time we hit Enter, that's costing us some money. So some people may be a bit unhappy about this approach. If you know what to do and how to do it, then just do it, right? So something is happening in the console. NPM install. And after a while, it tells us again we got to do two things. We have to add images, rename them. But more importantly, step number three, we got to run the server. I don't want to run the server on my own, though, to be fair, it's quite easy to do, but that's not the point. So I'm going to say this skip the images, continue with step three. And that should be it. I think we should be able to have a look at our website with over 3.5 minutes, and the experience has been well, it's been vastly different. But let's see what's up. Okay, so at the first glance, we can see the images are missing. No surprise. The main menu is nice and clean. It's interesting to see the map is already up and running versus Cloude. We don't have an Instagram feed, and it told us why that's the case. So it didn't confuse us like Claude. Then if a Q newsletter, overall, quite good. One thing that's really bugging me is the product photos, though. So let's look at the prompt and see if we can adjust it. I think I didn't give it the exact path. I think I pointed to the general Gemini folder, but not the actual photos. The thing is, the model should be able to do anything inside that folder. So I don't really think that's the issue. Still, let's try this again. Let's tell the model the photos are there inside the project. Just add them to the project. Use them, right? Let's see if that fixes it, though I really doubt it. Okay, fast forward and no. It says it can't access them, which is a lie. And that I have to provide the exact file names for the eight product images. I would hate to rename them on my own. Funny enough, the model did create a new folder called Publxlash Images, which tells me that the model does have access to that location. It can create stuff. I can delete stuff, I can move stuff. But, yeah, let's move ahead and have a quick look at the mobile version. Okay, overall, it's been a decent experience, but asking me to rename those files is not ideal. The mobile version looks good. I actually think it's better than clouds. But yeah, overall, let's wrap this up. Let's move on to GPT 4.1. I'm going to skip the setup so we can save a bit of time. Now, immediately, 4.1 gives us a plan. It tells us it's going to use a react based project with VT. Okay, fine by us, and it gives us a step by step approach. Okay, quo. Now, here's the first major difference. It's asking us to review the plan and tell it if we want to adjust it, if we want to change stuff. Okay, now, on one end, this consumes another credit, more money. On the flip side, it does give us a chance to make sure the model understood the task, the project. Now, overall, I'm leaning more towards this being a bad thing for my taste, and it's a personal preference. See, I don't want to hold its hand. I don't know what I don't know, right? I'm looking for it for guidance. I have no idea if Vt is a good idea, if react is good, right? So I need to be able to trust it if it tells me that the Instagram feed is done, when it's not when it's a fake one, that's not a good idea. If it's asking me for guidance, again, that's not ideal. But okay, let's continue. And here's the thing. After the few seconds, it's asking me to confirm we want to install VT Okay, this is where you have to be careful. You actually have to type in Y in this part here and head enter. Otherwise, you're going to be stuck. So this is not really obvious, but this is why these lessons are so essential but now here's the big issue. After you accept, you got to choose a framework. And, boy, there are many. Because I'm not a developer, I'm not sure what I should select. The model mentioned something about react, but honestly, I'm not sure which one of them I should choose. And this is where GPT 4.1 is vastly different than the other two. Anyway, I'm going to choose react, and hopefully it will continue. But after the second, here's another big blow. It's asking for the variant and many to choose from. This is supremely annoying because obviously we don't know. With vibe codes, we're not sure. We could potentially launch chatgpt.com and ask it about it. We could even start a new conversation here inside cursor and ask the model about the best approach. I'm just going to choose one at random, the first one, typescript, and continue. This is far from ideal for the vibe go does. Experienced developers, sure, they won't have any problems, but for us, it's not looking good. We were previously upset at Gemini for not being able to find some photos, but I think this is much worse. Here's where I got worried for a bit. I was thinking this is stuck. I thought this app dot TSX file just froze everything. But I think it's actually just a very big file. So have a look at the time up to see when I speed up the recording. As this is working, let me tell you these results are not definitive. On your end, you may have a vastly different experience. If I try this exact experiment, once again, I may have completely different results. There are lots of people doing these head to head comparisons, but one thing that's for certain is that results vary. One model may be slow today but fast tomorrow. So these companies have the ability of updating these models in such a way where they simply work better. And some people argue that in different parts of the day, some models degrade. So something like a rush hour at 5:00 P.M. Where everybody leaves work at the same time. So if you work in the morning, the model is faster, but if you work late at night, it's horrible, stuff like that. Now, I can't say for certain that happens, but I have to be clear that results will vary, no matter why, they will vary. But yeah, let's see what's up. So I'm getting a success message here on the right side. It says it's now set up. But on the left side, we can see that the terminal is clearly having some issues. This can be quite confusing. I'm going to stop the time with Doug and see what's up. Let me find the index file and see how the website looks like. But to be honest, I'm quite skeptical. And yeah, here, it's not working. When this happens, talk to the model. Tell it exactly what's happening. The index file is blank, and hopefully the model is going to check everything and see the issue. This is why we're doing this comparison, right? But that's not what's happening here. We can see a summary where well, there's nothing really that clear. So we need another message. Help me see the website and my browser. The goal is to have the model make any changes and fixes, right? We could copy paste that error into Google and see what's up. But first, I want to give the model a chance to fix it on its own. But no, it's not working. We can try again, but it's obviously going to fail. So the best answer is to give the model the error. So just copy, paste it. In most cases, you're going to see the model say something like, Oh, yeah, you're totally right. And yes, here it seems that it ran a command in a different folder, a silly mistake. Anyway, it really doesn't matter. It's done, and I would say this took about 10 minutes or so for this model alone. So much slower than the other ones. But let's have a look. I can't say that I'm blown away. The entire website is offset towards the left. No idea why, to be honest. We can see the images of lacking, and the reviews are shown in an ugly gray. We do have a working map, and this is the only model that gave me an actual Instagram feed, and it's a real one, not a fake one. There is no footer, and by the looks of it, I think the mobile version, I think it's going to be horrible. Yeah. So overall, what's the verdict? Clearly, they are pluses and minuses. For me, I personally prefer clot four, a model that's currently available if you have the $20 plan. If you want to stick to the free plan, you have to switch to clot 3.5, which is pretty good as well. But this is a preference thing. It's Pepsi versus Coke, Android Witz iPhone. U D. These models come from giant companies that throw billions of dollars at these problems. There is no best phone. And on the same end, there's no best model. Things constantly change. For now, I like Cloud four. Tomorrow, I may switch to a different one. What's important is you test everything on your end with the exact same prompt. Do exactly like I did here and tell me your experience. Tell me the good, the bad, the horrible. Let me know in the comments section, what's what, and please post some screenshots. I want to see what's up. Have fun with it. 12. Costs explained in a simple way: Welcome back. I want to address something that's quite important, and that's range anxiety. And here's the thing. Your monthly plan comes with a certain amount of credits, 500 credits as of right now, right? You pay a certain sum, and you get to use those 500 credits. It's 20 bucks at the moment. Now, here's how this goes, the simple version. The free plan, you start off with a two week trial of the P plan. This means that at the moment, you get 150 credits or requests. To see how many you've spent, you can go to your dashboard on cursor.com. This is my current use in this brand new account. You can see I have a total of 150 requests because, again, I'm on the two week trial. Now, on their website, you may see a different number or there may be a promotion, but as of now, that's the situation. Okay, now, this means that you fire up cursor, you choose one of the models, say, Gemini 2.5, and every time you hit Enter, you've spent one request. This is where the range anxiety comes from. You start with 150, then 149, then 140. And after this course, maybe you're going to be left with 20, right? That's when the panic starts to kick in. It's easy to get fixated on that number. Now, if you subscribe to the P plan, which I recommend, 20 bucks. Now you're going to get 500 per month. You previously saw how we made a decent landing page with two, three, five requests. And if you want to polish it, maybe it's going to take you anywhere 20-50 requests. It really matters what you want, how good your instructions are, and what model you're using. Before we continue this discussion about pricing, we do have to address the elephant in the room. The cost varies. So some models are incredibly expensive while other ones may be completely free from time to time without various promotions. For example, Open AI gave us GPT 4.1 and 04 for free. Yes, for free, for ten days or so. Now, at the moment, GPT 4.1 consumes one request, while Cloud four Sonnet, the thinking version, requires two every time you hit Enter, so it's twice as expensive, so that complicates things quite a lot, you know? And here's the kicker. Sometimes you give a model a prompt a task, you want it to do something, and then that model does 20 things one after the other, right? It executes everything on its own, and you're just a passenger. So with one request, you make a whole lot of progress. The model breaks down a huge task into smaller ones, and then bit by bit, it checks them off. It works on its own. Fabulous. But other models are different. You give it one prompt and it does one single step. Sometimes it actually tells you what you should do. So that's very frustrating. This is why the cost is relative. You may say, Okay, 4.1 is cheaper, but if it has amnesia and it needs you to hold its hand every single step and give it four, five, ten prompts, whereas Club only asks you for one single prompt, then does the lower cost really make you happy? No, not really. Again, those are just random examples. I'm not saying that Claude is miles ahead of Open AI with GPT, 4.2, whatever. So just bear that in mind. Now, on the flip side, some models are very expensive, even ten times as expensive, 03, for example. Now, does that mean they have ten times as good? No, that's not the case. Again, things change super fast, and these models are going to get better and better. So here's what I actually want you to take note of. The most important thing out of this lesson, running out of credits is not a big deal. Even if you go through all 500 and you don't have a completed project, which is almost impossible to be honest. You can always buy more. And the price right now ten bucks for 250 credits. That's $0.04 per prompt per task. Again, sometimes one single prompt may take you really far, depending on the model you choose and how clear you are with your instructions. But even if you have average results, right, it's $0.04, ten tasks, $0.40, 100 tasks, four bucks, $4. And you will probably use under 50 a day, especially if you use some of the cheaper models or the ones that are in the promotion. Now, here's where this clicks. The goal, our goal is to build websites that make us money or build projects that will get us hired as freelancers or get stable job, right? That's the objective. Okay, now, if you wanted to hire a coder, a developer, trust me, you would not pay two, three, four bucks per day. No, and I'm talking about an average coder. But here in cursor, you have access to some of the best coders in the world for pennies. An average landing page should take you anywhere from let's say 30 to 100 prompts to be super generous, right? We did use five examples. But let's say it's 50 prompts. Trust me, that's nothing. When you sell that website for say, 500 bucks on the low end, does it really matter that you spent $2 making it? So this range anxiety that you're running out of credits is actually not logical. It's not rational. Most coders ask 25-100 bucks per hour on freelancing platforms. Cursor is cheaper, faster, better, and it's under your control. You won't use hundreds of credits per day, especially in your first few months. Keep in mind another thing. Initially, you won't know what you're doing. You may burn through credits, right? But that's normal. That's how you learn. As you get better and better, you'll use credits more wisely. But for now, please splurge, use them. Don't worry about them. This is an investment into your future. You have to buy a course. You have to buy a few subscriptions, but the overall cost is nothing compared to the upside. I've built actual businesses in the food sector. I've built businesses in the tech industry. I've had teams of dozens of people. The costs are immense rent, utilities, salaries, expensive equipment. The words on the flip side, with cursor, you're paying pennies. There's no better deal than vibe coding at the moment. With a few bucks, with a few dollars, you can achieve so much. So to sum it up so far, if you're in the trial phase, sure, stick to Gemini 2.5, GPT 4.1, and Cloud 3.5. Those are the models that are currently included in the trial that may, of course, change. Test all three of them and see which one you prefer. See what personality you like. I, for example, really dislike 4.1 at times, but keep in mind things constantly change. My advice probably Gemini is a better choice, but you do you. Now, if you want to use Cloud four, you have to sign up to the 20 bucks plan, which I highly recommend. And after you do that, it's very likely that you'll only work with Cloud four for most of your projects. Now, if you have the pro plan, never use Auto Mode nor Max mode. So to keep it simple, Max mode is not for beginners. It's a way in which the model is a lot smarter, but there's a price associated with it. Now, I'm not going to go into technical details about contacts, windows, and tokens. Instead, I'm going to tell you this. You should not touch Max Mode for at least a few months. Even if you have a lot of issues and the model annoys you like crazy, please don't switch to Max Mode. That's a step you should do only after you launch a few projects, and you are far more comfortable with this vibe coding thing. When you're comfortable with Github, with Versll with Super Base, with this entire ecosystem. So with that in mind, you can completely take Max mode out of your mind. And although, again, it's not a good idea, you want to choose one model and stick to it. Now, wrap it up. Don't protect your credits. Don't cherish them. They're an investment into your education and your future. Okay, let's continue. 13. 80%-20%: Come back. Let me be clear. You won't create $1,000,000,000 company on your own with vibe coding, but you can launch products, websites, apps that can generate a good income. One of the main issues is getting that last ten to 20% the way you want it. That might take you an incredible amount of time plus a lot of frustration. So let's do this. Attached, you have this folder. It's one of our previous websites, and there's this product card that looks decent. Okay, pretty good. But maybe we want to make it look even better. That's the goal, right? Improve it. This is the type of thing that may go either very well or horribly wrong. So let's test luck. Please go to the main menu to file and open this folder. You have an archive attached to the course that you first have to extract. Okay, we'll use Cloud for the moment, though you're going to have a similar experience with most models. If you're in trial mode, you can use Cloud 3.5 or Gemini. It won't really change the important part of this lecture. Okay, now, here's the thing. You may want to open up this website so you can see how my existing card looks like. This is my website and I want to use it as a reference, okay? Now, we could potentially write all the changes that we want, and that would save us some credits, but I want to take it step by step. This usually gives you better results. So one single task at a time. So let's say this. For the reviews in the product cards, add the product score with two digits. Make the score bold. And that's because if you simply see five stars across the board, there's no good way to separate them and make a decision, right? If one product has a score of 4.51 versus another one that's 488, of course, you're going to choose the second one, right? That makes sense. So yeah, we're off to the races. Okay, it does take quite a bit of analysis, but that's typical when you import the project. It is going to search through the entire code, and it's going to try to understand what's up. This will take a few minutes. I have to say cloud four seems to be a bit slower than 3.7, but that's just a rough impression, and that really doesn't say much because again, there are loads of variables. After all, what matters is, if you finish the project and achieve your goals, it's like arriving somewhere. It doesn't matter if you took a Uber, your own car, a subway, or a bus. Those are all vastly different choices with different prices and experiences, but at the end of the day, it's really up to you. You're going to get there in various ways. If you're willing to pay for more comfort, the bus is probably not a good idea. But if you're trying to be frugal, the bus may be the best choice. So context, your own context really matters. Okay, fast forward, and it should be done. And here's exactly what I mean. Does this look like what I have live on my website? Not really. Does it look horrible? No, of course not. But it's not what I want. The score doesn't make a whole lot of sense when you pair it with the star system. If it was 92 from 127 reviews, the score would make sense, but the stars those throw me off. And if you're the perfectionist, these types of things may drive you nuts. If you want stuff to be in a very specific way, this is going to take you a lot more prompts and a lot more effort. You could write the prompt in a much more detailed way. But let's continue with this. Let's write the following. Add a view details text that's styled in orange and bold, no background, and add an add to card button that has an orange background and white text. These two buttons should be side by side underneath the rating. Okay. Now, again, could you describe it in a better way? That's a big discussion. Sure. You have an idea in your mind. In this case, we do have a big advantage because we can see the live version. But, yeah, you got to do your best and describe what you want. This is going to take a lot of patience and trial and error. You got to practice to get better at it. No other way. You have to learn to describe things in such a way where the model understands your goals. The model doesn't take everything into account. For example, the existence of the star system. No, you asked for the two digit score. Well, you got it, right? It's like that funny saying, you tell the AI to eradicate all disease on Earth. So it just kills all the people. Now, sure, technically, there are no more diseases, right? It technically did the job, but that's obviously not what we wanted. So you do have to be very careful about your prompts. Okay, let's go back to it. Let's see how it goes. Okay, after the while, it's done. Remember, always accept all the edits. Now we can refresh it. And yeah, again, it's pretty good. Is it exactly the way I wanted it? No, not really. This is the entire thing you need to realize. It doesn't matter what model you use. Sure. There's a question about the quality of my prompt. I could describe it in more detail, right? Maybe provide an image, maybe show it a design made Figma. Sure, but that's a bit more at work. And I'm not against mod work. That's not what I'm trying to say. I'm saying that you should be prepared for this workflow. You got 80 to 90% of what you want. The rest, it's really, really tricky. So let me try one final prompt. Move the weight of the product to the right side of the price, align the weight with the add to card button, make the add to card button blue, change the weight of details from bold to normal. Okay, and let's see how this goes. By the way, while you could, 100% create a shop with cursor, I would still use Woo Comers based on WordPress, or maybe even shop if I for such a project, simply because they're super established, my $0.02. The only exception would be a very simple shop that's based around very few products, or maybe some landing pages for a product. But yeah, coming back, this is, again, decent. It's just not perfect. It's not what I want. We could spend ten, 15, 20 more prompts or we could try various approaches to get it closer to what I want. But I would much rather tell you this, be happy with it. This won't make or break your project. Please don't be a perfectionist. Launch it as soon as possible, see how it goes, find out what people are saying about it, and then only then polish it. It's so easy to get fixated on details, but I promise you, you're just going to lose out. And I'm talking from experience. Launch it and then polish it. And with that, let's continue. 14. From Figma to Cursor?: Come back. The dream of coding a design made in Figma in just a few seconds is not there yet. At least not in cursor. We have a Figma MCP through which we can give cursor access to my designs made in Figma. You do need to set up a token in your Figma settings. It's not very complicated, but you do have to be a bit patient. Don't work along, by the way. Just watch and see what's a now, here's the thing. It sounds awesome, right? The AI can analyze all of your decisions made in Figma and then implement them in a pixel perfect way. After all, that's where we're struggling. The last ten or 20% those details. But even though this sounds amazing, it doesn't work. At the date of this recording, it's actually doing a bad job, no matter what model you use. I tried it with Claude, with Gemini, with GPT, and the results they range from bad to not being able to finish the task. Flow is simple. You design a nice page in figma, then you copy that specific page by using copy link to selection. That's basically the address of that particular page. Then you can start a new project and a new window, make a new folder, as always, and then tell the model of your choice, implement this design, then add the link. It should be that easy, right, that simple. But for whatever reason, it doesn't work. When things change in cursor, I'm going to let you know. But for now, I don't think that this is credits well spent. On the flip side, I do strongly recommend my web design courses, and that's not because you should learn Figma by itself, but because of the design principles inside that course, those make the difference. Things like contrast, make sure people see what matters, hierarchy, guide the eye, big titles, cleared buttons, and so on, white space. More is better. Let things breathe. Don't bunch things together, symmetry and alignment, keep it neat, keep it clean. Typography, not just beautiful fonts, but appropriate sizes, weight and spacing. Now, as you're about to find out, these coding platforms help us with all the complicated code, sure. But if you want a polished design, something that looks good, you got to know these principles so you can guide the model. You have to know what you want to ask for. Things like increase the padding for the card, or make this text H two, this one H three, or how some buttons need to be filled. While other ones need to be pure text. These are the things I teach you in my design courses, and I promise you, this is not an advertisement. It's not me trying to sell you another course. No, it's what you need to take your instructions to the next level and get better results. It's what you need to better describe your ideas. And funny enough, the model hallucinates and it says the website is done. The issue is, there's no files in this project. You can see that on the left side. Nothing happened. That's quite funny. And here's the deal. You can tell the model that you need help to see the website. But yeah, the results are going to be equally horrible. Let me actually just fast forward and show you something. The model did realize the folder is empty, so it tried to make the website. But what it actually did, well, you can be the judge of it. Now, again, I'm sure this is going to get better and better, and in a few months, it's very likely that this will be possible. Whether it's going to be done in cursor or directly in figma, I'm not sure, but I'm confident it is going to happen from Figma to working code. At the moment, you can clearly see how the model just makes something up that, you know, doesn't make any sense, but it does that, so it doesn't completely fail. Doesn't make any sense. But yeah, anyway, this is useless. Don't use the Figma MCP for the moment. With that being said, let's continue. 15. From idea to Cursor to Vercel to live website: Come back. Let me explain the process of creating a live website with your own domain name in a very short amount of time. We're going to start with a totally blank project cursor, an empty folder, right? Create a working version of that website that runs locally on our own computer. Then when we're happy with it, we're going to send it to Github. You can think of Github like Drawbox or Google Drive. It's a place on the web where you can store all your files. You can keep them there. You have access to them from any device, and if you want to share them, that's quite easy to do. Now, once the website is on Gid Hub, we are going to send it to Versll. Versll is a platform that's going to help us publish the website so everyone can see it. In short, VersL replaces a hosting company. After you successfully import it from GITHub, it runs well, then you're going to have a pretty ugly link. That's the final thing. So something like this. But this is still available to everyone. So you could potentially share it with your friends, family. You can show it to the client. It does the job, right? But if you want to take it to the next you can buy a domain name directly in Versll cresbarn.com with something, wait a few hours, and then you're going to have your own address, like I said, cresbarn.com or whatever else. Once this is all set up and working well, here's the thing. You can come back to Cursor and continue to make improvements. The great thing about it is that you can tell Cursor to update Github, and it's going to do it automatically. And here's the funny thing. Then Versll is going to automatically update as well. So that's quite easy to do. The hard part was setting up everything at the beginning of the course. Now it's just a matter of going through the motions, debugging, fixing stuff, various things, right? Now, these issues, they may take us five or six prompts or 15 minutes, or we may be unlucky and we might need 15, 20 prompts, maybe a few hours, maybe quite a bit of headaches. But, yeah, that's part of the game. So to recap, we are going to start with a good prompt, something with a decent amount of detail. Then we'll start building cursor. When we're done, we're going to publish to Github and then to Versll, so it's going to be live and sharable with everyone. Now, you may ask, Chris, why did we sign up to Superbse? Well, Superbse is great for giving users an option to register an account. It's going to handle the complicated database stuff, and with how we set things up, it's going to work automatically. For now, we're not going to use Super Base. For now, we're going to make a solid website from start to finish, we'll publish it, and then maybe later on we'll do something a bit more complicated. And, of course, we are going to use resend to send emails. I'm really excited. Let's get to it. Let's get to work. 16. Let’s understand the prompt: Welcome back. Here's the prompt that we're both going to use. You have it attached, and in terms of detail, it's a six out of ten. If you take this natural sounding prom and you try to improve it in chat GPT, you're going to get a prompt that's far more technical. Typically, that helps, but a complicated prompt might be a bit overwhelming, so I decided to stick to something that sounds natural. We walk, then we run. One of the main issues is this. I say blue and white, but usually I would provide colored codes. You got to be specific. Blue can mean anything from a super light baby blue to a dark, intense navy blue. So keep that in mind. The more detail you include, the better the result. I want to remind you that even if you do everything exactly like me, your website is going to look different than mine. That's just how these models work. But I can promise you that you will have different issues from the one that I'm going to have. I don't have a crystal ball, but I've been at this for long enough to know that that's inevitable. Issues are going to come up and they're going to be of all sorts. Okay, set up a new folder and a new project and cursor, the basics. Please make sure you have everything set up like we did in the first part of the course. Github, Python, no JS, the works. Speaking about tech, I decided to tell the model a few things that it should use next JS and tailwind, resend for the form, and then Github and Versll. And here's why I did that. At the beginning, you start off with a very basic vague prompt, the likes of Make me a website, right? And then you see what the SMOT models recommend, what they use. We already saw how some of them chose basic HTML, CSS, and JavaScript, while others recommended something a bit more robust, a bit more technical, exactly what I wrote here, next JS and so on. If the model that you prefer wants to use this textag, if you see a pattern, then make a note of it. And the next time around, suggest that. That's exactly what I did here. And I also did the following. I spoke to a few coders, and I just asked, Okay, why tailwind? Why not this one or that one? Why react? Why not this or that? And in short, everyone seems to have their own preference. Some people like BMW Pepsi and Android, other people like Mercedes, doctor Peppa, the IOS, who's right? Obviously, nobody. It's what you prefer. And it's somewhat the same thing here. Now, the next thing about the prompt, I asked for something called the PRD, a product requirements document. This is so the model can clearly tell us what's about to happen. The PRD sounds fancy, but it's sort of a checklist. So you know where we're at. So that's the PRD. It doesn't hurt, so always include it. Next, I want to add some images. While we could use an MCP to download some automatically, I think that's over kill. That's too much. Instead, I did this unsplash.com. I selected a few photos that would work for a vet. Then I switched to people for the reviews, very basic, very standard. So after you set up your project on your drive, you should copy the address of those photos and paste it in the main prompt. We have two places here and here. Gotaf. Now, just to be clear, you download photos from Unsplash. You put them inside the folder anywhere. And then we're going to have to move this folder from my desktop to the place where cursor is set up to where this specific project is set up. Now, in my case, I opened up this folder, and that's where we have to paste the images. Now, to get an address from any location, you have to use this area. This is quite easy to get. For the reviews, it's the exact same thing. You get the path, and then you copy it inside the prom. Okay, the rest of the prompt is actually quite basic. The only major thing that I'm asking for is a form to make appointments. But the form doesn't have any advanced functionality. I didn't include a drop down for the services that the client might want. I didn't include the hour. The hour would require us to know the doctor's appointments, his entire schedule. So I chose the simplest version. Plus, I added a phone number so they can pick up calls that way as well. The idea is this, you could potentially sell this website. As long as they have someone answering their phones and email, a basic contact form will do the job. The website will be functional. The cabinet can call back the client and ask him for a lot more information and set up an appointment that way. So I want to be clear. This website can work even in its basic simplest version, though to be fair, you can always add more features and functionality. And you can use this foundation and adapt it to any other type of niche to restaurants, lawyers, anything that you can think of. So, yeah, that's the prompt. It's time to get to work. 17. Start the project: Welcome back. For this project, I'm going to use Cloud four because I quite like its personality. No matter what you choose on your end, you are going to get a lot of issues that might not show up on my end. So please, please be patient. Try to debug and ask for help. You're going to see that your patience is one of the main keys to your success. Now, let's get started. It's off to the races. The model says it's going to make a professional vet clinic landing page, okay? And it's now checking the assets. Assets simply means resources or more specifically, in our case, images. Next, it's going to make the PRD, the document where we're going to see all the essentials about the project. Yep, here we go. It ranges from overview to objectives to tech stack. And here we see next JS, tailwind, resend, erslGiTub the works. And it's not like we know these things, right? But this is confirmation that we are on the right track and the model understood us. And if we do have to use Google to fix any issues, these details might help. Now, I'm going to speed up the recording quite a lot from time to time because clot four is quite thorough and intelligent, but here's the thing. At times, it's really slow. One funny thing is that in the PRD, I noticed something that's a bit of a red flag. It put in the wrong gear. It said that this was created back in 2024, which obviously doesn't make any sense. Anyway, the model is hard at work. If you look in the left panel, you're going to see that this area is starting to grow to expand, more and more files. One funny thing, you may see various vas, various issues, but the model seems to know about them. Now, you would expect that artificial intelligence would write perfect code. But no, even the AI gets it wrong. At least at this stage, I'm sure that as time goes on, this is going to get better and better. If you're old enough to have used Windows 95 or 98, and you now compare it to the latest Windows release or more than that, a recent MacOS version, it's night and day, right? It's going to be the exact same thing here from WinM to Spotify. But here's the thing. As long as the model knows about these issues and it fixes them itself, then we don't really care about it, right? It's not a problem for us with just sipping on a cup of coffee and waiting for it to finish. So overall, it's all good even with these errors. Now, some files take a bit longer than expected, but I think that's because they're quite big. With this model and textag, that's to be expected, actually. And it's a good idea to have a look through them and see what's inside them. You can do that with a single click in the left panel, click on any file, and it's going to open up here. The central part works with tabs exactly like your browser. So it's nice and easy to move around. One of the biggest issues you're going to get in bigger, more serious projects is with the file size. In short, in simple terms, the bigger the files, the harder it is to maintain and update it. Now, better said, you're much better off editing three files that are 300 lines of code versus one single file that's 900 lines of code. For whatever reason, this really trips up the model. In our cursor rules, we do mention something about that to having short files, but the model doesn't always take it into account. And on the flip side, in some cases, it's really not possible to concentrate everything within 300 lines. So that's something that you may struggle with later on in your career as a vibe coder. Now, my advice, start with smaller, simpler projects, and again, have patience. And that's because we are getting serious updates every other week. So it's just a matter of time until these becomes smarter and smarter, and this experience is going to be magical. It's not going to be with so much headaches. One thing to be aware of, when the model is going to finish its job, because we've used that textag, that technology, we are going to have a local server this means we won't have a single index file through which we can test the website. So there's no index file that we're going to use. Now, instead, we're going to get an address that's going to start with local host. Now, I'm not going to get technical. It really doesn't matter at all that much. What you need to know is that the initial version of the website is only going to work on your computer. You're not going to be able to share it with anyone else. Now, if you stick with me until the end, of course, we're going to use Versll and through that, we're going to publish the website on the web so everyone can see it. So stick with me until the end. Now here are a few issues. The model is trying to start a local server, but it seems it's not working. It's not asking us for anything, so we're fine. Nine times out of ten, Claude will figure it out. It will try again, or it will try a different approach. And I love that. Now, I've used this tech combination in the past, and I know that resend is going to need a key. Just to remind you, when someone fills out a contact form and sends it, an email has to be sent to the clinic, right? For that to happen, we need a service, a provider that can help us send that email. And in our case, we chose resend. Resend is going to help us. We've made an account there, but we need to connect resend to this specific project, and that's done through a single key. Now, the model is going to ask us for that key. We're going to handle that, but at a later point, I just wanted to explain the process. I love the fact that this model is chatty, that it tells me how the build is mostly successful and that it has some warnings it has to look at. This is fantastic. And that's because this is a thinking model, so it's a bit more expressive. Now, I can only imagine how hard it is to be a developer, you know, having to know everything by heart, having to remember everything, having to use Google quite a lot. I think it's incredibly difficult. So I'm very happy we have cursor on our side. We gave it one single prompt so far, one single end of key, one single request, one single credit. And so far, it's made lots of progress. Just check on the left side to see how many files it made. It's thousands of lines of code. I'm more than happy to pay $0.04 for such a crazy amount of work. It's fantastic. But of course, after about 25 actions, the model is instructed to stop. Now, some say it's because cursor wants you to consume more credits. So it's a financially motivated decision. I don't think that's the case. Other people say it's a good idea for the model to stop from time to time, so you can actually review the work and put it back on the right track if it messed up. So no matter what, in all case as vibe cods without any technical knowledge, we are going to hit the resume conversation button because we want it to continue. But let's do that after the quick break. I'm going to see you in a second. 18. How to deal with bugs: Come back. We've made quite a lot of progress, but it's normal for the model to stop after 25 steps or so. We have to resume the conversation, which basically means we confirming, we're on the right track, and the model can continue, but here's the thing. Immediately after we click, here's one of the biggest issues with cursor at the moment. It says, Connection failed. Please check your Internet connection or VPN. This is really frustrating. There's no issue with my Internet, and I don't use a VPN. This is a very well known problem. Cursor is working at it, but at the moment, it still happens from time to time. The four rooms are filled with lots of people complaining about it. Now, this is not confirmed, but I do think this might affect our project. When the model stops mid sentence, when the AI is forced to stop when it had planned five, ten, 15 other steps, it's not ideal. Sadly, the try again button will not work no matter how much you click on it. You may try, but it's not going to work. Now, here's the thing. I do prefer to try to click on Accept which is hidden behind it. That's so we can save all of the progress so far. You got to pause for the moment, wait a few seconds, and then finally, if you click fast enough, you can accept all the changes. That's what I recommend you do as well, though I know that may be quite triki this is what I meant by saying that we're early. These are the issues that come up that may annoy you. Fact is, you got to be calm and try to continue. In this case, to fix it, you have two choices, make a new conversation or restart the program. I'm going to go for the second option, so close the program, wait a few seconds, then restart it. Then, of course, wait a few more seconds until it loads up, and you're going to see the previous conversation and the issue. The only thing that we can do right now is type in continue, and this will work. The model is going to analyze the project, the progress made so far, and it's going to try to continue. Now, is this horrible? No, of course, not, but it's not ideal either, because the model does continue. It still has lots of things it still needs to do. But, yeah, I really hope that on your end, you can try to avoid this issue. I hope you get lucky at least for your first big project. But you have to know that as you work more and more in cursor, this is going to be inevitable. I'm going to speed things up until we get to a save point, so to speak. Now, one thing that I love is having a file called project status, where the model tells us what's up. That's very useful, and it's a good idea to glance at it from time to time and see what the model did, what it achieved. Now, I'm not suggesting that you read actual code, but it's a great idea to get used to how these models operate, how they work. Through vibe coding alone, it's unlikely that you're going to become an actual coder, but that's actually not the objective. We can, however, build cool stuff and launch products, launch websites. That's the goal. Okay, let's skip ahead. Okay, here's the summary, and it's massive. There's lots to go through. The model tells us a lot about the progress that it's made, but I'm just going to find the address of the website. Local host 3,000, copy it and then paste that into your browser. So let's have a look at the website. That only took us a few minutes and a couple of prompts. Sure. So issues, but yeah, I think that's fine. And yes, I'm quite happy with it. The first impression is awesome. To be fair, the prompt was in English, but for whatever reason, the model made the website in my own local language funny enough. Now, I guess that's because of the address that I put in funny how that works. Now, we can translate it later on, but, yeah, that's something to note. The website does look professional and quite modern. I'm not sure why the photos don't show up, though. That's something that we got to fix, as well. Now, here's the thing. The goal is to learn from every mistake. Unless you go through several projects, you can't really gain that valuable experience. So I welcome all issues, all bugs. For example, all the images from Unsplash are huge, both in size and in weight. Now, ideally, we would have optimized them. We could use Tiny PNG. We could use ilovemg.com. But because we skipped that, maybe that caused this issue. Maybe that's why it's not working. My advice for the future is you take precautions. For example, here with the language, I just assumed it would use English because the prompt was in English. But as you can clearly see, that's not correct. That's not the case. So that's the approach you need to take. You learn through these small mistakes and you adjust your approach. Ideally, sure, the model would be smart enough, but it can't read our minds. So the next time around, you have to mention that you want the website to be in English, and you should optimize the images beforehand. And though for the mobile version, you can actually resize your browser or you can use a hot key. This is for the Firefox. You can even choose different phone sizes. But the important thing is you look for major issues, spacing issues, alignment problems, things of that nature. But yeah, Cloud four typically does a good job. And yeah, overall, I'm happy. It's not a fantastic design, but it's very solid, and I think most businesses would get more clients to do with. Okay, let's take a quick break. 19. Make the form work: Welcome back. The website looks pretty good, but I'm sure we can translate it, improve it in various ways. But the essential part is the functionality. We have one big feature here, and that's the contact form. Right now, it's not connected to anything, so it won't work. Now, here's the thing. If we fill it out and we try to send a message, it's going to say that it works that the request has been sent. But that's not possible because it's not connected to anything. So this is another point where you have to be skeptical. In case you're not sure about it, you can simply ask the model. Hey, where are the emails being sent? And it should tell you that it's actually not working. Now, in the past, I've seen Cloud 3.7 show an error here, an issue, a problem, and that's a much better approach because as vibe coders, we may be fooled by the model. That's why I prefer to point out these situations. If you don't know, you may be fool. But yeah, going back to it, we have a resend account, and I have to make a key for the form to work. What I love about resend is that after you login, the very first button that you see is add an API key, and that's exactly what we want. And here's the thing. You click on it once, and you're going to see these dots, and that's it. I said before, API keys have to be protected exactly like your credit card number. And let me explain why. Say this is my actual account and I sign up for the paid plan. To do that, I'm going to have to add my credit card, of course, but it's the same thing with cursor. You do need a paid plan after the while to get the most out of it. Okay, now, let's say I show my keys to tens of thousands of students. They copy paste it in their own projects, and they start using it, right? And after a while, I get hundreds of dollars in charges, maybe thousands. Why? Because all of their projects used my key. So my account, so my credit card. They start sending emails, and, of course, resend is going to charge me for. And that's how these keys work. That's why most platforms will only show you your key once and you do have to paste it in a separate file. You won't be able to see it again on the platform on resend. Sure, you can always make a new key, and it won't cost you anything, but it's not ideal to have loads and loads of keys and not know which is which. That's why I'm going to blur out my private keys. Okay, back to the project, you can create a file that's going to store all of your sensitive information. But my first approach, my go to approach is to ask the model to help me out. So let's write this. I have an API key from Resend. Please add it to the project, and I'm going to paste it in a minute. And then I'm also going to give it two specific emails, which you have to do as well. We have from email, which is a standard address that has to be the following one delivered at resend dot dev. This is for testing purposes. If you want to send actual email addresses, you're going to need a verified domain name, something like resbarn.com or whatever. Now, why is that? Well, I'm sure you've seen emails like these. So spam emails that they say they're from Netflix or Amazon or your bank. But these are, of course, fake. They want to steal the information. And if you check the address, you're going to see it's not the official business email from that particular company. So that's what RSNd is trying to prevent. You can't add a fake email address here. Of course, we don't have a real one because this is just a test project, right? So that's why you have to use this specific address for testing purposes, deliver at resend dot. Now, the second email, this is where the email is going to arrive. So after you fill in the form, who's going to get that message? Now, this has to be the email address that you used to sign up to resend. So you can't use any other email. It has to be that specific one that you used on resend when you signed up. Again, this is all for testing purposes. If you're not sure, you can go back to resend and check your account and see what email you used. If you don't follow these instructions, the form is not going to work, and then you're going to be mad at cursor for not doing its job. But the model, it may review the entire code. It may try to fix things, but obviously it won't work unless you follow resends instructions. But here's the thing. Once you figure out how to use this platform, you're golden. You're going to be set for all of your projects. So that's why this is not a big deal. Okay, let's see what the model does. The file that stores all of your keys and passwords is called env dot local. For whatever reason, this is blocked. So the model has to make another file called example. That's quite interesting. We'll see if the model figures it out. I love the fact that Claude is resilient and it doesn't immediately give up. It tries different solutions, different commands. It doesn't always work, but it's nice to see that it's trying. It's putting in the effort. When you're vibe coding, you may be tempted to look at your phone or drift away, but I encourage you to stay focused, even though it may be boring at times. After a while, the model actually says it's going to tackle the image issue. And funny enough, I did not mention it. This is a green flag. This is a positive. The question is, will it actually fix the problem? We are going to see. Okay, let's skip ahead and let's see the summary. Funny enough, sometimes in the summary, it may show you your API key. I'm going to blur that out, of course. But yeah, here we have a few details, and step two and three are exactly what I'm planning. Visit the website and test the form. Okay. But step one, it says I have to start the server myself. And if we try to refresh the website, we're going to see it's not going to work. Okay, so we can't really skip that step. Now, the thing is, it could have done it on its own, but let's handle that ourselves. There's a small run button to the side. Click on it, and you're going to see at the bottom in the terminal, how the server is starting again. A bit frustrating, but it's not a big deal. After the few seconds, we can go back to the browser and refresh. The first thing I want to check is the images. I would be supremely impressed if it fixed that without me telling it to do so. But no, it actually didn't fix them. Okay, let's focus on the form. That's the essential bit. I'm sure we'll get a success message as before. We'll make sure that the emails are being sent by checking out the resend dashboard and then my own personal email. But yeah, here it's not working. Now, here's the thing. Claude does say we need to make the dot EMV file ourselves, so it didn't manage to do it on its own. Again, not ideal. It does give us the exact code. So let's copy it by using this super tiny icon here. Remember, enlarge your interface if you can't see it well, Control plus. Okay, I'm not too happy, but let's do it. So right click in the left panel. From this list, choose new file. Then call it exactly like cursor says dot nv dot Local. Okay, then inside it, let's paste what we previously copied. It's going to be the key and the two email addresses. To be honest, I don't know if the server needs to be restarted, but I'm going to refresh the website and use the form once again. Then we'll take it from there. In the meantime, I'm going to tell Cursor that the images are not loading and that I created the dot EMV file. I'm thinking it should know that we made the file manually. But here's the thing. Actually, the email came through. So victory, good stuff. Fantastic. No need to tell Cursor about it. It just works. Very interesting. You can check that in the recent dashboard, as well. You're going to see there's been an email that's been sent a few seconds ago. So awesome stuff. We made our form work. Congratulations. Feel free to test it out again. But yeah, I'm quite happy we managed and without too much headache. Let's take a quick break. 20. Fix the images not loading: Welcome back. The website is looking quite good, and we've made great progress, but here's the thing. The images don't load. The approach is quite simple. Tell the model exactly that. There's no need to provide any additional context. Claude should review the code and find out what's the problem. Now, it's thinking for nearly half a minute. Wow. Okay, until it figures it out. But after that, it does say it's identified the issue. Now, while it works in the background, you are going to notice it will sometimes lie. Yep, I said it. It may say that it figured it out, but actually that may not be the case. There are many funny images on reedit about this situation. So lots of people have experienced the same thing. Or in the same way, it says, Oh, you're right, my apologies when you point something out that it clearly hasn't done. Now, the first time you see these messages, you may have a positive reaction. But after you see them for the 20th time, it becomes a bit annoying. Here, we can see it's doing a whole bunch of stuff. And after the while, it even checks the dot ENV file that we created before. We made it according to its instructions. Interesting that it's checking it out. It has no connection to the images, but okay, by the way, notice the left panel, tons of files made in just a few minutes with just a few prompts. That's fantastic stuff. Though, to be fair, nobody actually cares about this stuff. All that matters is the end result. And if the project actually fulfills its goals, to get more leads to generate revenue, to grow the actual business, we not trying to generate thousands of lines of code, we are here to fix problems, to help businesses go to a well optimized website delivered in just a couple of days. Okay, interesting. It's going to check the email functionality, which I did not ask for. Now, is this a good thing or a bad thing? On one end, I'm happy it's looking out for us, and it's checking that the project is well built. Okay, good. But on the flip side, we did tell it to fix the images, not to look at the resend key or check the form, right? So that may be a bad sign. It may show that the model doesn't focus on the task at hand. That's why I'm constantly telling you to test it out, create a few projects with different models from start to finish and see which personality you like best. One thing I could switch to a different model right now or at any point, but from my experience, I don't recommend it. Unless you're really stuck and the model is running around in circles, I don't think it's a good idea to switch. Now, here's the thing. When I did switch during something that was quite important, the new model was actually upset at the old model. It did not agree with the structure of the project, with how the code was written. It was quite funny to see. It's like it was really disappointed that someone didn't do a good enough job. So that was fantastic. And rather than continuing with the old model left off, it actually started rewriting different parts of the code, even though I didn't ask for that. So that's why I keep saying that it may be a good thing what's happening here or it may be a bad thing. But let's skip to the summary. In most cases, it will say it's fixed, but you should always be skeptical and triple check. So let's have a look and see. And, yep, that's exactly what I mean, issues left and right. The problem, though. This is something that you need to get used to. All that we have to do is copy this entire thing and paste it back into cursor. By the way, sometimes you're going to see a few files referenced above the chat. You can leave them or close them. It really depends on the situation. Here, I don't think they need that, so I'm going to close them. Now, another thing, we could potentially connect that browser to Cursor, but I would just rather copy paste some issues. Most people say that they have a better experience by using the brave browser in combination with cursor. But I prefer to stick to Firefox and just copy paste any issues. Okay, just as a side note, it seems the issue had something to do with caching. Okay, that's okay by us. That's fine. We'll wait until the model fixes it. It may take a while, but I'm going to speed things up. Okay, now, let's have a look at the summary. Again, the model says it's fixed. Okay, let's test it out. Now, one of the biggest issues with vibe coding is trusting the model, trusting artificial intelligence. See, if it lies about small stuff, what happens when you have an actual project or an actual client and thousands of dollars are at stake? That's the biggest problem. Issues, bugs are fine. We can fix them. It's all good. But Again, it's not working here. The instructions don't tell us we have to do anything else. Just visit the website and the images should load perfectly, but that does not happen. I'm pointing that out because sometimes we may skip something. You know, we may have to do something manually, and if we don't read the summary correctly, obviously, we may miss it, and it's going to be our fault, like it was the case with the dot EMV file, we had to make it. But here, no, it should work, but it doesn't let's tell the model that only a few photos load and that it should review the entire code and fix the issue. Okay, this is going to take a while because I wanted to review the entire thing, the entire code base comprehensively. This means we're looking at a few solid minutes of waiting. Luckily enough, this is a recording so I can speed things up. But yeah, in your case, you're going to have to wait quite a bit. I'm just going to skip to the summary, but here's the question. Do we actually care what was the actual issue? Now on one end, yes, because maybe we can prevent it from happening again in our next project. So that's one thing where you should pay attention to every single thing that's happening in the chat. On the flip side, no, not really because the summary should tell us what it fixed, you know, what was the issue and how it fixed it. That means it's really up to you if you want to review every single step, read it, try to understand it, and see if you can adjust your approach in the future, if you can do something differently. Okay, so the summary, actually, it doesn't say what it did, stuff like proper image sizing, which doesn't tell me much. It does say it disabled something about image optimization for debugging purposes. So this part tells me that the issue is possibly related to the image size. Okay. In any case, let's have a look and see if they all show up. And yes, victory. All good. Finally, one thing that's a side note. I have to say that the main image doesn't make me happy. The position doesn't make a whole lot of sense. But overall, it's fine, and I'm okay with the fact that the images are loading. We fixed that. The form works. Now it's time to continue. Let's take a quick break. 21. Upload the website to GitHub: Welcome back. The website is up and running, but it's only on our local computer. We want to be able to share it with the world, so we're going to have to upload it to GitHub. So let's tell the model to do exactly that. I also like to mention the fact that it should use the Github MCP, which should prevent the model from asking us to do stuff manually. Ideally, I'd like to not even touch GitHub. The model should do everything. Please be aware of one thing. You do need to add your personal token inside the Github MCP inside cursor. Without that key, this won't work. Okay, it's going to look at my account, see what's up and create a new project. This is called the repository. That's the correct term, but you can remember it like that. Project repository. Same thing. We can see it's using the MCP tool, which is a good sign. One potential issue that I see is the sheer amount of code that we've created there are lots and lots of files, but we'll see how this goes. Ah, it seems there's a problem. It says the Github MCP doesn't actually work. Okay, let's check it out. Click on the settings icon in the top right side, and that's going to open up cursor settings. And yes, for whatever reason, nothing actually works. All of them are red, which means there's an issue. To be fair, there's quite a lot of them activated. We have passed the limit, but even so they shouldn't all be red. That's a bit odd. Now here's the thing. The model is actually still working in the background, well, on the right side, but it won't be able to do anything. Maybe that's why we had some issues with the photos as well. One thing we can do is to try to edit one of them and then come back to the MCP tools. That should initiate a refresh of sorts. And in the past, that did solve some of my problems. But now, here, it's still not working. I say it's best we stop the model. It's one of those few cases where that makes sense, because if you leave it working, it may do more harm than good. The only thing I can think of is a classic restart. The good old, have you tried unplugging it and then plugging it back in. Okay, let's have a look. So wait a few seconds. And now, yeah, one by one green light, which is equally funny and annoying. What can I say about it? What can we learn from this issue? I have no idea what caused it, and I have no idea how to fix it. Restarting doesn't make any sense. Even if I were a senior developer with 20 years of experience, I don't think this would make sense. The only potential thing is this, maybe try to disable a few MCPs that you don't typically use. Github obviously has to remain active. Okay, once we have a green light, let's go back in the chat and give it the same message, but I'm also going to tell it that I plan on using Versll that may help the model prepare everything, so we may have fewer issues down the road with VersL. Okay, this is going to take a while. I'm not sure if it's due to the fact that we have lots of files or how big they are or on the flip side, it may be due to the fact that at this time of the day, lots of people are using Cloud cursor. Fact is, it slowed down quite a lot. And in the meantime, let me tell you a few things about Github. Now, the cool thing is, you don't have to do anything on github.com, but then how does it help? Well, GitHub becomes more than just a middleman between cursor and Versll. When your project is up on GitHub, you've created a version control backup that's public or private depending on what you choose. Now, what's Version Control? So let's say that this is going to be Version one with a very basic form, very simple, right? Then you may create a much more advanced form where maybe the visitor can choose an hour, services and other stuff, right? You bring it to the client. You make it live. But after a while, you get a phone call. Hey, Chris, I'm having fewer appointments. People are not liking the new form. Can you please bring back the old one? Oh, that would be painful. You would have to go back to cursor and strip away all that extra code that may give you bugs. The form may break, the entire website may break. But this is where Version control comes into play. With GitHub, it's like a save game load game situation. You simply go back to the previous version or any version, to be honest. As long as it's on GitHub, you can have multiple ones. You can have separate versions based on colored schemes, functionality, layouts, you name it. So GitHub helps you organize all of that. Version control. Now, is it super simple? No, not really. It takes a while to get used to it. But because we have cursor, we simply tell the model what we want, and it will do it. We'll just say, Hey, bring back the red colored scheme version or bring back the contact form that had only three fields. That's version control. That's the power of Github. Then public or private. Public means other people can see you at work, and that's super useful in case you want to get a job or you want to collaborate with other people. If you want to show off at work, what you're able to do, sure, make it public. Most likely you're going to keep it private in case you want to sell this website to a client. So that's version control, public or private. But the most important thing, this is the perfect bridge between your local code and cursor and deploying it online, publishing it. See, platforms like Versll are deeply integrated with Github. So when your site is ready to go live, Versll can look at your Github project and say, Okay, I see your files, I see your settings, I see your latest changes. I got this, and it's going to publish. That means you don't have to do anything manually. You don't have to upload files or make any settings. You don't need a hosting company, nothing. You just connect Versll to your GitHub repo, which we're going to do in a minute. And then boom, that's it. Your website is live. And this is supremely powerful because it keeps everything automated and clean. If you make changes to your project later on in cursor, you're going to ask the model to update Github, and then that's it. Automatically, Versll gets a signal to update the live version of the website. No extra steps. It's all automatic. It's all wired together. Fantastic. So in simple terms, cursor is where you build the website. Github is where you store it, and then Versll is where you make it live for the world to see it. Okay, going back to the project, it seems the model stopped. For whatever reason, it looked at the rules we set up. And then it stopped. This is quite strange. The best way to go about it is ask it. Did you upload the website to Github? Can I push it to Versll and see what it says? Talk to it like you would talk to a developer, ask it questions when you're not sure. And it seems like it's restarting from scratch. I'm not sure why that's the case. So let's see. After a while we do get a summary that makes zero sense. I'm quite sure it's hallucinating, that it's imagining stuff. So I'm going to do this. I'm going to make a new chat. Let's pause though, and we're going to continue in a second. 22. When to start a new chat: Welcome back. Inside the new chat, let's tell the model that the website was partially uploaded and that it should use the Github MCP to finish the job so we can continue to ver sell. Okay, we saw how the model struggled to upload the website to Github. Now, in the past, this was always a two minute job for me. But here, the model is really having a hard time. Sure, initially, the GID Hub MCP did not work, of course, but we fixed that to restart. Now, there's no reason for it to work so slowly. When you see any type of degradation, when you see that the model isn't replying correctly, it's time to start a new chat. You can do that from the top right side. Cursor will also tell you when that's the case by showing you a message in the bottom right side. Though, to be fair, this shows up quite early and quite often. Now, in short, if the conversation is way too long, the AI won't work as well. It's going to be overwhelmed. That's why it's best you break up your project into several chats. For example, translating the website should be done in a new chat. If we want to improve the form, add a few things to it, again, a new chat. If you want to change the color scheme, again, new chat, and that's going to give you the best possible results. On the flip side, when we struggled with images not loading, it's best to stick with that conversation until you get to a conclusion. Either it's fixed or the model makes absolutely no sense, and it's clear you can't continue with it. Here, I have to tell you that this well, it was a nightmare. This took ages, something like 45 minutes in total. Every single file took a very long time, and more than that, incredibly annoying. The model said at one point that it didn't see any project on Github and it decided to make a brand new one. This is, of course, very frustrating because we just said it was partially uploaded. I would have appreciated the model stopping and asking me about it. Instead, it carried on. Now, to be fair, I'm happy with still making progress, but now I'm going to have to clean up the previous project on Github. I'm going to have to remove it. It's just a few clicks. It's not hard to remove it. But I don't like the fact that it couldn't see what we just did a few moments ago and the fact that I clearly said in the prompt that we partially uploaded it. To be fair, we did start a new conversation, but even so I was expecting a bit more from it. After quite a lot of waiting, the website is finally uploaded onto Github. We can see all the files when it was uploaded, as well as a description. What I love about these models is that they write a lot of details. Everything is clearly explained. This is going to help everyone. It's going to help yourself, any potential employer, any coder you may work with, but also any other AI model you might use in the future. Because that's the thing. Maybe you continue with this project with another model, but maybe you launch a version. It's working well, but then you want to hire a coder to fix some issues that you can't manage yourself. With everything laid out so well, things are going to go smoother and faster. And with that, we can take a break and we'll soon go to Versll, which means we're going to be able to share the website with anyone. I'll see you in a second. 23. Publish the website and share it with anyone: Come back. Our website is up on Github, and that's great because Versll is integrated with it. And here's how this goes. I already have one project here, but you'll skip to the next screen. You'll see this one here. So that's what you're going to see when you first start VSL and give it access to your Github account. Here, we can see the VDClinic project is the first one in the list. We need to click on Import. Then that's going to start the process. To make sure things work well, we need to do a bit of setup, but it's just a bit, and that's done by clicking here environment variables, which sounds super fancy. But actually, we just need to paste the recent key and those two email addresses. That's it. Nothing more. Now, after you do it once, you're going to see how easy this is. Okay, back into cursor, you have to open up the ENV file that we previously made. From here, copy the left side, the resend API key. Then go back to Versll and paste it in the left field. Eight. Now, repeat for the right side. It's exactly that easy, nothing all that special. Of course, you're going to have to use the add more button because we have three things in total. So the key to email. And then finally from email. I'm going to speed to the width, but yeah, I'm happy that this is so simple. Now, this is a podcast where the founder of VersL is saying that the whole approach is to be able to launch a website in no time at all. That speed for them is crucial, essential. And you know what? After using this service for the while, I have to agree. I've made multiple accounts, and it's always a breeze. Oh, please make sure you copy paste with precision. Don't leave out any characters and don't include any extra spaces. That may cause huge issues because it's likely you won't get an error about it. By the way, developers don't say, Let's publish a website. They say deploy the website. And this is going to take a while, usually a minute or two. Though in most cases, the first time around, the deployment is probably going to fail. It's not hard to fix, but we do have to wait until the process is done. You should already notice the copy icon from the top right side. That's what we're going to use to grab the issues, the errors, and then paste them back into cursor, because I'm sure this is going to be quite inevitable for most projects. We have a few problems here. Et's transfer them so cursor can fix them. I'm going to provide a bit of context. I'm going to tell the model that I'm using Versll and that I'm getting these errors. Then I'm going to paste the whole thing. Okay. Yeah, so it seems like there's an issue with NextGS, which is totally fine by us. We don't really care. As long as the model is able to identify and fix the problem on its own, I'm happy. Now, this may take some time because the AI has to review several files, but then it also has to publish them to Github. Remember that? Versll takes all of that files automatically from Github. If we're lucky enough, this shouldn't take too long, but we'll see if that's the case. And sadly, in this case, in this evening, things are quite slow. Actually, this took about 40 minutes 40, even though this isn't anything all that complicated. I can only imagine how annoying this must be if this is your first experience with a more serious project. But I'm quite confident that things are going to get better and better. The guys at Cursor are constantly improving things, and they've actually just announced a Winclick install for the MCPs, so you no longer have to deal with those bits of code. So far, we don't have a lot of tools, but it's still progress. Another thing that's worth noting, Versll will constantly try to publish to deploy the website. So in case you check it out and you see a lot of red, no worries, it's not a big deal. You may also get a ton of emails about the failures. We could potentially pause Versll until the model finishes its job with GitHub, but I'm going to keep it running, even though we're going to get quite a few messages. Okay, it seems like the model is done. Awesome, but we'll have to wait and see if we're going to get a green light. In some cases, you may have to copy paste a bunch of times, so cursor has to fix multiple problems. It really depends on the project type and how well the model is performing that particular day. One thing, though, please remember there's a small delay between updating Github and Versll noticing it. It's not long, maybe a couple of minutes, but don't panic in case you don't see a new deployment here. A new deployment simply means Versll is trying to publish the website yet again. And we can tell that this building by the yellow light. We can actually click on it and get a few more details. Inside, we get a bunch of information, but we're actually only interested in the status. Is it green or not? In case it's red, we're going to do some more copy paste action. But hopefully, fingers crossed, it's going to be green. At around the two minute mark, I'm a bit anxious, but I'll wait a bit more. Though here's the thing. You may want to refresh just in case. And yes, victory. It's ready. It's green. We're all set. Let's have a look at our website. Of course, the link is going to be quite ugly and complicated, and the images don't seem to load. But yes, the website is live, and now we can share it with everyone. Is this a win? Yes, it's still great progress. We can fix anything now that the chain is established. Cursor Github Versel. Let me take a quick break and we'll come back to fix any issues. 24. Translate the website: Welcome back. We've made solid progress so far, but let's keep at it. Start a new conversation and ask the model to change the language to English. Now, in case you don't have this issue, you can work on any other part, and there's a lot to polish up. Now, here, the model gets to work quite fast, and it seems to understand what it needs to do. On my end, I'm expecting this to take a few minutes, actually, fairly short. But keep in mind this is fairly late in the evening, and a lot of people on Redi it speculate that this is the rush error, that this is not ideal. But here, the model is moving along bit by bit. I want to mention something. In my previous projects, I've had quite a few issues with updating them. Adding simple things, adding various updates, various small bits. Any simple changes caused the model to review the entire project, which is totally fine, sure. But at times, it's also remaking stuff, redoing stuff it shouldn't do. For example, you ask it to fix the styling of a button, let's say, right? But then it implements a whole design system. Basically over kill, using a sledgehammer to swat a fly, right? And here's another example. I upgraded one of my Android apps, and I wanted to use material Design three. It just got launched, right? And that took over 45 minutes. And then loads of issues, tons of prompts. And after it was all said and done, after 45 minutes, the app looked identical. No change whatsoever, but tons of files, tons of code. This is why experienced developers don't take vibe coding seriously. Sure, you can launch a project, but then constantly updating it, maintaining it. That's very hard to do. So far, I've managed to do it, though I think you got to adjust your expectations. If you do that, you're going to be good. And here's how I look at it. Once you have validation, once you see that the project is getting traction, you can level up your subscriptions, so you can do a better job. You can use smarter models, or on the flip side, you could hire a developer, and the costs could be quite a lot smaller because you did most of the heavy lifting and everything is well documented. But again, on the flip side, it really depends on the nature of the project because I've worked with lots of coders that approach a project in a very, very specific way. They only use certain tech, and it's something like saying that you never drink anything other than coke, for example, that you always use an iPhone, nothing else, you know, Code does have a similar approach. They're somewhat rigid because they know what approach gives them the best outcome. So that's why, for example, certain developers don't like Wordpress, or they would never use Magento and so on. So there is a small chance that whatever you may use next JS, right, maybe certain developers won't like that, and in that case, that may be more expensive. Things are very much fluid and ever changing. The thing is, the rate of improvement is fantastic. Oh three just got slashed. It's now 80% cheaper. And yeah, things are getting better and better. But even at this point, you can still deliver working projects that do the job. They may not be the most complex projects, sure, but you can do it. And after the few months, when the models get even better, you're right there in the driver's seat. You're right there and you have experience. You know how to work with models and various platforms like Github, Versll and so on. So overall, you're going to be golden. Right. At this point, this is a bit ridiculous. The progress is at a snail's pace. Cloud four is dragging its feet. This is why I'm telling you, you got to be patient, zen like, and let all the frustration wash away. The task is very, very basic, yet Claude is acting like it's moving mountains, you know? So what I'm going to do is I'm going to dramatically increase the speed of the video so we won't be here all day. But I really wanted to include all of these bits, even though I could have easily cut them out from the course. For me, it's essential that you know that waiting around is actually a big part of vibe coding. Getting bored, sure, that's not ideal, but that's the price we sometimes have to pay. Keep in mind, your experience may be vastly different even with the same model. But again, the other side of this, you should really try the same approach with the exact same prompt with a different model. For example, say Gemini. Thing is, these companies are in a massive war. Google and Tropic Open AI, just to name a few. Twitter with XAI. The Chinese companies are doing fantastic work. Of course, meta, Facebook. They're also big in this AI space. So this is as exciting as ever. And we as the consumers, we are going to benefit. Imagine the top car or phone companies having such a battle. But here's the thing. The cycle takes weeks, not years. So with getting better, faster, smarter cars and phones, cheaper ones as well. But that's happening super fast, like every two weeks or so, you get a brand new project, leaps and bounds ahead of the previous ones. This is fantastic for us. Okay, it seems like we got to resume the conversation. Okay, no worries. But of course, we getting the same problem as before connection problems. Okay, by the way, my speed here, the Internet speed is fantastic in my country. One of the fastest in Europe. But okay, let's fix it. Here's the thing. Instead of restarting cursor, we can also do this, start a new conversation by using the top right icon. Then look down and open the previous chat. You're going to see the same issue, but here's the difference. Now we can type and continue, and hopefully we can resume the process from that spot, give or take. That's the plan. Anyway, there's no guarantee. So let's see what the model says. And yeah, it's really, really thinking about it. So I think I have to speed this up. Okay, it says the translation is done, and that is going to push everything to Github. Okay, that's fine by me. I'm going to let it work in the background. And after quite a lot of time, I'm still not over the thought process of this model, how it gets confused, how it sees a situation, and it tries to fix it. But yeah, let's just skip ahead because it's quite likely that your design is already in English. I really think the location of the clinic determines the language. Let me know in the comment section, if on your version, you got your own language based on the address of the clinic. I, of course, use the fake one, sure, but I use the random one from my city, from my country, hence the language. Oh, wow, something is wrong here. For whatever reason, the model is asking me to go to Github and create a new project. And this doesn't make any sense. Clearly, it's gone wrong, and this is a sign that we need to switch to a new chat. If this continues for another three, four, five prompts, I'll probably switch models. By the way, always check if the Github MCP is up and running. If it's red again, if it's broken, that would make sense. But on my end, it's fine, which means the model simply didn't follow my instructions for whatever reason. To prevent that, I'm going to grab the repo link straight from GitHub so that I have no questions about it. If we point the model directly at the project on GitHub, it should be able to update it without any problems. And by the way, this is the situation where you can use a different model. The task is super simple. It doesn't need any other context. It's just uploading some files to the web. That's it. So in these cases, there's little to no risk. We're not asking the new model to completely understand the code or improve it. No, so this would be a good chance, but I want to continue with Cloud four. I want to use it from start to finish because I believe that's how you should work, as well. Use it, get frustrated. Make a note of all of the issues that is causing, and then compare it to something else. That's the best way to learn. Here, we have a new issue the first time I'm seeing it, a rate limit with vertex, no idea. And it's asking us to use the Auto Select model, which is not ideal in that case because we want to learn. It does say we can wait a few minutes and try again. That's what I'm going to do. And now I'm going to hit resume and see how it does. Now, while this is working, let me tell you why auto select is not a good idea for us. We want to learn about these models. We want to see stuff like I don't know, for example, I don't know, Chat GPT 4.1 is not able to move images around, okay? What how Claude struggles to translate a website? What how imini is horrible at spacing, What alignment? You can only get to these conclusions which are fake, by the way. If you use those models for hours on end, maybe tens of hours, I still stand by the statement. Models change all of the time. They evolve, even though they have the same name with using Cloud four here, but the Cloud four you may use in a week, in a month, that may act in a completely different way. Why that's the case is a bit more complicated. Maybe anthropic, the company behind it adjusted it slightly. Maybe Cursor made a few changes. Maybe there's fewer people using it at that moment, or maybe the servers have been upgraded, so more people can use the model at the same time, but without any degradation, it's tricky, it's complicated. But, of course, here's another connection failure, which is fantastic. That's quite something for such a small task. Again, calm. Let's make a new chat and then come back. I want to continue that conversation because I feel we're close to a result. So let's see what's what. The model mentions something that's just about done. To be fair, don't believe it. Always check. I don't think anything has been updated. You can have a look on Github and see when the last push happened. Push simply means update. But yeah, tons of issues. Super buggy. This is a horrible experience, and as you can see, it has nothing to do with the actual website or vibe coding. It's just the process of using a model that's overwhelmed, at least at this point in time. From GitHub, we can see that the last push happened 5 minutes ago. That means that Versll has probably updated something in the meantime. So let's check the latest deployment and see if that's the case. Let's have a look. And, yeah, this is in English. We got to check the entire thing, though, from start to finish and see if it's completely done. I think it's about 95% translated. There may be a few bits here and there, but overall, it's fine. But what's happening in Cursor, though, I have no idea. It seems like the model wants to make a new project, a new repository on Github. I have no idea why it has such horrible amnesia. I think that may have been an outage of sorts. Typically, Cloud four works much better than this. We can try seeing a thought process, but to be honest, I'm really not that curious. Fact is, we are live. The website is translated, and even though this doesn't feel like a victory, we still made progress. So let's take a quick break, regroup and see what we can do next. Thanks for sticking with me, and I do hope that this does not discourage you from vibe coding. We are early and it shows, but I'm quite confident that these issues are minor issues that will soon get fixed. So overall, let's continue. I'm going to see you in a moment. 25. Buying our own domain name: Welcome back. The road was bumpy, but overall, we've managed to have a good looking website. That's in English with a working form, and it's already hosted on Versll. This means we could share it with the world, but here's the thing. The link is quite ugly. For testing purposes, this is just fine. If you want to present your work to the client before the project goes live, again, totally fine. But what if you want a nice link, a good address? That means you got to buy a domain name. You can do that straight from VSL. This is my account in the top left side. And here we can see with inside the project. Okay, from the navigation, we can go to settings. In this new page on the left, we can find the side bod with quite a few options, but we're interested in domains. And here we are. This is the existing link, which is path from ideal. So let's do this. Let's use the By Domains button and see what's available. Now, short snazzy domains are almost always unavailable. Tons of companies have bought thousands of domains, and they've made a business out of reselling them. My advice stay away from that. Use your name or a word that means something to you. And here's why loads of years ago, your domain name really mattered. So having something like Photoshop tutorials, that would have been an advantage. But nowadays, that's not the case. That's irrelevant. So I'm going to use my own name, but the.com version is not available because I already bought it. What I love about Versll is the fact that I get maximum transparency here. We can see all of the available options. Some of them are incredibly expensive. For example, res barn.ai is a whopping 149 bucks, and that doesn't make any sense. I do see a.net version here, and it's only 12 bucks, and I think that makes sense. Versll already has my credit card on file because I made the previous purchase. So all that I have to do is confirm that I want to buy it. Of course, I'm going to have to confirm the transaction with my bank, but that's not a problem. It's the same as with any transaction on the web. But, yeah, that's all it takes to pile a domain name simple as that. Now we're going to see it in this dashboard. But let's go back to the project so we can link it. So from the homepage, click on the VT project. Now inside it, we can see domains in the top right side. It's not exactly obvious, but you'll soon get used to Vasels interface. Okay, let's click on it, and now we're back to this point. Only this time around, we're going to click on Addmain. And of course, we're going to select chrisbarn.net that we just bought. Please check this box. It's an important setting. Now, Vasl is going to ask us if we want to upload the production version, and of course, that would be the case. And that's because we could potentially have a different version, and here's why. We can launch this website as it is, but then we can continue working at it. Maybe we have a test for just a few friends, a new version that's slightly different. So that's where multiple deployments come into use. But that's not the case here, so let's keep it simple, you know, hit save, and then we're going to have to wait just a bit. There are loads of details that we could potentially dive into, but I want to stay focused on nailing this process from idea to launch the website as fast as possible. The SSL certificate is something that most websites should have, but it takes a few minutes to generate and set up. I'm going to skip ahead and yes, here we are. We can now visit chrisbarn.net. This is a lovely website. We no longer need that ugly link. It still works, but now we can use this one. So we all set, the website isn't polished. It needs work, but the first thing is fixing the images. They're not loading. So let's go back to Cursor, open a new chat and tell the model exactly that. Actually, you know what? It may be a better idea for me to restart the program considering how many issues we've had. Honestly, I don't know if a restart actually helps, but I did see the model is having issues, even writing out words. So not actual code, but sentences, which means the performance is really slow. It's like I'm using a video computer, which that's not the case. But yeah, let's see what's what. So the prompt is quite simple. The images, I'm not loading, fix that and update the website. Now, that's a bit vague, to be honest. I should have mentioned the GitHub link. So yeah, we'll see if this is going to go through. In any case, with off the races, we'll see what's going to happen. So the model sees the images and it starts to investigate the problem. Okay, the speed seems a bit better. It seems the restart might have helped just a bit, but it's early days. So let's see the project up and running, and then we'll decide but from what I'm seeing, no, it's actually still struggling. Well, maybe that's not the correct word struggling, but I was expecting the problem to be something quite simple to fix, like a few lines of code somewhere, but maybe the files would not upload it to Github because of those issues, you know? But the model though, clot four is really tto. It's really taking its time. And from what I see, it's starting up servers. It's creating a test page, a test server. And this is actually quite impressive. This is a green flag, even though it is a bit annoying, to be honest. So, have a look here. It makes a server in which we can test and see if the images are actually working, if they're loaded up. And this is fascinating. And yeah, we can see 11 out of 11 images are actually being displayed. Though, to be fair, have a look at the sizes. These are absolutely massive. So that's a problem we could definitely fix for future projects. But to be honest, I actually knew that this was likely to cause an issue. Now, here's the thing. So models may optimize the images for us, whether you ask it directly or what the model suggests it. That was the bit that I was trying to capture in the recording. Here, though, it did a lot of harm, but still it's a good learning experience. So now you can avoid that. So let's zoom ahead and see what the model is up to. So fast forward, and I think it's done. The summary is massive. Impressive. Lots and lots of lines. That's quite helpful because we can read something in plain English. However, the question is, did the model fix the problem? We first have to check Github. If there's no recent update on Github, there's no chance that the working version of the website is going to show us any images. Remember, we're still relying on Github as an intermediary between cursor and Versll. And no I don't see a recent update. The model either forgot or it didn't understand my prompt because to be fair, I was a bit vague. But no worries. Let's do this. The project is here and I'm going to give it the actual link. That should prevent any potential issues. Okay, let's see what's what. Okay, the model seems to understand. It's opening a terminal, and it's probably going to check stuff out. This sometimes takes quite a while. And sometimes it actually freezes. That's a big issue because there's no progress bar. There's no good way to check and see if it's still working or not, with at least not one that I'm aware of. What I like to do is just click here on Move to Background. This is very, very small, but I hope you can see it. And this acts like a bit of a refresh. Now, after the few seconds, it does seem like it's still working, so we're back on track. Now the task is straightforward. Upload some files to Github. This should be easy, right? By the way, we could potentially use the terminal and upload the files ourselves. It's actually not that hard. The commands aren't complicated, but here's the thing. I want the model to do it. It can do it. So, of course, it should do it. And on the other end, I do prefer to find out its limitations, you know, find its personality, explore it, see what's what. Of course, we could do more work ourselves, but that's not the point. Sure, if something is impossible, the model can't actually do it. Of course, we're going to do it. But when I know for the fact that the model can do it on its own, then I won't get out of my chair to help it out. If it's more than capable, then it should do it. But yeah, this is taking ages. This whole process took about 25 minutes. Incredibly frustrating. And here's the thing. After the while, it seems to have restarted the thought process, which is not normal. It's thinking again and planning the next moves. It's just file uploading. That's it. So it's like someone unplugged the model and then plugged it back in. Amnesia, I forgot. Sure, it didn't fail. It didn't ask us for help. But it's somewhat hiding the fact that it failed, which is a big red flag. These models are trained to not fail to cover up their mistakes. Combine that with the 25 step timeout and the fake connection issues. And I can see why a lot of people are not in love with it, especially senior developers. Now, I want to be open and transparent about these problems, so you know what you can expect. Some vibe coders think that they can actually replace Senior codes just like that. But being arrogant doesn't help, especially when the performance just isn't there. But I'm going to skip ahead and here's the summary. It seems it managed to finish, though, we do have to check. I don't trust it. It does say that we need a key for resend and other stuff that doesn't make any sense. So I'm quite skeptical. So let's check out Github, Control R or F five to refresh. And that's an update that was just made. By the way, 45 commits, 45 updates. That's way too much. That's ridiculous. That's a sign. The model tried way too many times. Something was clearly off. Now, let's check Versll They be aware there's a delay. The latest version is the existing one, so nothing has probably changed. No images to see in that version. But yeah, after the few seconds, a new one is going to pop up and inside it. Yes, we do have our images. It wasn't easy, but we managed to pull through. Now, I hope you managed to get to this point where you have a working website without any major bugs. Now, let's take a break and we can see what we can improve. I'm going to see you in a second. 26. Improve the website: Welcome back. At this point, with all set, there's a connection between cursor, Github, and Versll, which means we can continue to work in cursor, and the website is going to automatically update fantastic stuff. Of course, there are many ways to work. For example, we can test something out, then come back to a previous version. After all, that's why we have version control on Gid Hub. But I'm assuming we're going to constantly push updates, we're going to continue, then let's see how this goes. So we're going to focus on cursor. We're going to tell the model to update the color scheme. I want a dramatic change, and I think it should be fairly obvious, you know? So let's do that. Let's change the color scheme from blue to red and then push the update to Github. Here, to be honest, considering our experience, I could have provided the link. But in the past, that was not needed in my previous projects. So fingers crossed, let's see how this goes. Keep in mind that all of these videos are recorded one after another. So if there's a traffic jam, there's a good chance the performance won't be great. It's going to be as bad as the previous videos. But here's the thing. If the model makes a mistake, I would much rather show versus, you know, showing an edited version where everything goes perfectly because here's the thing. When I was learning to vibe code, I watched so many courses, tutorials, where, you know, it said, step A, B, C, and then success. It sounded awesome. But on my end, I spent hours on step B, or I couldn't even figure out how to start step A. Things like, create a quick Python script and run it in your terminal. Those things annoyed me. I had no idea, no context, no clue. Or when I was trying to fix an issue, I was asked, you know, things like, Okay, what terminal are you using? That's where you got to be patient. You got to be Zen. You got to try out various things until it works. Ask the question in different ways, and continue to look for the solution. So that was my experience, and that's what I'm trying to teach you, as well. Now, back to the project. This is taking forever. But let me zoom ahead. Okay, here's the success message. Let me check on GitHub that we do indeed have an update. And here's the thing. The model actually made a new branch. Woof, that's not ideal. I'm going to explain what that means in a second. Still, let's see if it worked. We got to check Versldoh. Here, we got to wait for the few seconds because the latest Github update takes a moment until it goes to Versll. But fast forward, and, yes, we have our red colored scheme. The model did the job. It didn't push the update correctly, but this is a good learning experience, something to make a note of. First of all, we can do this. Because the red version is not the main one, we can actually click on it and then choose to push it to production. That means cresbarn.net will finally become red. So that's one thing that we have to do. We're going to have to wait though until it builds, but I'm going to speed things up. Now, here's how you should approach these situations. So in Github, we have a warning message of sorts. But let's say we have no idea what to do. No problem. Just simply take a screenshot of that specific area and then drag it in the chat. Drag it into cursor. By the way, if you try to capture the entire screen, it may not work as well, and the name of the file may also be an issue. If you're on Windows F two to rename it. Now, screenshots typically have super long names. Shorten it just to be safe. I use SS from screenshot. Okay, now, check and see if you see a small preview here. But yeah, after you drag the image inside, simply ask, what's up with this message? What's the situation in Github? And even though the model failed us in many different ways, I still think this is the best approach. Just ask, you know? And after the few seconds, it's actually explaining what happened. And from the looks of it, it's proposing two choices. But here's the fun stuff. It's already executing option two, so we don't have to make any decision here. Now let me explain what happened, though I'm quite sure in the summary, the model is going to explain as well. So say that we're working for the client, right? And the client is a bit unsure about how the website should look like. Because of that, we want to present two choices, right, a red one and a blue one. Okay, now, one way to achieve that is to create a new branch in Gid hub. Basically, it's an alternative. Working with branches helps you experiment with different looks, different layouts, different functionality, but without having to go back without having to undo now, tu undoing, going back, reverting, that's another choice. You know, save a blue version and then go ahead and save a red version. But that's one single line, you know? And on that end, you can show the red one. And in case the client doesn't like it, you can ask the model to go back to a previous one. Okay, that's not as good. Instead of having one single line, imaginary line, you make a separate branch, a separate line, if you will. Now, it's a method of preference, but most developers would prefer to use a different branch for stuff like this. And yeah, that's what the model is also telling us in the summary. But it basically fixed it, and that message is no longer up on Github. So that means we are done. We all set up. Now it's up to you. Take it from the top, use the same prompt and create a vet website. Please, please be calm and have fun with it. Tell me your experience. Post a screenshot and tell me how the model worked on your end. Tell me the good, the bad, and the mediocre. You can replace a few things in the prompt. You can shrink the images if you want to be on the safe side. But the goal is to remake this project in a similar fashion. In case you don't want to share a screenshot, you can share the VSL link. I don't recommend you buy a domain name for the sake of discourse. A VersLink is going to be just fine. So go ahead and have fun with it. Explore. It's like learning to swim or ride a bike. You will fall down. You might gulp down some water, some nasty salt water. But overall, it's going to be a positive experience, and you're going to be happy that you did it. With vibe coding, this is the situation. Okay, let's continue. 27. Not sure? Watch this video: Welcome back. I want to point out something. When I was learning to vibe code, I tried using projects that my form of developers created. These guys were skilled developers with a lot of knowledge, but they made one big mistake. They didn't leave any notes whatsoever. Now, in GitHub in my own GitHub, I can access 30, 40 projects that they made, but here's the thing. I don't know anything about them. So what I did was when I first got started, I tried updating them and making them run. They were made in 2018, 2019, so obviously quite old. And here's the thing. In short, I failed. I spent a lot of time, a lot of credits, and it was very annoying. And then I tried to make my first tap. So then I switched my approach and I said, Okay, let's make my first tap on my own. But I'm going to use an existing code, right? So I'm going to use something from Github. Remember, some projects are public. That means you can copy them and you can build on top of them, right? And I figured that would save me quite a lot of time and hassle and, of course, wasted credits. But here's the thing. I failed yet again. And it's not the failing that's the problem, it's how I felt, and that's what I want to share. Here's the thing. I was working with open AI models, models that were free at the time, four and 4.1. And I was constantly squashing bugs, fixing parts, after parts, after parts. Now, the issue was, I had no idea if I was on BG five out of 50 or five out of 50,000. I had no reference point. It was like swimming in the ocean with lots of fog around me. I couldn't see the shore. I couldn't see the beach. I didn't know if I was swimming in the right direction. Maybe I was a few paddles away from the beach. Maybe I was miles away. And it was super tiring, using prompt after prompt, trying out various things. And that's the issue. I didn't know if I got any closer, if I was closer to the end goal to actually making the project run. I had no idea. And here's the thing. If you get stuck and you are not sure about it, you can always start a new conversation. You can just click here. A fresh model is going to be that much more helpful. For example, if I were to add the gallery section to dentist website, I would start a new conversation by clicking here. This is the recommended method. You break up the project into parts. We now have a foundation. We published it. Cool. Then we may want to add whatever, a gallery, then Google analytics tracking, then maybe a more complicated form. Okay, well, those things can be three different conversations. Keep in mind, you're using the same amount of credits. There's no downsides, but a fresh conversation means a fresh model. It's not tired from the previous prompts. But to come back to my point, if you feel like you're swimming in an ocean and you have no idea where you are, you need to take a break and reassess. You need to change models or start a new conversation. Me, so far, I tend to think that starting from scratch is a lot better. Have the model, create everything from zero on your own. But of course, you can reference a project. Again, for inspiration, use it as an inspiration, and the model will take note of that. But don't import a code, and hopefully it's going to run. Hopefully you can build on top of that. Usually, that's not going to work, especially at the beginning of your career. So my advice start with small fun projects, then build your way up. Don't tire yourself by swimming into the unknown for the way too much. Yes, have patience. But if you feel like you're not making good progress, you should pause and look for the another way. 28. My honest advice: Welcome back. Congratulations. You made it to the end, and that's a big deal. You didn't just build a few websites. You actually built the skills behind them. You learned how to guide the AI with clear prompts, how to style with purpose, how to make things look better and feel better. And that's without diving into complex code, without any coding whatsoever. Most importantly, you practice a little bit every time, a few prompts here and there, a few tweaks here and there. And that's how you get good. Not by watching but by practicing. So what now? Well, you got to keep going. You got to pick a brand new idea. You can create a brand, a personal project. You start a new folder, and you simply work. You try out the prompt, you paste it in, you polish it, you publish it, you make it yours. Basically, you're ready to build stuff for real for yourself, then for clients, maybe just for the fun of. But whatever you do, remember this, you have to have faith. You have to have patience. And yeah, you don't really need a developer to build beautiful things. You just need to know how to talk to these tools. Thank you for spending this time with me. Go create something that you're proud of. As things change, I'm going to continue to update the course. I'm going to add new projects, I'm going to add new features, more exercises. But, yeah, for now, you got to continue to practice. You've got this. This is Chris Barron signing out. Thank you so much.