Vibe Coding with Windsurf: Web Design with No Code for Beginners | Code with AI

1. Introduction: Welcome to the future. This is your chance to level up to learn something that's going to significantly improve your life. And that's vibe coding. And that's because you no longer have to be a developer with tons of years of experience to create a website, an app, a business. We'll use a platform called windsurf AI and the power of artificial intelligence to help us build websites. You imagine it, you describe it, you get it. You fine tune it, you launch it, you learn, and then finally, you earn. It may take you a couple of tries and maybe a couple of months, but vibe coding gives you an incredible shot to make a fantastic business all on your own. I believe this is the best shot for most people to create a solid, reliable income. And I repeat without being technical, without knowing how to code, this is the future. In this course, we're going to create a website from scratch. We're going to launch it on our own domain step by step with the help of AI. This is not gonna be super easy. It's gonna be frustrating at times, and that's because we're early. But being early is where our main advantage is. Imagine having invested into Apple 20 years ago or buying Bitcoin when it first got launched. Sure, there's gonna be uncertainty at the beginning, right? Issues, all sorts of problems, but don't wait until it gets mainstream. This is your Shop. And in this course, I'm going to explain everything that you need to know. You just started and launch at first website in no time at all. I'm going to teach you in plain English what AI, LLMs, MCPs, and all of that mean. I'm a designer, and if you've ever watched my design courses, you know that I focus on getting results fast without boring theory. I won't fill your head with complicated terms and concepts. No, again, I'm not a developer, and that's a huge advantage. Instead, I focus on examples and fun exercises. Invest in your future. This is one of the best things that you can learn right now. To secure your future and have a fantastic income. Get started today. Don't wait. This is your shot. 2. What’s Windsurf and vibe coding: Welcome back. In this quote, we're going to use windsurf to vibe code, but what's windsurf and what's vibe coding, right? So first of all, windsurf is a platform that helps you build software with the power of AI, and that's without knowing how to code. It was just bought by Open AI, the people behind Chat GPT for $3 billion. Yep, that's a B billion. It's 15 bucks per month, and what you get in return is a complete game changer. With Winserf, you are working side by side with artificial intelligence. That understands your project, follows your instructions, and builds your app for you, almost like magic. You write what you want. That's called the prompt. Maybe you describe what the apps you do. And then the AI takes over and does most of the heavy lifting. So, in short, what can Windserf actually build? Well, we can make mobile apps, both for IOS and Android, just like the apps you can get in the app store or on Google Play. You can create anything from a fitness tracker to a chat app to even a professional finance tool. Whatever you can think of, you can build. Of course, you can make websites like we're going to do in this course, like presentation websites, portfolios, personal blogs, the works. It can handle landing pages for products, for startups, for the events, whatever. It's all fast, all responsive, all clean. There's no downside. Of course, you can build SAS products. That means software as a service. And windsurf can help you build that. It can help you with the front end, with the back end, with the database, everything, so you don't have to know that stuff. Just tell it what it should do, and it's going to figure out the complicated stuff. And one last thing. You can build plugins and various tools. You can build chrome extensions. You can make discord bots. You can make internal tools for your team or company. Hell, you can even make web press plugins. If it lives in a browser or it runs on a computer, there's a very good chance that Winserf can build that. Now, here's the big idea. Winserf connects directly to some of the smartest AI models in the world. So that means it knows how to write Python, Javascript, react, next JS, node, whatever. It's like having a senior team of developers on staff 247 with infinite patience, ready to code whatever you want on the spot. You tell it what you want, and then it starts coding. You review the results, you give feedback, and it improves instantly. This is, again, without you knowing how to code without all of those things that I previously mentioned. So that's the essential part. So imagine this. You've got an idea for the product, right, for the plug in, an app, a tool that solves a problem that maybe you've had for years. Now, normally, you would need months of development. You would need a team, right, a budget, endless meetings. And the thing is, that's no longer needed with Windsor. You just describe the idea, and in a few minutes, you've got something real, something functional, something that you can test, improve, and then maybe finally launch after some work. So that's vibe coding. So vibe coding is you telling the program what you want done in plain simple English, and then the platform executes it. That's what makes windsurf so powerful. It doesn't help you write code. No, it helps you build products. It solves problems, and it helps you move from idea to execution faster than ever before. Please download the attachment and sign up for the windsurf. So go ahead and sign up, and in the next lecture, we're going to install windsurf together. Let's go for it. 3. Install Windsurf and setting your expectations: Welcome back. Installing windsurf is quite easy because it's just a simple program. There's nothing special going on, but while I handle that in the background, let me set your expectations, right? We are early. Things are changing rapidly. Every week or so, maybe every two weeks, there's big news, improvements. And that's a bit uncomfortable, right? New features are coming out, and I'm sure that 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 that won't get outdated, and that's the real value of this course. Let's go back to this constant change of improvements, right? Now, this is the price that you have to pay for being early. You need tons of patience. You need to let your frustration wash away from you. And that's because I promise you you will get stuck. I promise you that. And it's not about this course, my teaching style, or my knowledge. No, I've had countless cases where the official guide said, click on the blue button. But there were only red ones. Or the guide said to click on the save button, but there was no save button. It's so annoying when that happens. I had issues where I couldn't work anymore because of problems with my VPN. But I don't actually use a VPN. It said I didn't have Internet, but everything was working fine. I followed every step of every official guide, and I got stuck with an obscure problem. I use three different computers, and I got three different issues. Now, I could go on for ages. This is bound to happen. And my advice, use the guide from the attachment to get help. Now, most of the time, 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 very specific to your computer. And you need to have patience to solve them. So that's the downside, right, for being so early in the game. Now, what's the advantage of being so early? Well, you get a 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. You get ahead of everyone else that doesn't want to go through all that pain of being early, of things not working out. You get ahead of them. And as I said, it's like investing into Apple 20 years ago. Nobody knew it was going to be such a big company, right, such a huge success. But here, I promise you, there's nothing bigger. And it's all in your hands. That's the thing. You can create incredible stuff. Or you could just postpone. You can wait until things are super clear, easy for everyone. No more bugs, no more issues. And then then what? Well, you're going to have 100 times the competition, right? It's as simple as that. If you invest now into Apple or Bitcoin or whatever, sure, you may do well, of course. But if you were there at the beginning, the rewards would have been infinitely higher. So please understand why you're going to suffer. You will have headaches and a lot of frustration. But 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. That's why I really love vibe coding so much. It's exactly the right difficulty level, right? If it was too hard, it would just be classic coding. The classic way of studying for four, maybe six years, studying, constantly working, being a junior, leveling up slowly, but surely. So four to six years. So that would be the hard way. But if it were too easy, everyone would be here. Everyone would do it. So the reward would be next to nothing. This, this level of difficulty, it's a fantastic one. It's exactly the right level of difficulty. So back to it. You won't actually code, right? You don't need to know any programming language of any kind. You will need to be patient, and you have to be able to clearly explain the idea from your mind to the computer. And that's a skill that you're going to develop throughout this course and through practice. But again, you won't code and you won't read code. You're not supposed to understand everything that's going on while windsurf is working in the background on your project. No, one of the key principles that I want to teach you is that you can spend all day creating memes to share with your friends and have a laugh or on the flip side, you can create a platform to windsurf that allows people to create memes, and then you can make a source of revenue out of that. So this is one of the most important things from the course. It's all about where your focus is and how you can come up with ideas and execute them. I'm going to have a lecture about that, so stay tuned. But now you have to have windsurf installed. I set up our interface to the dark colored scheme and we're about to create our first project. Yes, so soon we're going to make one. Now, one final note. I'm going to simplify a lot of stuff, so it's easy to understand for everyone, right? But just in case you're the coder with vast knowledge, please understand that when you say that windsurf is a fork of VS code, that doesn't really say much to most 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. I may oversimplify stuff, but this is a course for beginners that are not technical, so we're going to take it easy and step by step. Okay, with that, I'm going to see you in a second. 4. Our first website in Windsurf: Welcome back. Let's create our first website in Windserf. Now, before we 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're going to need to hit 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 around, pause as often as you need to. Okay, now, all of our projects have to be organized into folders. So let's open up our computer and create a new folder. If you're on Windows, try to avoid your main partition where Windows is installed because sometimes for some people, that may create issues. Okay, call it, whatever you want. I'm going to use wind one, but the name really doesn't matter. Next, let's fire up windsurf and we're going to open that folder. Nothing special so far, right? Wait for the second until the interface is loaded up. But yeah, that's it. We now have our first project. Attached to the course, you're going to have this text file with a task. It's something super simple, quite basic. This is what we paste here to the right side in cascade. This is cascade on the right side. Now, we are in write mode, and from this drop down, I'm going to use this model. Please use the same one, or if it's not available, you can use any of these ones from the screen. Okay, I'm going to explain everything in detail later on. So please let's keep going. Now, the message, the task is the following. Create a modern portfolio landing page for me, Chris Barron 36 from Bucharest Romania. I have 14 years experience in design. I'm going to Dobe 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. My office address is this one, and please add dummy reviews. Add a contact form for people to message me and show my phone number. Also show my social media profiles. Use best practices to build this landing page. Okay, so that's the task. You should use the same one, but be aware that it's totally normal for your design to look different than mine. That's exactly how AI works. It's not a mistake. That's how it works. Now, in case something doesn't work at all, it just gets stuck. Don't worry about it. Continue to the next lecture where we're going to set everything up and then we're going to come back and we're going to try again. So, again, if you're not able to run this at all, continue to the next lesson, then come back. Okay, once we hit Enter, we're off to the races. Notice this area here. This says it's running. And you can also notice this green circle underneath. In case you want to stop it, you want to stop the AI. You can use this red button, though you won't actually do that. Now inside this panel, you can see how the model thinks. Some models are quite descriptive. They explain everything in detail. Here, this model says it's going to make a pretty basic website using HTML and CSS plus a bit of JavaScript. Okay. And files are popping up, starting with the index file, which is basically the homepage. You can see the files on the left side of the screen, and you could potentially open them here front and center. But 99% of the time, you're actually going to focus on the right side. Now, I'm going to speed up this recording as sometimes it might take a while, especially with certain models. Now, don't be surprised to see that the model may make a mistake, right? The model simply means the AI, by the way. Now, for example, here, it tried to generate too much code at once and it backfired. It couldn't do it. But it realized its mistake, so it looked for the different solution, and then it already applied it. And that's without us intervening, without us doing stuff. So that's quite nice. Now, next, it tried to start up Python, so we could actually see the website. You don't need to know Python, but we do need to have it installed. Now, you can see that this is where we have to decide. Now, do we install Python or should we try a different way? This is what the AI is asking us. And I want to show you something. Let's tell it to install Python on its own, right? That would be awesome, right? But no, it actually won't do it. And we'll talk about that in a separate lecture. In short, it would make our lives easier, but that would be a major security concern. It would not be safe. Now, going back to it, let's tell it to continue. But here's the thing. I was too vague with my message. Continue. So it doesn't know what to do, right? So I checked for Python. Yet again, I actually wanted the other option. So it's my fault. Now, you always have to be precise with your instructions. Tell it exactly what you want. Don't be short about it. But actually, that's not going to work either. So let's install Python because it's actually quite simple. We'll only do it once, and then the model will handle everything. Okay, so scroll up and click on this link. Don't worry about the warning message. Here we are on the official website, so it's all nice and safe. Scroll down and look for your operating system. As you can see, this is the recommended one. So we'll download it and install it. Now, before we choose anything, the model did say that we need to enable one specific feature, and that's this second checkbox here. But it's best you check both of them. Okay, now, please be patient and pause as often as you need to to work along. Okay, now, let's install it, and this will only take a minute or so. Now, sometimes this won't work correctly, and I have a lecture for that specific case. But yeah, here it's done. Back to windsurf. Let's tell the model that Python is installed, and let's tell it to continue. Immediately, I get a command here that Winserf is not configured to run on its own. But that's not a problem. We'll click on this except button ourselves. And after the second, here's another one. Click Accept again. And just like that, we should be ready with Python, and we're good to go. Now, my Windows computer is asking for permission, and of course, we're going to say yes. We can now check out our website by using this address. Let's copy it and then paste it in any browser. But you could also use open and External Browser. Now I'm going to use Microsoft Edge on this computer, but you can use whatever you want. Yeah, this is a lovely website. It's black and red because that's what I asked for. Now, looking at it, is it spectacular? No, of course, not, but we got it running with just a few clicks. Notice that I have no photos because we haven't provided any. Again, the model would not download anything on its own. But let's take it a step further. Let's change the black with a nice shade of blue, and maybe let's add the map instead of simply showing the address, right? Now, again, type that in, and it may take a while, but I'm going to speed it up. Now, when all the changes are done, please use the accept all button from here. Don't use the one from the central part of the screen. No, always focus on the right panel and accept all the changes once the model is done. Notice there's no green circle and there's no red button to stop it. So that means it's stopped, and we can accept. Okay, let's have a look and see. Yeah, this is solid. It's now blue, and we have a map. We have something to work with, and it should be responsive. We can right click and from this list, we can choose inspect. In this new panel, we're looking for this icon, which is going to change out browser to mobile mode. Yeah, this is awesome. Congratulations. Again, it's not perfect. I know that I have things to improve. But this is how fast you can get up and running with windsurf in no time at all. What I want you to do is create your own version, starting with my textFile. Create a new folder on your computer, then go to the top menu and use Open folder. It's as easy as that to start a brand new project. Replace the name in the text file, change your details, and then create it. When you're done, take a screenshot of the entire design and post it so I can see it. If you can't manage to take a screenshot, no worries. Just take a photo with your phone. In case you're having issues and you can't manage, use the PDF that's attached to get help. Now, before we end, for some people, Python won't install correctly, and this may not work. If that's you, please don't be disappointed. We have a lecture where we set everything up. So if you don't have a website right now, leave a comment so I know what issue you're facing and then move on to the next lecture. Okay, I'm going to see you in a second. 5. What can you build with vibe coding in Windsurf: Welcome back. Before we continue with windsurf, you may ask, Chris, what should I build? I get it. I know that you may not be an entrepreneur with some the 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 that then. 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 dragon 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 that 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. Hodoscop 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. They 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 word, 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 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. When you see their 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. Let's continue with Windsor. 6. Getting around in Windsurf: Welcome back. Let's fire up Windserf so we can explore its interface. This may change on your end, but the basics will always be here. We have a main menu at the top that we won't actually use, a towels panel on the left side and on the right side, we have our glorious cascade panel, which is where we will talk to the program and have it build stuff. When you start a project, you should create a folder somewhere on your computer, then you should use the open folder button. Now, just in case you worked on a different project in the past, you may see them here. And in this panel on the right called cascade, I can start giving instructions bit by bit by using this field here, or I can resume a previous conversation by clicking on it here. Now, don't work along, just watch what's happening. So jumping inside an active project, there's a lot to look at, right? But let's change the team because you may want to change the interface, right? So 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 them, the window will close, which is not ideal, but open it up again. File preferences, Team color team and choose any of them. Okay, great. Next, to better see the interface, you can use Control plus to increase the size of the text. Now, you don't have to do that, but if the text is hard to read, that's one option. So Control plus. To shrink it, use Control minus. Now, back to a real project, you don't actually have to read any code. The interface is quite overwhelming, but actually 90% of the time, if not more, you're going to focus here on the right side on cascade. So here is where you will see how the artificial intelligence thinks and what it's working on. It's going to tell you when it has errors and basically what it's done. Now, the rest of the interface, well, you have a file exploded here through which you can see all the files in the project, and these are actually opened here in the main part of the screen. So when you click on the files on the left, they're going to open here in the center of the screen. Notice the opening tabs, very similar to your browser. So you can quickly cycle through them. Now, are you going to do that? No, 99% of the time, no. Again, our focus is going to be here on the right side on cascade. Okay, it's about the same with the bottom panel. Problems, outputs, terminal, and so on. We won't really use this bit all that much. The terminal may come in handy, but yeah, we're going to take it step by step. So while everything seems so intimidating for the regular person that has encoded, this is actually quite simple because you strip most of it away. You talk to the AI here on the right, then that's that. Now, there's one important setting here, write and chat. We will always use write, which simply means we'll have the AI create everything. Now, experienced coders may simply want to talk to the AI to get advice and so on. That's not the case with us. We want the AI to do everything. That's be coding. So, for us, no thank you. We're going to stick to write mode. Okay, one thing to keep in mind is this the AI will only work on the files from that specific folder. So every website, every project needs its own folder. That's how you keep things clearly separated. You open that folder and windsurf. You have your conversation in the right side, and it's going to create or edit files from that specific folder, nothing else. Now, the final important setting here is this part where you choose your model. That's going to dramatically change the results. So let's talk about models in the next lecture. For now, please change it interface to a new team and create a new folder on your computer and then open it and windsurf just so you can get used to that flow. That's how you create brand new projects, and that's what we'll do as well. 7. Getting around in Windsurf: Welcome back. There are certain tools that you can install on your computer, so windsurf can do a better job, especially if you want to do the least amount of work possible. Now, we're not going to give up complete control to any AI. Instead, we're going to install very well known software tools that are going to help Winserf work better. Now, we already installed Python, but if you haven't, please do so. At the end, I'm going to show you a potential issue and effects. Now, to check and see if your installation is good, open up your start menu and type in CMD. CMD is short for command. This is what you want. Command Prompt. Here, type in this command. And if you see something like this, you're good to go. Now, most likely, you will have a newer version, but that's totally fine. As long as there are no warnings or issues, you're good to go. Now, in case you can't manage, you can go to windsurf to the top menu to terminal. Here start a new one. It's going to be right here at the bottom. Type in the same thing and see if it works. It's all good on my end. Now, before we continue, I got to say, I won't explain every piece of software because it's counterproductive. Instead, I'm going to attach a file with a few details about every single program. Now, what I want to do is I want to focus on practical things. For me, the goal is simple. Create websites as fast as possible. Learning about Python right now won't help. It's going to make you the head spin. So I'm going to keep this as short as possible. Yeah, Python is checked off my list. Ideally, you would restart your computer just to be safe after every single step. Here I'm going to continue, even though that may cause some issues. But yeah, let's go. The next thing on my list is this one. Now, no JS LTS version. This is another must have. And during the installation process, it's going to ask you if you want to install a few other duals. Now, one thing, please make sure you check this option. This is going to show another window with a lot of texts, and I do mean a lot. Now, on my end, it says that it can't find Python, even though I just installed it. Restarting my computer could have potentially solved this issue. I know it's installed. I'm going to continue. But the thing is, after the while, this just stops. But here's the thing. Open up a note of command prompt and type in node V. You don't have to memorize any of these commands, by the way. They're all attached to the course. And yes, I see my version here, so I'm good to go. So two programs I've checked off. Next on my list, Power Shell seven. We're on the official Microsoft store, and this tells us that are many ways of installing Power Shell seven. Now, it seems overwhelming, but it's actually quite simple. We'll use this method, Win Get, which is the recommended method? Here, actually, there's only two steps. It looks complicated, but it's actually quite simple. This is the first one. So you open up Command Prompt. You click here to copy this text, and then you simply paste it with Control V. You're going to get a question here, type in Y as in yes, and then hit Enter. It seems there are two versions available. Preview means something like Beta. So it's a version that's a bit experimental, usually less stable. We don't want that. So we want the other one. So that's step two, to install it, copy this command. Again, not the preview version, that's a bit lower down, and then paste it in to Command prompt. And after the few seconds, this is going to install. Now, test it out, open up your star menu again and type in push. But instead of a U, use a W, and you should see Powershell seven available. Now we're doing quite well. Let's continue with GitHub. We need an account, but like with everything else, it's totally free. Put in your email address, then after a while, you're going to have to verify it, and that's it, we're good to go. Github is very much needed, even though it may be super intimidating. As you're about to see, we'll focus on the essentials, and soon enough, you're going to be comfortable with it. Okay, great stuff. Next, we're going to install Docker. This is considered optional, but I had quite a few issues because I didn't have it installed, so I would much rather have you install it as well. This is one of the slowest programs to install, but there's actually not a lot that you have to do. It's just slow to install. But yeah, after it's finally ready and there is going to be a few minutes, you do have to be patient. You're going to have to create an account. The thing is, I initially wanted to set up an account, but here's the Qull thing. Some of these tools allow you to sign up by using Giild Hub. So because we just made an account on GID Hub, why not use it, right? It's much faster. And 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, right? It's going to be breakfast, lunch, and dinner. It's gonna be desserts. It's gonna be snacks. It's gonna be full blown meals, right? Now, this means we need to have a fully stocked fridge and utensils. We need the ingredients, and we need knives, forks, spoons, the works, right? This is what we're doing right now. Are we going to use absolutely every single one of them in every single dish? No, of course, not, but it's much easier to prepare everything right now versus trying to find them while cooking. See if you get error after the error in windsurf because you're missing this or that, you're going to waste time. You're going to use credits, which is basically money. You lose energy and momentum. So this is why I strongly suggest you install everything right now. You pause off, of course, you get to the wit. But then after this is going to be done, you're going to be flying. So that's what we're doing right now. Okay, now let's install something called Git for the Windows. This is going to have quite a lot of settings, but we're actually only going to use the default values every single step of the way. Now, feel free to pause, but I'm just going to accept everything because windsurf is actually going to manage everything. Now, I realize that this list isn't all that comfortable, but this will allow the AI to do a lot more with fewer prompts, with less intervention from us. So it's going to be a bit more independent. Okay, fast forward, and we only have three more accounts to create. But these are done in an instant. Versll is the first one. We'll use this to host our websites so everyone can see them, right? Now, again, it's free, so no worries. Sign up by using Github to simplify the process. Okay, great. Next, we'll use resend to send emails. This is totally free for up to 3,000 emails per month. Awesome to get started. And finally, we are going to make an account with Super base, which is fantastic for our databases for more complex projects, which we might do later on. But hey, it's only one click, so let's just get it out of the way. And yeah, overall, believe it or not, we're done with these tools. Now, there are a few other settings that we're going to handle in the next lecture. For now, pause, install everything, and only continue after you've gone through this checklist. I'm going to see you in a moment when you're done. Pause the course right now and install everything. 8. Set up MCPs & rules in Windsurf – the easy way: Welcome back. We've installed quite a lot of things like Python, NoJS, Power Shell. But there are a few things we can set up in WinSerf as well. The first one is rules. You can get to this section by focusing on this corner and WinSerf. And inside customization we have a few tabs, rules, workflows, and memories. Now, I'm going to keep it as simple as possible. Global rules are what we're interested in. So click here and you're going to get an empty document in this central part. Here, use the attached file to simply copy paste these rules. Now, in short, we're telling Winsorf how it should act. It's like telling someone how you like your coffee to be done, right? And inside the rules, we have basic stuff like we want to be efficient, we want to use best practices. We want it to be safe and covered up sensitive information and so on. You can find many templates for the rules on the web or you can simply use mine. I got it from the web, as well. Now with using global rules because we want windsurf to apply them to every single project. Workspace rules would be specific for this single project, and we don't want that. For example, if we switch to a mobile app project on IOS, for example, we may have different rules. So yes, in that case, that would make sense. But yeah, overall, what's written here is a global thing. So simply copy paste it, hit Controls, and you can use this icon to refresh things. After the few seconds, you should see it here. Okay, now we're going to click on plugins. It's this icon right here. These are MCPs, and sort to be super short, this is us giving more control to the AI. If we don't want to use these, we would have to do a lot more work, write code ourselves, write more commands. It's basically more work for us, and instead, we want the AI to do most of it, right? Now, the great thing is that this is an official list. It's safe. It's good to go. Now, on your end, you may have more available because they're absolutely fantastic and Winsurf is adding more and more of them. But yeah, let's get started. The first one memory. Click on it, and while you could use this download icon, I prefer to use the central part here and hit Install. And basically, that's that. There are no other settings for this one. Same thing for sequential thinking. This will help the AI break down the task into smaller bits, and it's going to keep track of them, and it's going to give us much better results. Okay, let's keep at it. Let's enable G but here's something that may happen and it's going to be quite annoying. Even though I installed Git for the Windows correctly in the previous session, it's saying that it's not working. So we're going to come back to it at the end. This is one thing that's bound to happen on your end, as well. In tutorials, it seems so simple. You do everything right. But here's the thing, on your end, it doesn't work. You follow every single step from the video, but on your end, it doesn't work. I know it's frustrating, but no worries. We'll do our best to fix it. Next, the file system MCP. This allows the AI to make folders, to move files around, to make copies, and so on, because it wants you to feel safe, it's asking where exactly you wanted to have permission. Now, my advice is you set it to the entire drive. In case you are nervous, you could potentially give it a folder, maybe inside of a folder, but that might create some issues down the line. Now, I will always set my entire D drive, not just a single folder because I feel very confident about it. Next, let's enable Suba Base, which is actually quite useful for serious projects. Now, this is asking us for the token, and this is actually quite common. Nothing too tricky. Click here and you'll be taken to that exact page. One thing, never, ever show your keys to anyone. It's like showing your credit card number on the web. All sorts of bad things can happen. So this is why you won't be able to see it after you've moved away from this page. You're going to see it once. So say that someplace safe. I'm just going to paste it inside windsurf. Okay, let's keep this up, but please pause as often as you need to on your second viewing. Let's go for Git Hub. Previously, it was Git, which is one thing. Now this is GitHub, which is a different thing. This is asking us for the token. You can use Google to look up Github, personal access token. Or you can do this. Go to your browser, go to github.com and then account settings. Now, from here on the left side, at the bottom, you're going to find developer settings. And from this new window, you'll see exactly what we want personal access token. We want the classic one. Created, but be aware that you will have to set up a name, an expiration date. 90 days is what I recommend, but you're going to have to check off absolutely everything on your own. I know you're sick of setting things up, but I promise you, this is going to make our lives that much easier. Don't skip any single step. It's quite important. But yeah, overall, with now ready to rock and roll. Everything is set up. The entire list is checked off on my end. One thing, though, it seems like Github is not working. The issue has something to do with Docker, which is a bit strange. In any case, here's the thing. When you restart your computer, Docker may not start on its own. In this case, I'm going to launch it, and then I'm going to wait for the minute until it loads up. And then I'm going to refresh by using the icon from the top right side. One thing, though, please be patient with Docker. No matter your computer, it loads up quite slowly. Okay, it started, so let's refresh. And yes, there you go. We good. This is all fine. You may say, What about some other ones here in Windsor, some other MCPs? Well, for the moment, if you try to enable more of them, you're going to get an error. I'm sure in the near future, we're going to be able to add more and more. But at this time, this is it. Quite a short list, quite a bummer. But yeah, now you can pause, set up everything on your end, so you up to date. But in case something is wrong on your end, you can skip to the next video. 9. How to fix issues: Everything works, you can skip to the next video. But in case something is wrong, on your end, continue watching. It's my case. For whatever reason, the Git MCP server doesn't work, and it says it's due to Python. We installed Python and it seemed fine, right? So I copied the error and I used Google. I found a few things on stack overflow. I tried many solutions, but they didn't work. To be clear, I'm not a developer. I have no idea what's the problem. How you handle these issues when they come up, that's going to determine your level of success. So I repeat. You follow all the instructions, be it from the course or from the web, but things won't work. That's how it goes right now. So how you manage this situation is going to determine your success. Here, I tried a few things, and then I switched to chat GPT. You can use it totally for free, or you can sign up. I recommend you sign up, even though it's another subscription, it's another 20 bucks per month or whatever it is, on your end. But I use it quite often, so I can honestly recommend it. You're not going to need it for the purpose of this course, by the way. It's just something good to have. Okay, I used this model, which is very good at thinking at reasoning. I told that exactly what's happening. Hey, I'm using windsurf AI, and I'm getting this error. The fun solution it gave me, well, it was quite complicated. For my taste, I said, No, thank you. It's a bit tricky. So I skipped to the second one. Here, I had no idea what these meant, but I just started pasting them in my CMD window. So the first line didn't seem to help. So then I went on to try the second one, the other one. And yeah, after the few seconds, it installed something, and I had a feeling it worked. I went back to Windsorf. I refreshed. And yes, it's all good. But here's another case on a different computer. The Git NCP doesn't work, but for a different reason, I honestly don't know what this means, and to be totally transparent, I don't plan on learning it. Instead, I'm going to use the same method. I'm going to ask Chat GPT OT about. I'm going to use 03 because it's the most advanced reasoning model at the moment, and for me, it's free. I pay 20 bucks per month, so I get unlimited discussions. Now, if you don't have access to CHA GPT for whatever reason, use cascade, and it's very likely you're going to get the same answer. Now, here in CHA GPT, I told it was going on. And then after about 90 seconds or so, it gave me a step by step plan. So first of all, I have to install something by using Power Shell. And here's the exact command. Okay, so that's simple enough. I'll use the start menu, and then I'm going to type in push but with a W. Now, inside Power Shell, I'm going to copy, paste that command and had Enter. Okay, now, this is installing something. It's doing various things. And Okay, yeah, it seems like it's good to go. Okay, pretty cool. Now for the next step, it gave me a different command, but it's insisting that I open up a new terminal. Okay, pretty good. I'm going to type in push yet again and paste that command. But of course, that raises an issue. I've copied two different lines, which is not correct. But I'm going to paste anyway, and it seems we're good. Now, the second step is to restart windsurf. Let's not skip that. I'm happy I don't have to restart my computer now, I'm going to have to wait for a second until it warms up. I'm going to hit the refresh button from the top right side, and victory. Great stuff. Now, on your end, I'm sure that you're going to have different issues, different problems. But remember one thing. Once you solve them, you're going to be good to go. You're going to be flying. This is the essence of vibe coding. You don't have to know how to code. You have to have A patients, B, ask the right questions, and C, the most important thing, try stuff until it works. Now, here's the thing. I could have asked my question cascade and windsurf. But since I already have chat GPT, why not use it, right? I would much rather get a free answer versus wasting credits and windsurf. Now, to wrap it up, this is how headaches happen. In tut or els, it's simple ABC and success, right? In your case, you may spend hours on step B, and you're stuck and you can't continue. As long as you keep my advice in mind, patience, 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. Being early means without bugs, with other issues, but it's a small price to pay for your future. And with that, let's continue. 10. Claude vs GPT: Come back. LLMs are large language models, and they are the main thing that windsurf uses. So all the intelligence comes through these LLMs, which most people call models. So that's a model. Now, to be clear, windsurf is the main program, but most of its intelligence comes from these models from different companies. So windsurf is like a pipe. The models are the water. Now, could the water flow without the pipe? Sure, of course, but it may be all over the place. So windsurf makes sure you're getting more of what you want, and that's why we're using. Otherwise, we could just sign up to one specific company and use this specific model, right? But that would be much more limiting and substantially more expensive. This is why windsurf is a much better choice. So through Winsurf, you get access to most of the companies and to most of the models out there. That's why when you click here in the cascade panel, you can choose from quite a few. And now the question is, if this is so important, which one should you choose, right? And the short answer is, it really depends. I'm going to give the top ones the same task so we can compare the results so we can decide together. But again, you're going to see it really depends. Now, you have the task attached, so you should do the same. On your second viewing, you should try this on your own computer just to verify you have the same experience. Now, here's the thing why it may be different on your end. Models change often. So what's slow today may be quite fast tomorrow. So keep that in mind. Okay, let's start with a clear slate. When you start up windsurf, you'll get the previous project. But you can go to the top menu to file. From here, click on New Window. Great. Now we can use the open folder feature, and I'll brows to a location. Right from this window, I'm going to make a new folder and I'm going to call it by the model's name. This is optional. The name really doesn't matter. It's for us to get organized. Cloud 37. Okay, great. Select that folder, and we're going to load up our brand new project in Windsor. By the way, if you can't manage, go to your drive on your computer and make a folder the basic way. I'll also add a few images to this folder. Now, the fastest way is to click in this panel and select Reveal Explorer. Then I'll simply copy paste the folder with a few images. To make sure the model knows they're there, I'm going to right click and I'm going to choose Copy as path. We have to paste that address in the text file. If you don't have copy a path, not a problem. Just click here and copy the address. It's the exact same thing. Pause as often as you need to, but we'll do this a bunch more times in this lecture, so no worries. Okay, the images are, of course, attached. The model is set to cloud. Now, I'm going to paste the task and I'm going to start the timer. Okay, well, this is working. Let me tell you this. Winserf is sort of like a car. What tires should you put on well, that's really up to you. Is there one particular tire brand and model that's the absolute best out there? No, of course, not. There's premium brands, there's medium ones, and, of course, there's cheap ones. So it's not a clear cut thing. There's no one very clear winner. It's the same in football with phones, with Coke and Pepsi, with just about everything. There's a battle between two, three, five very well established companies. So it's always something where there's a lot of competition, and you can choose from many options. And it's the same thing here with these AI models. And here's a table which shows you what models are available right now. Anthropic is one company. Open AI, of course, is another one. Google is in the game, but there's also Twitter, which is called X AI. And that's Deep Sk. There are Chinese companies, and it's bound for the few more to show up here. Now, this can make your headspin so many choices, right? And more than that, they all have different costs and capabilities. And what we see here is that some models are very smart, but they're quite slow. Some are smart, but they're super expensive. It's exactly like buying a car or buying a phone. Sure, they all do somewhat the same thing, right? Some people swear by BMW. Other people would not drive anything other than a Mercedes. Some quirky people might prefer Lexus. It's the same thing with these models. Every one of them has die hard fans. But here's the kicker. New versions always come out and quite fast. So what do I recommend? I say, stick with the top ones. Try them out and see the personalities. Because, yes, they do have personalities. Now, what I used a lot is the following. It's Cloud 3.7, GPT 4.1 oh four Mini high and Gemini 2.5 pro. This is bound to change in the next few weeks or a few months, but here's what you have to remember. You have to test them out, which is what we're doing in this lecture. Oh, by the way, let's have a look. So this is on a fresh computer with a very basic setup, not what we previously did at the beginning of the course. So we don't have any tools installed. So Claude started immediately. It's proposing a very solid approach with a nice text stack, react and next JS. You don't have to know what that means, but it's a very healthy sign that the model is applying best practices in modern technology. Now, here's the first thing in the terminal, we have to hit Enter, otherwise, it won't continue. This may not be very obvious to most people. This is one of those cases where you shouldn't focus on the right panel alone. The bottom side, the terminal is also quite important from time to time. Now it's installing a whole bunch of stuff. But I'm waiting here, and it seems like it got stuck. It's frozen. I'm not sure what's up. So here's the thing. Let's stop it. And now to resume it, we have to say continue. Okay, when an accept button comes up in the right panel, I'm going to hit Accept pretty fast. Now, you're going to notice a bunch of s, even though the model did absolutely everything, and it seems like it stopped working yet again. So I'm going to use a third prompt and say continue once again. This time, though Claude dropped the standards. It's no longer trying to use that text tag from the beginning. No, it downgraded to something much simpler. It's still going to work, but it's not great practice. It's going from a brand new car to a car from 1999. It sort of does the same thing, sure, but it's going to miss of features. And I have to say that at the five minute mark, I'm quite disappointed. It's moving much slower than I expected. I'm going to zoom ahead, and after about 7.5 minutes, it's done. We could use this button called Open and external browser, but this time around, I'm going to go into its folder and look for the index file, the classic way. And this is how the website looks like. Nothing crazy, but it does look pretty okay. That's a hover state. The font is nice and chunky. It followed our instructions. Yeah, overall, I'm quite happy with it. And I think the mobile version, that's actually quite solid as well. Nothing to shout about but solid. Now, let's compare it to something. Let's switch to GPT 4.1. I'm going to add all my setup steps in a file that's attached. Okay, please review it. So I'm going to speed ahead. 4.1 also proposes something quite strong react and vet, and then tailwind CSS. Again, it's totally fine if you don't know what that means, but it's solid. It's a great sign. 4.1 is checking out the images and it's creating files quite fast. Under a minute and I'm quite happy. But here's the thing. Here's what's happening. It spirals down. Error after error after error. And this goes on for the while. And then I was quite surprised. It stopped working without saying anything. I looked for an index file, but there wasn't any. So this is what I mean by personality. Typically, Claude always tells me what's up? What's the situation. And often it does lots of steps without stopping and asking me for stuff. But I hear this model, 4.1 from Open AI, is a lot more nervous. It pauses often and it tends to consume a lot more credits because it wants us to confirm if we want to continue. Of course, we want to continue. More about costs later on. But yeah, this is more expensive. This is going to take more money. But yeah, going back to it, I had to give it a second prompt so we can continue. Accept everything, and then one final prompt, the third one, continue. But, yeah, I think it's already done. Quite interesting. Okay, so only now, though, did it give me the address of the website, its local host. Because it used a different text, a different approach, it actually didn't make an index file. Interesting. Okay, now let's keep it simple. Let's open it up, but, it doesn't load. Now, here's the yellow light in this area. Now, this means something is trying to run. So let's open up the terminal. And here, it seems like it's asking me to run a command, to type it in myself and run it myself, which is a bit frustrating. I would have liked for it to do that on its own or at least type it out. But it is what it is. Okay, let me type that in. Okay, run it, and then a few issues, and it's telling me what I have to do to fix it. Again, it's some simple copy pasting. It's nothing major. But initially I had no idea I had to do this on my own. So, okay, let's go for the fourth prompt to continue. And now I think the server is up and running, and we can check it out. Okay, yeah, let's have a look. The design looks quite okay. It's quite a lot darker, and here's a fun thing. I wanted an Instagram feed, even though I knew that would be very difficult to implement. It did add one, but it's a random one, not the one that I mentioned. So is that a win? No, I'm not sure. Overall, it's a decent design made with a good tex tag, and the mobile version is decent enough, as well. So that's GPT 4.14 prompts in total, decent results, but we already see quite a big difference between it and Claude. Let's continue after the quick break. Don't work along just yet. Let me do the other ones as well. 11. GPT vs Gemini vs Grok: Welcome back. Let's continue to compare these models. So let's go with GPT 04. Now, while I set this up, let me quickly explain 4.1 versus 04. In short, every model is built around the use case. It's a sports car versus a seven seater SUV. They excel at different things. They're meant for different uses, right? 04 is very much focused on coding. It doesn't support images. It focuses on reasoning, logic, which basically means it's great at coding, right? Now, on the flip side, 4.1 is universal. It's a typical sedan that most people can use for just about everything. Now, does that mean it excels at every single thing? No, of course not. By being okay with everything, it's not great at anything, right? Now, this is obviously not a comprehensive comparison between these two, but I hope you understand why a company would put out different models, exactly like car brands. They offer two seat of sports car, a sedan, an SUV, a pickup truck, and so on, different use cases with different needs. But yeah, back to it, 04 is really, really thinking. Now, where the other models got started immediately, this one hesitates. After 2 minutes, it hasn't done anything productive. I just saw my images inside the folder, and that's that. So that's a bit disappointing. And this slowness continues, and it's actually quite annoying. Keep in mind, for the moment, the price is a bit lower than the rest of them. It's actually 25% of the cost versus Cloud, for example. But here's the thing. It's actually quite slow. But surprisingly, after about 4 minutes, it's actually done the website. The project is done. Now, let's have a look, and, you know, the website isn't all that great. By the way, the model didn't tell us what it used. What framework did it use? It didn't say that it didn't manage to use what the previous ones did, like next JS or VT, whatever. But, yeah, it actually didn't think about it. It didn't tell us anything and it didn't ask us anything. Now, because with Knot coders, this is actually quite a bad sign because we have no context. We can't really ask for help. We don't really know what's up with our project. It built it, but we have no context, no clue. And as for the design. In the mobile version, we can see how the text touches the sides, the cards as well. They don't have any breathing room on the sides. So yeah, it did the job. It did it in one single prompt, whatever. But I don't think this is awesome. But yeah, overall, this is 04. And here's the thing. When you look it up on a chart, it seems to be one of the best ones. But I think in this case, it's quite low on the list. It's slow. It didn't tell us anything. So overall, I can't say that I'm happy. I've actually tried it for the few days. Actually, I think it was about a week, nonstop only 04. And, man, way too slow. Even though it's smart, it doesn't compensate. Sure, I'm happy that it doesn't make a whole lot of mistakes, but yeah, overall, it's way too slow. Okay, let's move on to X AI, ak Twitter. They have a model called Glock. So I'm going to go to the exact same task, the same steps. Okay, Glock three says that it wants to use react and type script, and it explains why. This is quite good. It starts out strong by making a bunch of files, but something fishy is up. So as you can see here, evos are coming up, and there's quite a lot of them one after another. Of, so that's not great. So something happened here. Deadline exceeded. I have no idea what it is. But you didn't ask us anything, so it just continues. So I think it reminded itself of the goal, which is quite good. And yeah, it's remaking the files from above, which had vs. Though, again, more vs here. So this is not a great sign, but as long as it's working, you know, I can handle that. And here's the thing while my computer is not set up because I repeat it's not set up, it's the same for all models, right? So this is a fair comparison because all models received the exact same task on the same computer. Now, grog seems to think there's a problem with creating files and is looking for options. So it decided to use a simpler structure with just the essential files. So downgrading, not ideal, but let's see. So after one single prompt, it gave us our result. Okay, let's have a look. It's a basic design. It's not using the textag it initially said it would use. And as for the actual design, well, it's the only one that managed to implement the correct Instagram feeds, so this is the only one that actually works. But having said that, the products are missing the respective photos. So overall, from what I'm seeing here, the Glock tree, it's a bit of a miss. I can't say it's my favorite, but it's not worse than 04. I like its personality, but again, you're going to have to decide on your own. Now, one final test. Let's switch to Gemini from Google, which most people bet on. Same steps as before, nothing has changed. So let's go ahead and have a look. So immediately, it says it's going to make a basic website, no text tag. No great. It talks to us in a great way, though. It explains that it sees eight images, and it's happy that it can make a perfect four by two grid. This is a lovely insight. It's quite interesting. It's not asking us for anything. It continues to run. And it's working quite fast, the time it shows it. After the minute and a half on the dot, it's actually ready. Wow. Okay, quite fast. And let's have a look. Okay, yeah, this is solid. Nothing to shout about, of course, but the task was quite vague. So I'm happy with the result. The Instagram feed is not real, though. This is very interesting. So what it did was it used my photos to create a fake one, which is a very interesting approach. I'm not sure that I trust that, though. I would have preferred it to say, Hey, I can't do it with something. But yeah, I just made up one. Okay. The card isn't as nice as the one from Claude, and the images, they're a bit modest. They're quite small, and they don't fit well. Plus, the entire website is super wide. Okay. Google just launched a new model, a new Gemini model, but it's not yet available. But yeah, overall, this is what the current one can do quite fast. So overall, what's the winner? Well, it's up for debate. You got to test it yourself. But I can clearly say that 04 is way too slow. And Grock forgot one of the most important things the product photos. GPT 4.1, I think is the only one that actually used the local server, and it used the great textag with react VT and tailwind CSS, I believe. I'd like to say that as a non coder, as a person who is not technical, I think this is a big advantage because I don't know what stuff I want to ask for, right? When the model is guiding me, I think that's best because again, I don't know what to ask for. So that's actually quite good. Now, plus, on the featured side, it did integrate on Instagram feed, though it was the wrong one from a random company. But yeah, overall, this is the test. It's not a definitive one. It's not a comprehensive one. If you're giving the models better instructions, if you've set up your system in a better way, you may get totally different results. Plus, every time you run it, there's a good chance you're going to get something else. So don't take these results as being definitive. No, I struggled with GPT 4.1 a lot with my Android apps. It was forgetting what I tried two, 3 minutes ago, and it was running in circles. I then switched to Cloud, and it worked from the get go immediately. So there are no definitive answers. I'm constantly switching sometimes during a project when I get stuck, but more often than not, I start out with a clear goal. Hey, I'm going to build this project with Model X, with Claude, with Gemini, whatever. And that's because when you change models during a project, the new one might not like what the previous one did. Yeah, that happens. It's actually quite funny. Have it critiques. Oh, man. There's a mess here. I got to fix all this stuff. Let me handle it, man. Whoever worked here did a terrible job. So when you see the AI say stuff like that, it's actually quite funny. But yeah, to wrap it up, I hope you now have a bit of a sense of how these models compare. And now you have a different perspective, not just the chart that I showed you. By the way, there are many charts. That's just one of them. So my advice, try it out on your own. Use my prompt. You have it attached, and see what's what. Then tell me your results in the comments area. I'd love to hear about your experience. Give me your best model, you're the worst one, and you're the average one. Remember, have fun with it. Issues are bound to come up. Stay cool, stay relaxed and enjoy the process. You will have your own favorites. What matters is you achieve your goal, no matter what you use. Good luck. 12. Costs explained in a simple way: Welcome back. I want to address something that's quite important, and that's range anxiety, credit anxiety. And here's the thing. Your monthly plan comes with a certain amount of credits, 500 credits as of right now. You pay a certain sum, and you get to use those credits. It's 15 bucks at the moment, so 15 bucks for 500 credits. Now, here's how this goes. Click here and have a look. You can see, the cost varies. Some of them are very expensive and nobody uses them. From time to time, there are also promotions. For example, Open AI gave 4.1 and 04 for free, totally free for ten days or so. At the moment, they're cheaper than Cloud. Claude also has two versions at the moment. So it seems fairly complicated, right? And that's because you sometimes give a model a prompt, a task. And then the model does 20 things one after another, right, completely on its own, and you are just a passenger, and it's one credit, right? It breaks down a huge task into smaller ones, and then bit by bit, it checks them off. It works on its own. Great. But other models are different. You give it a prompt and it does one single step. So one credit, but it's actually only one step. Sometimes it actually tells you what you should do, which is very frustrating. This is why the cost is relative. You may say, Okay, let's say 4.1 is super cheap, right? But if it has amnesia and it needs you to hold its hand every single step of the way, and you have to give it four or five prompts, whereas to Claude, you only have to give one single prompt. Well, then, does the cost really make any sense? Can you actually compare the two? No, not really. On the flip side, some models are incredibly expensive, even ten times as expensive. Now, does that mean they're ten times as good? No, that's not the case. Again, I think things are changing at a rapid pace, and these models are going to get better and better and less expensive. Now, here's what I actually want you to take note of. Running out of credits is not a big deal. You have that nice round number 500. But the very first time you use it, it goes down to 499 and then 498. And after the few days in this course, you're going to have 450 and then 390. And then the panic starts to set in. What if I blow through the entire plan, 500 credits? What happens then? I had the very same thought, but then I realized the game. Even if you go through all 500 credits and you don't have a completed project, which is almost impossible, by the way, you can always buy more. And the price right now it's ten bucks for 250 credits. That's $0.04 per prom you would take. So $0.04, right? Again, sometimes one single credit may give you a lot of progress. While, other times it may not. It really depends on how clear you are with your instructions, how detailed it is. But even if you have average results, right, let's put it this way. It's $0.04, right? So ten prompts, ten tasks, is going to cost you $0.40. 100 means four bucks. And my guess is that at the beginning, you'll spend under 50 a day, especially if you use some of the cheaper models that are in promotion mode. Now, here's where this finally clicks, and where, for me, it made a whole lot of sense. Our goal is to build websites and then make money, right? Build projects that will get us hired as freelancers, get us stable job, launch a business. That's the goal, right? Okay, if you wanted to hire a coder, trust me, you would not pay two, three, four bucks per day. No. I'm talking about an average coder, right? But here, you have access to some of the best coders in the world for pennies, literally pennies. Now, an average landing page should take you anywhere from 2030 prompts to maybe maybe 100 at the most. In our example, we use less than five, right? But even if you use 50, right? Trust me, that's nothing in the grand scheme of things. When you sell that website for whatever, let's call it 500 bucks on the low end, right? Does it really matter that you spent two bucks making it no, of course not. So this range anxiety that you're going to run out of credits is actually not rational. Most coders ask 25-100 bucks per hour on freelancing platforms. Winsurf 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. Now, keep in mind another thing. Initially, you don't know what you're doing, right? It's fine. You may burn through some credits. The first 20 or 30. That's totally fine. That's normal. That's how you learn, right? But as you get better and better at it, you'll use credits more wisely. But for now, splurge. Use them. Don't worry about them. This is an investment into your future. You buy a course, you buy several 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 with dozens of people. The costs are immense. Rent, utilities, salaries, expensive equipment, the works on the flip side with windsurf with paying pennies. That's no better deal than vibe coding at the moment. With a few dollars, you can achieve so much. Now, to wrap it up, don't protect your credits. Don't cherish them. It's an investment into your education. Use them. Okay, let's continue. 13. The Hidden Dangers of Vibe Coding & Full AI Access: Welcome back. Let's talk about something that's not very fun, but it's super important security. Specifically, what happens when we vibe code? You know, when we're in the zone, all excited to try out our new AI agents, we might install a ton of things left and right without any second thought, right? But here's the problem. Every time you run a script that you found on this cord, read it or some other places, every time you give full access to an agent, to a model, to a company, you're handing over the keys to your computer. And let me explain what that means. Imagine that your computer is your apartment, right? And inside, you've got private stuff. You bank login, your business plans, you have creative files, crypto money, credit cards, private photos, your passport, ID, the works. Now, picture this. You go out for lunch and you leave your apartment door wide open. Worse, you tape your key to the front door so anyone can use it for anyone to take, right? Now, that's exactly what happens when we let someone or some thing control our computer without question. This happens a lot with vibe coding because sometimes the AI doesn't consider these issues. It sometimes saves of passwords, all of all passwords from projects in a text file called passwords. I'm not exaggerating. Well, I am a bit, but not by much. The bad guys know this stuff. These models don't have security in mind unless you tell them to. And when you let a program do whatever it wants with your computer, Again, it's like saying, Hey, feel free to look around to my house, take whatever you want. Now, here's the thing. We didn't want to install Python ourselves. We didn't want to fix the installation when it didn't work, right? We didn't want to read up on four rooms and send support tickets and ask people to help us, right? We didn't want to do that. We would much prefer the AI to just fix it, to do it on its own. But that's the way it has to be, even if it's frustrating. I know we all want a personal robot that does things automatically in a perfect way, a GPT clone, something. Maybe it types for you, maybe it installs programs. It sounds so cool, right? But here's the thing. Giving full control to AI is not like hiring a personal assistant. No, it's like giving a stranger, your credit card, you have house keys, your passport and saying, Hey, do whatever you think is best. Here's the thing. We're not there yet. And while this tech is impressive, the technology is fantastic. The security part is still very much fragile. So, yes, I'm all for AI. I love using it to speed up my work. I'm fine giving over some control, but I'm not going to give control to any type of MCP, to any type of agent or whatever, right? A bit more work for my hands. Sure, that's totally fine. Installing tools manually, checking permissions, reading a few instructions, it's not the end of the world. Sure it takes more time, but it can also give you control. And when it comes down to launching a serious project, whether it's an app, a website or startup, whatever, security should never be an afterthought. We'll talk more about that later on. But for now, I wanted to tell you that we will do a bit of work ourselves, but I wanted to tell you all this stuff because I think it's quite important. Everything that we've installed is top notch. It's official stuff. It's very well known programs. But you're going to find on the web other things that aren't official, so to speak. You're going to find software made by who knows who in a different part of the world that claims that it can operate your computer automatically. Okay, who is that person? What are those developers? Who is that company? You can't give you keys a wages like. So, again, everything that we've installed so far and everything that we're about to do, again, it is vetted. It is something that's safe and you shouldn't have any issues whatsoever. But don't fall into that trap where you see something on TikTok and, hey, look, it operates my computer automatically. Don't install that just yet. Use something that's very well known. Use best practices. Okay, let's continue. 14. 80%-20%: Welcome back. Let me be clear. You won't make $1,000,000,000 company on your own with vibe coding, but you can launch products, websites, apps that generate a great income. One of the main issues is getting that last ten to 20% that you may want. And that last bit may 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, but maybe we want to make it look a bit better, right? So that's the goal. Make this look better. Now, this is the type of thing that may go either very well or very wrong in windsurf. So let's test of Luck. Please go to the main menu to file and then open this folder. You have an archive attached that you first have to extract. Okay, now, here's the thing. We're going to use Cloud 3.7 for the moment, though, you're going to have a similar experience with most models, even newer ones. Now, you may want to open up this website so you can see how my existing card looks like, and I want to use it as a reference point, right? Something like this would make me happy. Okay, now we could potentially write all of the changes that we want, and that would save us some credits. But I'm going to take it step by step. This typically gives you better results. So let's say this for the reviews in the product cards, add the product score with two digits. Make the score bold. Okay, we're off to the races. It does take quite of analysis, but that's typical when you import a project. Is going to look through the entire code, and it's going to try to understand what's up. Okay, fast forward. And okay, it's done. And here's exactly what I mean. This is my entire point. This doesn't look like what I have up on my live website. Now, does it look horrible? No, of course, not, but it's not what I want. And if you're a perfectionist, these types of things may drive you nuts. If you want stuff to be in a very specific way, this may take you a lot of proms and quite a lot of effort. Okay, let's continue. Let's write this. 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 that's a question. Could you describe it in a better way? That's another discussion. But yeah, you have an idea in your mind. In this case, we have the advantage of actually seeing the live version. But, yeah, you just got to do your best and describe what you want. And let's see how this goes. Okay, after the while, it's done. Remember to always hit accept all edits. Now we can refresh it. Yeah. Again, it's pretty good. Is it exactly what I want? No, not really. This is the entire thing you have to realize. Sure, that's a question about the quality of my instructions of my prompt. I could describe what I want in a lot more detail, right? Maybe provide an image as a reference, maybe show it a design that I made Figma. Sure. That could potentially work. And I'm not against more work, but that's not what I'm trying to say. I'm trying to say that you should be prepared for this workload. You get 80% to 90% there, but then the rest it's really tricky. Let me try one final prompt. Move the weight of the product, the right side of the price, align the weight with the add to card button, make the add to card button completely rounded, change the weight of view details from bold to normal. So as you can see, I'm stacking instructions, right? One single credit, but I'm trying to fix multiple things. You can, of course, do this, let's see how this goes. By the way, while you could 100% create a shop with Winserf, I think I would still use WooCommers based on WordPress, but maybe shopiI for such a project, simply because they're very well established. Of course, if it's just a simple shop with only one or two products, something fairly small, you can work in WinSerf just as well, my $0.02. The only exception would be a very simple shop that's based around very few products. But yeah, coming back, this is, again, decent. It's not exactly what I want. We could spend ten, 15, 20 more credits, or we could try various approaches to get closer to what I want, but I would much rather end it with this. Be happy with it. This won't make or break your project. Don't be a perfectionist. Launch the project as soon as possible, see how it goes, find out what people are saying about it, then polish it. Again, after that, you should polish it. It's so easy to fixate on these details, but I promise you, you'll just lose out in the long run. And I'm talking from experience because I'm a perfectionist, as well. It's hard, but we got to accept it. Launch it, then polish it. And with that, let's continue. 15. From Figma to Windsurf?: Welcome back. The dream of coding a design made in Figma in just a few seconds is not there yet. At least not the wind surf. We have a Figma MCP through which you can give wind surf access to your designs. Sounds great. You need to set up a token and you have Figma settings. It's not too complicated, but you do have to be a bit patient. Please don't work along, by the way. Now, here's the thing. It sounds awesome. The AI can now analyze all of our design decisions and implement them in a pixel perfect way. After all, that's what we're struggling with, right? That last ten or 20%, the details, but it doesn't work. At the date of this recording, it's actually doing a horrible job, no matter what model you use. I tried it with Claude, with Gemini, with GPT, and the results range from bad to not being able to finish the task, and I really do mean bad. The flow is simple. You design a nice page in Figma, right? You select the entire frame. Then you copy that specific page by right clicking and choosing copy link to selection. Okay. Then you can start a new project and a new window, make a folder, as always, and then tell the model of your choice to implement this design by using CSS, HTML and JavaScript. So very basic stuff to not complicate things, right? Then you add the link. It should be as simple as that. But for whatever reason, it doesn't work. Again, it's so bad that it's not really even worth showing it. It's just horrible. It doesn't work. Now, here's the thing. When things change and windsurf, 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 strongly recommend my web design courses. And that's not because you should learn how to use figma, but because the design principles make all the difference, things like contrast. So people see what actually matters, hierarchy to guide the eye, big titles, clear the buttons, wide space. More is obviously better. Don't bunch things together. Symmetry, alignment, keep it neat, keep it clean. Typography, not just beautiful fonts, but appropriate sizes, weight, and spacing. These are the principles I teach. And as you're finding out, these coding platforms help us with all the complicated code. But if you want a polished design, you got to know these principles so you can guide the model. You have to know what to ask for. Things like increase the padding in the card or make this text H two, and then this text H three, whatever, use this colored code or how some buttons need to be filled while other ones should be pure text. These are the things that I teach you in my design courses, and I promise this is not advertisement. It's what you need. Take your designs to the next level to improve your instructions, your prompts, so you get better results. It's what you need to better describe your ideas. And with that being said, Figma and windsurf doesn't work, so let's continue. 16. Overview: Welcome back. So far, we've learned that vibe coding basically killed web design in terms of the classic way of working. Wireframes, high fidelity designs, and figma, preparing the file for the coding, and then finally, a code comes in and actually implements the project into a working website. Now, this entire flow would take from a few days to a few months, and that's no longer the case. And actually pains me to say it because I've been active in that area for lots and lots of years. But here's the thing. As a designer, I have quite a lot of experience in moving ideas from my mind to a blank page. I typically know what I want. I know what looks good, and what clients usually want. I'm going to be okay. I'm not 100% comfortable with this AI wave, but because I'm in it, I'm learning, I'm growing. I think there's actually more opportunity than before. I think I'm riding this wave, and even though I'm going to lose a lot of projects. I think I'm going to find great success with vibe coding. Now, what I'm actually worried about is how my friends who are into coding are going to adapt. See, at least in my country, nobody is hiring developers anymore. The only jobs that are available are for super senior positions and other positions where someone would typically get, say, $3,000 per month, are now being offered just $2,000. It's a big shift because most companies can't adapt this fast. They see how multibillion dollar companies are focusing on AI, for example, dual lingo, okay? But most companies can't actually do that. Without a lot of funds, without a lot of senior developers on staff that closely overlook AI, things are bound to go wrong, and most companies can't afford that, can't afford to mess something up to AI. Their reputation is everything, right? So that means most companies are basically stuck. They can't really hire people the classic way developers because that seems like it's outdated. Investors, shareholders of all kinds, banks could look at them like they're buying fax machines. Now, obviously, that would make sense, but on the flip side, they can't really switch to AI either, because, again, it's too sensitive. It's early and mistakes are bound to happen. So this means that the job market for developers is basically on pause, at least in my part of the world. And that's why I worry about Again, designers, I think they can pivot. They're typically resourceful, agile. I hope developers are able to do the same thing. But yeah, overall, that's how I see things. Some opportunities are lost, but the new ones are far more interesting. So overall, I think we're going to be just fine. And with that, let's continue. 17. From idea to Windsurf to Vercel to live website: Welcome back. Let me explain the process of creating a live website with your own domain name in a very short amount of time. So we'll start with a totally blank project and wind surf. Create a working version of that website that runs locally on our own computer, nothing more. When we're happy with it, we'll then send it to the Cloud to Github, to the Internet. You can think of GitHub like Drawbox or Google Drive. It's a place on the Internet where you store your files. That means you have access to them from any device, and if you want, you can share it with everyone. It's quite easy to do. So once the website is on Github, we'll then send it to Versll, which is a platform that's going to help us publish it so everyone can see it. In short, Versll replaces a hosting company. That's the essence of it. Here's the thing. After you import the website from Github to Versll, it's going to run pretty well, but you're going to have an ugly link, something like this, right? But still overall, it's still available to everyone. So you can share it with friends, family, you can show it to your client, so it does the job. But if you want to take it to the next step, you can buy a domain name directly in Versll, wait a few minutes, maybe a few hours, and then you'll have your own address like cresbarn.com. That was already taken, so I bought cresbarndt fYI. So once this is all set up and working, of course, you can come back to Winserf and continue to make improvements. The great thing about it is that you can tell Winserf to update Github, and it's going to do it automatically. And then Verslls going to work automatically, as well. So actually, it's fairly easy. The hard part was setting everything up at the beginning of the course. Now it's a method of going through the motions and debugging, fixing small issues that will come up. Now, these issues may take us five, six, ten prompts, maybe ten, 15, 20 minutes, or you may be unlucky. Maybe you're going to need 20 prompts, maybe a few hours. But in any case, you will get there. This is what we're going to do in this part of the course. So to recap, we'll start with a good prompt, something with a decent amount of details, and then we'll start building in Windsorf. Then when we're done, we're going to publish to Github. Then to Versll. So it's going to be live and sharable with everyone. Optional step at the very end, we can buy our own domain name. But again, that's optional. One quick thing. Why did we sign up for Superbse or resend? Well, resend is going to be useful in this project because we're going to have a contact form, and resend is needed for that. When someone uses the contact form on the website, we want the client to receive that message, right? So that's what resend is for. SupAbse is great for giving users an option to register an account. It will handle all the complicated database stuff, and through the way we set everything up, it's going to do it automatically. Supabse is for later on. For now, we'll finish a solid website from start to finish, and then we can chat more about complicated things like databases, payments, registration, and whatnot. For now, let's get to work. Let's publish our first website. 18. 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, I would say it's a six out of ten. If you take this natural sounding prompt and try to improve it in chat GBT, for example, you will get a prompt that's a lot more detailed than technical. Typically, this helps, but a complicated prompt would be a bit overwhelming, so I decided to stick to something that sounds natural. We walk, then we run step by step, right? Now, one of the issues is this in simple terms, I say blue, right, blue and white. That's the color scheme. But usually, you should provide color codes. Blue can mean absolutely anything from a super light baby blue to a dark, intense navy blue. So keep that in mind. The more details that you give, the better the result. I want to remind you that even if you do everything perfectly, even if you copy paste my prompt, your website is going to look different than mine. And that's just how these models work. And another thing, it's very likely that you will have different issues than the ones I'm going to have. And that's totally normal. Again, I don't have a crystal ball, but I've been working in Windsor for a long time, so I know that this is inevitable. Okay, so set up a new folder and the new project in windsurf the basics. Please make sure you have all the setup done from the first part of the course. GitHub, Python, no JS, the works, Power Shell, Docker, et cetera. Speaking about Tech, I wrote a few things in the prompt, use next JS and tailwind, resend for the form, and then GitHub and Versll. So I clearly mentioned these things, and here's why. So when you start off, you write a basic prompt, make me a website, right? And you see how certain models, the smarter ones, at least, talk to you. We already saw how some chose basic HTML, CSS, and JavaScript, while others smarter ones recommended exactly what I wrote here. So here's the thing. If one model prefers to use this textag then make a note of it. And then the next time around, suggest it. And that's exactly what I did. I spoke to a few coders, senior ones, and I asked them, why tailwind? Why not this? Why not that? Why react? Why not this? Why not that? And in short, these coders told me the following. Everyone has their own preference. So like BMW Pepsi and Android, other people like Mercedes, doctor Pepper, and IOS. Who's right? Nobody, of course. It's what you prefer. It's the same thing here. So if this model prefers to use these specific text tags, Okay, let's go for that. Now, the next thing about the prompt, I asked for a 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 like a checklist, if you will, so you know where you're at. So that's the PRD. It doesn't hurt, so always have it in there. Next, I wanted to add images. While we could use an MCP to download some automatically. I actually did this splash.com. I selected a few photos that would work for a dentist. By the way, keep in mind, it's a filter. Some photos are free, some are paid, so make sure you use the filter. Okay. And then I switch to people to get some photos for all the reviews. So after you set up your project on your drive, you should copy the address and paste it here in the prompt. So this is something you have to do. You have to replace it. This is the first one here, and here's the second one, which what I did was, I put a folder inside the main one. Just to be clear, you download photos from Osplash. You put them inside the folder anywhere. I called the TMG, and I put it on my desktop here. Next, we have to move this folder from the desktop to where the project in WinSerf is set up. In my case, the project in Winserf is set up in D Dentist. So that's where we have to paste this folder. Now, to get an address from any location, use this area. In my case, it's D Dentist IMG. So copy it with Control C, then switch to the prom file and paste it. Here it's already set, but I'm going to paste it underneath so you can see it, so it does work. That's how you get the address. And remember, in Winserf we opened dentist. That's why we're adding the photos there. That's why we're not leaving them on the desktop. And for the reviews, same thing. Go inside the folder and click here to see the path. Copy it and then paste it in the text file. Okay, let's continue. Okay, the rest of the prompt is just basic information. The only major thing that I'm asking for is a form to make appointments, but it doesn't have any advanced functionality. So I didn't include a drop down for the services that the client might want. I didn't include the hour that would require us to have the doctor's schedule when he's busy, when he's available. So what I did was I chose the absolute simplest version, a simple contact form. Plus, I added the phone number so they can pick up calls that way. The idea is this, you could sell this website. As long as they have someone answering their phones and email, a basic contact form will work. I promise you that. Now, the cabinet can call the client back and ask for more information and set up an appointment. So I repeat, even though this is the basic, the simplest form, the simplest version, you can still sell this. But of course, you can also add more features and functionality. You can use this as a foundation and then probably adapt it, sell it to vets, to restaurants, to lawyers, anything that you can think of. Again, this landing page is versatile and you can make it work. Let's get to it. 19. Start the project: Come back. For this project, I'm going to use this model because I quite like its personality. If a much newer one isn't available, please use the same one. No matter what, you are going to encounter issues that might not show up on my end. So please be patient and ask for help. Okay, let's get started. It's off to the races. It's fascinating to see how the model thinks and how it often makes mistakes. Like, it's trying to create a checklist, but it didn't make the folder first, which is quite silly, but this is the worst it's ever going to be. Keep that in mind. In a few months, this will take off, and this model is going to look like Windows 95 if you are that old. Okay, we have the PRD, and this is actually quite detailed. I can see in the technical requirements that it understood correctly what I wanted to use. So next JS, tailwind, and so on. Again, I'm not a developer, but if this model likes to work with those technologies, sure, why not? Okay, I checked them out. They're modern and they have a lot of benefits over the simple basic CSS and HTML website. So yeah, overall, all good. Okay, we have a first command for the terminal. You could potentially set up windsurf, so all of these would run on their own. But I like to review them and accept them individually one at a time. It's a good way to learn. One thing. If you see yellow here, it means you should wait. But as of now, I've seen countless cases where the terminal just stopped. And, you know, we just wait. Nothing is actually happening. Okay, the model is running, but there's nothing happening in the terminal. It's not installing stuff, it's not moving stuff. It's stuck. So in these cases where I'm just stuck, what I like to do is this, I type in one single letter in the terminal, and I hit Enter. Usually, I use Z. Now, that's obviously not a correct command, but it does seem to wake up the model. If you now check the color, it's green, which means it's done, and now it can continue. So this is without stopping the model and restarting. To be honest, I have no idea if this is a valid approach. I've tried to see if I can prevent it, if I can stop the terminal from freezing, but I couldn't find anything. So what I did was I came up with something on my own, type in any letter and hit Enter. But here's where you got to be careful. You actually have to hit Enter in the terminal. The model wrote the command, but it's waiting on us to hit Enter. This is not super obvious as other times we don't have to do anything. So that's something you have to be aware. If nothing is happening, but the model is still running, it may be waiting on you. Okay, so check the terminal and see if there are any instructions or if you're just supposed to hit Enter. Now, after the while, the same thing happens yet again. It's stuck. So I come out with my Ziki, I type it in, I hit Enter, and just like that, the model continues. Going back to it, I quite like this model because it's quite independent. One prompt can give you tens of actions in a row. It knows what I want. It has the PRD, so it just execute stuff step by step. But funny enough, after 20 steps, you have to tell it to continue. It would be bad for business if one single credit got you a completed website, right? So when you hit Continue, you are going to use another credit. Now, to be honest, we shouldn't get bogged down into credit use. It really doesn't matter. Just use them. Don't act like they're precious. They're meant to be used. Now, the only time I was actually upset was with an open AI model that was constantly saying it was going to do stuff, but then it didn't do it. Or it kept telling me to do that on my own, even though it was more than capable of doing it on its own. So that's something where you feel that you have scanned, you know? But this model, just look at how many steps this model went through without stopping. Imagine if we switch to one where it needed us to hold its hand every step of the way, say continue after every single step, that would be nasty. But yeah, here's an issue. I praised this model, you know, but now it's installing super Base, I think. And that's weird because I didn't tell it to do that. And here's another automatic stop. So after 20 steps or so, you're going to have to hit Continue on your own. I'm also going to accept all the changes so far. That's what I recommend you do as well. Now, here's the thing. I decided to wait for the natural break and then ask about Superbse, which is not in the requirements. Now, I could stop it right now, but there's a chance that may produce more bugs, more issues. And I think I did the right thing because the model seems to actually have a lot more work to do. It's in a train of thought, and stopping it to remove super base might actually interfere with it. Of course, even if you restart your computer or whatever else, you have your conversation history, and any model can review the entire code base and it can continue to work. But I found it's ideal. You let it finish its train of thought. It seems like it has something like 15 other steps, so I'm going to leave it to a thing. Okay, now here's the interesting part. I actually did a bigger project for a dentist, and I used the same model and the same program Wser I think I may have used a similar name for the folder. Now, windsurf has this ability of creating memories. So after it works for a while and it achieves certain results, it's going to make a memory. This helps it consume fewer resources. So think of it like this. Say it can only remember 100 messages in our conversation, right? This is just an example so you can understand how it works. So as you add five more messages, the first five, the initial five get lost. It's like a fog of war if you're into strategy games. But what if those initial five messages contain something important? Well, that's where a memory comes into play. You store that key information separately, independent from those 100 messages, and this makes everything smarter. In a way, it's like you telling your doctor you're really allergic to shellfish, right? Now, the doctor may forget about other stuff that you're saying, but when the doctor checks his notes, he's going to see that you're allergic and he's going to act accordingly. Now this is, of course, an oversimplified explanation, but I hope it makes sense. That's what memories do. They help windsurf to remember key pieces of information. Now, here, when I use SupaBse, I had a lot of issues with it. It wasn't working well. The model saw me struggle with it. It kept trying to make it work, and it was not going well. Super Base was not working well. And after trying for a while, it made the memory about it. And now that memory came into play. It's actually super exciting and fascinating, even though it's not ideal for our project. Let's take a pause, and then I'm going to continue in a moment. 20. How to deal with bugs: Welcome back. Bugs are inevitable. You might say that if artificial intelligence is going to write it, 100%, it's going to do it correctly, right? But that's not the case. Not at this current state. Bugs are inevitable, but the good news is they're fairly easy to fix. So back to the project, our model did a pretty good job. It created the entire website with very few proms. So without spending a whole bunch of money, you can tell that it's done when you see an overview of what it's managed to do. Now, some models don't offer this insight, but this one does. You can also see these two important buttons, open preview or open in an external browser. Now, I like to use an external browser because that's how most people are going to see the website. So I prefer that clean look with no distractions. Okay, that's an error, but we'll fix it in a second. So back to Windsor for now. Now in the overview, you can see the model tells us the next steps two and three are all good. Github and versel. Okay? Then test out the form so it works correctly. Cool. But step number one doesn't make any sense. Superbse should not be here, even if you're not technical. You can clearly see that's an issue because it wasn't mentioned anywhere. But let's say you have no idea, right? In the same way you don't know about react next JS, tailwind, whatever. If the model chooses them, maybe it knows best, right? Well, here's the thing. Talk to it like you would talk to a developer. Just ask it exactly this. Why did you use Super Base? For the form, I said, we should use resend. And then see what it says, right? By the way, that's how I learned. I asked it about react, next JS, VT, tailwind, all those things. I asked the model about it. Why did you use it? And the model said, It's a great choice. It's best practice, so on and so forth. It has many advantages. Okay, so the model can say, Hey, I made the right call. I made the right choice if that does make sense, right? Well, here, it's actually quite funny. It says, I'm absolutely right. And I apologize for the confusion. It implemented Super Base because of its memories. And here's the thing. It's going to fix the code on its own. Notice, it's not even asking us to validate it. It knows what it did wrong. It knows what it has to do, and it just does. And now lots and lots of files are being edited. Now, I'm sure that you're not going to have this type of issue, but I really wanted to show you this case. I wanted to show you that some issues are totally unexpected. But, yeah. Okay, let's continue. Fast forward, and it's done. So it replaced a lot of things. It updated the documentation, quite a lot of stuff. Now I'm going to accept it, of course, but here's the thing. I bet the error in my browser is still there. So let's have a look. Always refresh, by the way. But, yeah, it's still here. So here's what you need to do. So select all this text and simply paste it into windsurf With or without context, it really doesn't make a whole lot of difference in this case. Now, here's the thing. Immediately, the model understands the issue and it begins solving it. In the meantime, let's talk about resend. Now, to keep it short, we need to connect our project to resend. It's like plugging it in. Now, for that to happen to connect it, we need the key. So our website is going to use that key to get access to resend. That means it will be able to talk to resend, and that will allow emails to be sent back and forth. Now, to get the recent key, it's actually as easy as clicking a button. As I said before, typically, you only get to see it once. If you lose it, you're going to have to make another one. Now, no worries. There's no cost, but it's not a great idea to come back to resend and find 15 keys, and you don't know which is which, right? Which one is for this specific project. Okay, now, another thing, I'm going to blur my keys because it's similar to my credit card number. Yeah, once you have it, you have to add it here and you have project. You can actually tell Winserf to add it for you, or you could potentially find that file yourself and paste it in. Usually, alli sensitive information is stored in a file called dot ENV. Here's where I'm going to paste my key. Now, there are two other fields here. These are specific for resend. From email is our website. You can see that actually the model created a fake email for it, but obviously this is not real. It's not going to work. And to email is where the form is going to send the message, basically the dentist, the receptionist, whatever. So in this second one, I'm going to put my email address so we can test it. And in the first one, we'll have to use a special address called delivered at resend dot V. When you decide to use Super Base or firebase or recent or whatever else, you're going to have to learn a bit about that platform yourself. Okay, let's go back to our website. So it's now live. But is it what we want? Let's have a look in a second. Let's take a quick break. Y y 21. Make the form work correctly: Welcome back. Our website is looking okay at a first glance, right? So what we see here is professional, quite clean, very well suited for the dentist. There are some issues with text. That's a bit too light and you can't read it. And the photos don't seem to load up correctly. The site is in English, but the prices and names are in my local language. I guess it did that because it saw the address of the cabinet. A biz change, something to fix, but interesting nonetheless. The sticky bar at the bottom is cool. The map works well. So overall, this makes me happy. This is a great start. Now, the first thing I want to do is I want to make sure that the images load up and make sure the form is working correctly. So let's type that in. Now here's the deal. You can provide a list of changes in one single prompt. You could even write ten, 20 things that you want change, and there's a good chance that it will execute them correctly, every one of them, right? But if you want to be safe, you should take it step by step bit by bit. Usually, the model concentrates a bit better and you get more predictable results. Okay, my prompt is good to go. Let's see what happens. Make sure you work along on your second viewing, by the way. Okay. By the way, one thing, you may have seen something where you can talk to a microphone, and then windsurf understands. So you can talk to the AI directly. But I actually don't recommend it. For the vibe coding, it's a good idea to write out your thoughts, review them, make changes, add more details, cut out stuff, and then submit your prompt. Talking may be great for the other cases, but I don't like to use it for the vibe coding. Okay, now for the photos, I think that's going to fix them quite fast. But after the while, I think we're going to have the same hanging issue. Yes, here you go. The terminal stopped. We can see it copied all of the files. Okay, all good. So then what are we waiting for? So again, type in any letter Z or whatever, head Enter. And now, yeah, it's back on track. It seems this was a bit more complicated than I thought. There are a lot of files that have to be adjusted. But yeah, overall, we really don't care that much, right? It's not even a half an hour, and we already have something super solid. So let's continue. Let's fast forward. So the model is done, right? It made a lot of changes. It added my key for resend and so on. I blurred it out. But because it's done, I'm really tempted to go back to my browser and refresh my page. That's instinctive, right? But here's the thing, it won't work. This is a great teaching moment. If you're not paying attention, you may argue with Windserf. Hey, it's not working. It's a blank page. What's up? But here's the thing. Actually, it restarted the local server and it slightly changed the link. That's why you should use Open External browser just in case that happens. Okay, let's quickly test out the form and see if that works. The images, I'm sure they'll fine, that shouldn't be an issue. I'm going to blur my details because the browser saved my actual details. Okay, but here's the thing. It's actually not working. There's an issue. You can see that in the bottom left. One issue. So click on it, and we'll see there's a message here. The message doesn't make a whole lot of sense, but let's copy paste it into windsurf. And here's the thing. Even if the message is not that useful, the model may review the whole code. It may review a bunch of files. And yeah, that's exactly what's happening here, step by step, checking out any potential issues. And actually, I love this approach. I think it's fantastic. And yes, it did see there's an issue, and it's about the domain name. It's not verified, and resend doesn't allow it, which again, it's awesome because this is a very quick fix. In the central part, you can see how the original line with smile care.com, which doesn't exist is highlighted in red. This means it's going to be removed. The next one is with that email address on boarding at resend dot DV. Great stuff. Just to be clear, I didn't pay attention, and I left that domain name that doesn't exist, smileca.com. That's a fake domain that doesn't exist, that the model put in on its own. Of course, resend won't allow it because it's not verified. It's a fake domain, right? But we were lucky enough because Winserf replaced the fake domain with the correct one with the one from the documentation with the official one. So that's why it wasn't working because of that fake address, smilecare.com. To be honest, here's where I made a bit of a mistake. I was arguing with Winserf that it's still not working, but here's the deal. I have lots of email addresses. I forgot which one I used for this resend account. So for testing purposes, you're allowed to send emails to your own address that you used to sign up. Now, because I got mixed up, I tried a couple more times, and I was getting the same error. In the end, I made this change. To email, the second field, I set up the correct email. I used the one that I used when I signed up for resend. So that was the issue. So that's one of the dangers I was talking about. You mess up. It's totally on you. It's your problem, but you keep speaking to Winserf. You keep speaking to the model, right? And the model has no idea. It's trying to review the code, it's trying to see any potential fixes, workarounds, it's going to try various stuff. But obviously, it's going to fail. It's not going to succeed. It's on your end. It's your problem. Now, the great news is that you can see the message right here in the terminal. Hey, you can only send test emails to this address, and it actually tells you the email address. So as long as you keep an open mind and you don't let frustration take over, you should be fine. I was quite chill. I was looking at the terminal on the right side. I was exploring potential fixes. But the thing is, if you get upset and you start seeing red, you may get stuck here for hours or even days. But I'm happy to say, you'll only make this mistake once. Now you can use resend for all of your projects without worrying. And just to confirm it's working, I've opened my personal email, and yes, the email came through you can also go to resend and you can also confirm that. So why did we do all this? Because if this was a real client, an actual dentist, of course, he would prefer to get all of his messages through email, right? So congrats. The form is working. Resend is working. Remember, add the key to the project and keep it private. Use their special email in the first field. And for the second field, use your email address, the one that you used to sign up for resend. Okay, great stuff. Let's continue after the quick break. 22. Upload your website to GitHub: Welcome back. The site is looking quite good and it's working well. We tested the form, and it's fine. Now, we could potentially improve the design, but that's quite straightforward. You go back to windsurf and you say what you want to change, and that's that. Now we're going to do that at the very end. But for now, I want to show you how we can take it live in just a few steps. So the first one is GitHub. Remember, this site is working, but it's only available on our local computer. To publish it, we'll use Versll, but an intermediary step is Github. More on that in a second. For now, let's tell the model that we're ready to move on. I'll say exactly that. Let's move on to the next steps. Please upload it to Github. I'll pause. Here, I want to do the least amount of work possible, right? So I prefer to tell the model to use Github MCP. This is less work on our hands and fewer potential issues. Otherwise, it may tell us to go there, make a new project, make a few settings, and whatnot. I don't want to do that. Okay. Then I'm going to tell the model I'm going to use Versll to publish it, so it can guide me in case I get stuck. Now, over sharing is not a problem. No, far from it. The more details, the better. Okay, and we're off to the races. It's going to look at my account, my Github account, see what's up and create a new project all on its own. This is called a repository. That's the correct term repository or repo. Okay, but you can remember it like a project. Project, repo is the same thing. Now, unfortunately, as always, the model gets stuck. But let's bring it back with a random command in the terminal section. Okay, just like that with BO Track. So here's what's happening. We're uploading all of our files from our computer, from our local computer to the Cloud to Github, with basically cloning the project. Now, you may not be familiar with Github. I'm not either. I'm not a coder. But here's the cool thing. You don't have to know anything about Github. You're just going to use the model in Winserf. Now, in case you're curious, you can go to your repositories and look for this project, which should be the only one in your case. I actually have a lot loaded up because I do use Github quite a lot. But yeah, once you see it, you can see all the files plus some instructions that the model wrote for you for you with other people. Now, this is fantastic. Now, why does Github help? Well, this is where GitHub becomes more than just a simple middleman. When your project is up on Github, you've created a Version control backup that's public or private depending on what you choose. So step by step, what's Version Control? Let's say that this is Virgin O. With a form that's as simple as possible. Nothing all that fancy, right? Now, we may create a much more advanced form where the visitor, I don't know, he can choose the services, he can choose the time and date and so on, right? Something a bit more advanced. And here's the thing. We make that. We then bring it to the client. You make it live. But after the while, you get that dreaded phone call. Hey, Chris, you know what? The new form is not working. I'm actually having fewer appointments. People are not using it for whatever reason. So let's go back to the old one because people are simply not liking it. You can ask, Is it broken? Is it not working? No, no, it's fine, but people prefer the old one. Can you bring back the old one? Ah. Okay, that would be painful. You would have to go back to windsurf, strip away all that extra code. That may produce bugs. The form may break. The entire website may break but that's actually not a problem at all. This is where Version control comes into play. With GitHub, you simply go back to the previous version or any version, to be honest, because you can have multiple ones. You can also have separate versions, based on a color scheme, based on functionality, layouts. You can do whatever you want. You name. So Github helps you organize all of that. You can come back to a version that was yesterday, a week before, a month before, five years ago, it really is that easy. And it's just like that. Now, is it incredibly simple? No, but it's not difficulty there, because here's the thing. You have windsurf. You have the AI on your side. Simply tell it to do whatever you want to do. Go back to the red wind, go back to the Virgin with the basic contact form. So that's how it works. That's version control. GitHub gives us version control. Now, public or private. Okay, public means other people can see you at work, can see this project. And that's super useful if you want to get a job, or if you want to collaborate with other people, maybe a team, something like that, right? But if you want to sell it, if you want to get clients on your own, if you want to have an agency or something, if you want to be a freelancer, most likely, you're going to keep it private. So, yeah, that's the choice, public or private. Okay. Version control, public or private. That's GitHub. It has a lot more features, but in short, that's the thing. But now coming back to our AI story, here's the scoop, here's the most important thing. GitHub is the perfect bridge between your local code in windsurf and deploying it online to Versll. Here's the situation. Platforms like Versll are deeply integrated with Github. So when your site is ready to go live, Versll simply looks at Github and he sees, Oh, okay, here are all your files. Here are all of your settings. I see the latest changes. Let me put it live. So that means you don't have to upload any files. You don't have to change any settings. You don't have to do anything. You simply connect Versll to your Github repo, and that's going to be that. By the way, we'll do that in just a few minutes. We'll connect them. But, yeah, that's how your website is going to be taken live. This is powerful because it keeps everything automated and clean. If you make changes to your project later on in windsurf on your computer, you just ask the model to update the Github project. And when you do that, automatically, a signal is sent to Versll to update the live version of your website. With that extra code. It's fantastic. There's no extra steps. You type something into windsurf and overall, in just a few seconds, maybe a couple of minutes, it's live, and you don't have to worry about it. It's all wired together. So in simple terms, windsurf is where you build the website. Github is where you store it on the web, and then Versll is where you make it live for the world to see it. Think of it like a hosting company. H, by the way, you have step by step instructions in the cascade, so you can read up and take it slowly. Okay, great job so far. I'm really happy you've made it to this point. Let's take a quick break, and I'm going to see you in a second. Remember, work along on your second viewing. 23. Publish your website with Vercel & fix bugs: Welcome back. Let's recap. So we created a website by using modern Tech. We made sure it works well. We then uploaded it to Github, and now we're ready to publish it so we can share it with the world. Now, developers don't really say publish. They say deploy. So let's deploy with Versll should already have an account if you've been following along. Now, in Versll you may be asked to connect Github, but that's super easy. It's just a couple of clicks. Nothing major, no key, nothing like that. As long as you stay logged in, you golden. Okay, this is where the fund begins. We want to import the project because we've connected Versll to Github, we see all of our projects. This is my name here. Well, the name that I put into Github, so I recognize it. And more than that, I can see there's a new project that I just uploaded. So what I'm going to do is I'm going to hit Import. Here we have just a few things to take care of. So Versll gives a project name on its own, and that's totally fine. It recognizes the framework. Next JS. Okay, good stuff. We don't really care. The only thing that we need to add is this environment variables. And that sounds complicated, but actually it's what windsurf is telling us to do. So go back to it and you will see you have to add the API key and two fields from email and to email. So this is actually quite simple. It's a matter of copy pasting, and the AI tells you exactly what you need to paste. So the first part in the left field, the name of the thing, and on the right side, the value, AKA the key. So let me do just that. Again, I'm going to blur my key for safety purposes. Oh, make sure you use the recommended values. So in the from email field, it's the default address. Delivered at resend dot Dev here, I actually got confused by Windsurf and I used another address, but I think that works as well. Okay. And in the two email, it's the email that you use to sign up to resend. And now we're ready to deploy. Use this big button to publish our website. But here's the thing. Please be aware it takes a few minutes. Sometimes two, three, four, it really depends. Now, if you scroll down, you can actually see a timer and the current state. If we are lucky, maybe we'll get a success message in about 40 to maybe 50 seconds. But in most cases, to be fair, is going to fail the foods few times around. Now, let's see if we're lucky. Okay, no, it actually failed. We can see there's a few issues with it. But here's the thing. We have a copy icon in the top right side, so let's use it. Funny enough, I can see it's related to the testimonials. I've had something similar in the past. Here's the funny stuff. So when you add testimonials, you typically add a quote to showcase what people are saying about the business, right? A quote, right? Well, those quotes, that character, well, if it's not formatted correctly, those characters break the code. So it's actually super silly, but, yeah, I had to use five to ten prompts just to review the entire project and clean it up. While some of these models are incredibly smart, sometimes they make silly mistakes. But yeah, back to it. Here's what's happening. So windsurf is checking the files and fixing just about everything. After it's happy, it's going to push to Github, which means it's going to update GitHub with the latest code with all the fixes. Of course, the terminal may stop, but type in anything, hit Enter, and it should resume. Okay, good to go. But yeah, once the code is uploaded from our computer to Github, then Versll is also going to receive the new code automatically. Okay, the model says it's done, and it says we should try again in Versll. Okay, I'm going to click here on GoTo Project. Here, I know it's your first time, but it's actually quite simple. If you notice this part, it's yellow, which means it's trying to build the project again. So it's an active process. But yeah, after a few seconds, it fails again, so it's red. Again, this is typical. So let's click and see the log. It seems to be very similar. Yeah, it's probably the same issue, but here's the thing. Don't bother with reading the log too much. Just copy paste it back into Winserf and we'll see what's what. Take your time with it. And by now, you should be used to this flow where Winserf is fixing stuff, the terminal gets stuck, you resume it, and then everything gets uploaded back to Github. Okay, now, let's go back to Versll and here's where you should focus. This is my account, and this is the current project, and this is the current deployment, which has failed. So we go back to the project by clicking here on the project's name. Remember to pause as often as you need to the second time you watch the video. Okay. Now, once you click, you can see the new version is now trying to build. Because we updated GitHub, Versel saw that, and it's automatically publishing it. Now, of course, you can stop that, but yeah, this is usually what you want to do. Now, let's see if we're lucky. We can wait here or we can click on it. Let's see what's inside. So the status here is in yellow, so we got to wait a bit more. But yeah, after about a minute or so, Okay, some more issues. Again, classic. Now, funny enough, it's about super Base. Okay, I thought we removed it, but it seems some files still have something about it. Now, this is a bit frustrating, right? The AI did a lot of bad stuff in our project. Now, on your end, I'm sure you won't have this specific issue. Maybe you got lucky and maybe it worked on the first time around. But on the flip side, I think this is useful. You get to see debugging in action. Now, I didn't want to remove these issues from the recording from the course because I think it's essential that you understand that this is normal. This is totally fine. It's expected. As you get more comfortable with this flow, you'll be ready for anything. But you got to be relaxed. You don't have to be nervous. You don't have to see red. You don't have to get angry. You don't have to worry about the credits and how you're consuming money. That won't help. But yeah, fast forward and another failure, but I won't despair. I'm going to keep working at it, and I'm going to continue to update. I'm going to continue fixing it. Even though it's costing me some credits and quite a few minutes, I'm fine with it. Try working with a freelancer from a different part of the world for, let's say, 50 bucks an hour and you'll quickly see how this is infinitely better. It's not awesome. It's not a walk in the park, but the alternative is far worse. But yeah, after so much hassle, we finally have a green light. The website is ready. It's live. You can now click on it here and see it in action. And here it is in all of its glory. You can now share it with your friends and family. But here's the thing. Before I do anything, let's see if the email comes through. So Wserf suggested it, remember, we used a different email we didn't use delivered. We used onboarding. So let's quickly have a look and see if this works. And yes, victory. The form still works. The website is live. The form works. Congratulations. Okay, let's continue after the quick break. 24. Publish the website on your own domain name: Welcome back. We managed to upload our website to GithHub and then deploy it with Versll. If you go back to Versll, you can see a temporary address here. It's not beautiful to look at, of course, but it's live. It works. You can share it with people. You can now stop, go back to Winserf and make a few other changes to improve the website, add more pages, more features, improve the design, translate it to your own language, the works, right? But just in case you're curious, I want to show you how you can move from a temporary address, an ugly link to something like cresbarn.com. So your own domain name. Go back to Versll to your project, and you'll have something called domain. Click on it. This is exactly what we're looking for. Here, I can see the one Versll made for me on its own. Now, again, this is not bad, but I want something that's my own. So let's click on By Domain. And after the few seconds, you're going to be able to search for something, your own domain name. Now, the best ones, of course, are already taken, but you can use your own name. So I'm going to write Chris Barn, but I know that.com is already taken because I previously bought it. Now, what I love about Versll is that it's showing you lots of potential options from.ai to something a bit more classic like.net. These are all the ones that are available, and you can make an informed decision because the prices are clear as day. Obviously, Chris Barry and.ai at 149 bucks is a bit too expensive. So I'm going to go for something else. Let's go with FYI, which actually means for your information, FYI. That doesn't make a whole lot of sense, but hey, it's $6, six bucks. So let's click on it and buy. As you can see, it's six bucks and some change. Okay, that's per year. Okay, cool stuff. I'm going to click here to buy it, and now I have to confirm by clicking again. Okay, no worries. Now I'm going to have to add my credit card and my billing information. This is going to take a while. But yeah, no worries. It's straightforward. I also have to double check with my bank, of course, confirm the transaction, the works. Nothing too major. It's like any other purchase online. Now, here's the thing. It actually gave me this message, which is not good. But here's the thing. I saw the money was taken, but yeah, Versll gave me this error. Now, in these cases, you got to stay calm. These are serious businesses and you shouldn't worry. So let's go back to domains. Then yeah, here's mine. Chris Barron FYI. All good. I'd like to remind you that Versll replaces your hosting company. So there's no need to buy a hosting plan, a VPS, a shared server, or whatever else. Okay, now let's go back to it. Let's go back to our project by clicking here in the top left side. I only have a dentist project, so let's click on it. Okay, we're good to go. Now, let's click on Domains and we're back where we started. But this time around, we won't buy one. We'll add one. So click here and choose the one that you just bought. For me, that's Chris Barron FYI. There's one setting here that's recommended. Leave it checked. Okay, now I won't go into it into what that means because that's going to sidetrack us. Leave it checked. Okay, hit Add Domain, and you'll have to choose what version of the project you want to publish. Of course, we're going to keep it simple the current one that's in production. Hit safe and now de have a few instructions for us. Nothing major, but we will have to do something on our own. So far, it's been easy sailing, but it's now on us to add this C name record. Again, you don't have to know what that is. Let me guide you through it step by step. So what you need to do is make a note of these three bits, these three items. You can copy them in a notepad or whatever. Now, the first line is already set, so no worries about that. We only have to do the second one. Now, in case you're curious and you want to check the status without doing anything, obviously, it's not going to work. Invalid configuration, of course. Clearly, it's not working because we didn't set it up. So here's what you need to do. Go back to the domains page. Look at the navigation here. You should find it without too much trouble. Then use the dots on the right side of your domain name. Here, we want to configure it. We want to set it up. Scroll down a bit, and under DNS DNS, we have these fields to do which we can add those details from before. To be honest, Verl could have done this on its own, but, hey, that's fine. So put in WWW in the first field. Then for the drop down, select C name. And then finally for the value, add that text, but make sure you add the dot at the end. The dot actually is needed. Okay, don't change anything else. Instead, click on add and believe it or not, that's it. You're going to get a success message in the bottom right side, and you'll be able to see that entry is now saved. Now, here's the thing. You may be excited to go and visit your own domain name, right? But it's not ready. It's in the oven. This takes a while. Typically, from 4 hours to 24 hours. That's the official guide. So don't be disappointed if it's not working immediately. For me, it took about ten to 15 minutes. But remember, you got to be patient. Don't go changing stuff. Don't complain to Windsor for versel that's not working. Take your time with it. Stay calm. But yeah, here you go. Let me fast forward. Chris Barron is now live. The website looks good. We are golden. Congratulations. You now have your own website from start to finish without knowing how to code. Ah, one. You may refresh like crazy, right, in the first few seconds or few minutes. It takes a few minutes for the SSL to get installed. So your anti virus may show you some warnings again at the beginning, or you may get a broken website if you constantly hit a five if you refresh. But after the couple of minutes or maybe a couple of hours, it's going to work perfectly without any warnings or whatever. This is totally normal. Any classic coder or any classic hosting company would work in the exact same way. So there's no downsides. Okay, let's take a moment and celebrate 25. Making changes to our live website: Come back. It doesn't matter if you purchased your own domain name or if you're using the one that Versll created for you, you can still continue to improve the website. For me, there's an area with super light ray text that's hard to read, so I got to fix that. So let me show you how easy it is once everything is set up. Again, this is going to work with a custom domain or with a basic one that Versll gave. So first of all, I'm going to make a screenshot from Firefox. You can use any type of browser plugin. It's really up to you. I know some people use Safari, Chrome, brave Edge, and a whole lot more, so I won't get into plugins that make a screenshot. Just make one screenshot and that's that. Then drag it into windsurf into this field. It's going to look like this. But just so it's not underwhelming, let's make a big change, something that's going to be really dramatic. So let's ask the model to change the color scheme from blue to red. This should make a huge difference. That's going to be quite obvious. Okay, let's hit Enter, and we're off to the races. So the model analyzes the entire website and it prepares everything. It's actually not as simple as I thought it would be. So the model is changing quite a few files. Now, to be honest, do we really care? No, not really. It's doing everything on its own with one single prompt. Though, to be fair, after the while, we will have to spend another credit because at this pace, it's actually going to quite a lot of files. And yes, here it is. As a reminder, after about 20 or so steps, Wind Surf asks you if you want to continue. That will cost you another credit. And yes, it will continue, and, yeah, it's doing a lot. But, yeah, I hope you can sense how you could potentially break your website by changing so many files. When you're working with so many files and changing stuff, that may be a bit dangerous. And here's the thing. At a certain point, the model does take quite some time. You can see it here. So I was actually worried that it's stuck right now. But yeah, previously, the terminal was the problem, and we just typed in any letter, and it was fine. But in this case, it seems the model is thinking for the while. But no, we're lucky, we're lucky. It's all good. I guess the file was quite big with something, and that's why it took some time. Again, you have to be relaxed. Don't be nervous about it. Don't get jumpy. Again, I'm honestly surprised, though, at how many files it's changing for the simple color code. This is likely related to the text structure that we use. Here's where some coding experience would come in handy. This is why developers have paid six figures per year or they used to be, anyway. They know how to optimize stuff. They can build things faster with fewer resources. But then, more importantly, they can build projects that are easy to manage. So I've had projects where I could edit one single colored code in one line, and the whole website would get updated. Here, it seems like we're dealing with well over 15 files, maybe even more. Now, again, do we actually care? Does it impact us? No, not really. Would the client care? No, of course, not, not really. It's a few extra minutes for us. Maybe a few extra prompts, but it's not actual real work, you know, we're not actually working. We're just waiting. Okay, it seems we have to continue once again. But I think we're fairly close to the end, I think. Yeah, fast forward word. And yeah, let's push everything to GitHub. Of course, it does that automatically, so that's super cool. That's the power of setting things up correctly. I can't stress that enough. I'm sure you weren't all that excited to install all of those tools to set up all those MCPs and whatever. But, yeah, it's paying off. And it looks like it's done. You could look at the website and refresh, but obviously the change is not going to be instant because it's live on a server. It's live on the Internet. So let's go back to Versll and see the bill status. Now, in general, after you manage to deploy it correctly, there's a very good chance it won't fail. It's highly likely that it will always run as long as you don't make any serious major changes. Now, it takes about the same time to build 30 to 50 seconds. But yeah, overall, I think it's going to get the green light. And yes, here it is. Let's check out the website. And yes, it's red. To be fair, it's not just red. It's shades of red. So I could potentially see why it took so much time. But, yeah, one prompt, a few continues to be fair, and we've made a significant change to our design. And it's all live. To be fair, the great text, it seems it's still there. I'm not sure why the model forgot about it. But yeah, let's take another screenshot. But this time around, I'm going to be more direct. I'm going to say the following. Make this text 22, two, and that's a very dark color code that I know by heart. This guarantees a solid result. Of course. Even if it's a small change, here's the thing. We still have to push to Github. Versil has to do another deployment. So ideally, you would make a lot more changes and then push to GitHub. But yeah, for the moment, for testing purposes, that's totally fine. So no worries. Overall, we are flying. We are done. The text is now dark gray. It's easy to read, and we have a solid website from start to finish. And of course, you can continue to update it in this fashion. When you're happy with it, push it to Github and that's that. You don't have to push after every single change, it's really up to you. Yeah, let's take a quick break. Congratulations again. This is a solid win. 26. Swimming in an ocean: 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. 27. What's next?: 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.