Ultimate Vibe Coding Guide for Beginners transcript

This is the ultimate vibe coding tutorial for complete beginners. In this video I'll show you how to set up your environment, choose the correct models, connect various tools, build something useful, and then deploy it securely so others can actually use it. I'm going to go over everything assuming that you have no prior knowledge. By the end of this video, you'll have a fully deployed application that you can share with other people.

With that said, let's dive in. So first, let's quickly break down what vibe coding is and then go over the key steps that we need to follow. Now, vibe coding is really just building something without actually reviewing every individual line of code. This means that you're kind of vibing. You're just prompting to a model and you're getting some output back. You don't need to be a software engineer. You don't need to be technical.

And in most cases, you don't care about the quality of the code. You just care about the final result. This means that you can obviously get unexpected results, but there's a way that you can vibe code much more effectively, which is what I'm going to show you here. Now, whenever you're vibe coding, there is a process that you should follow, and that process is the follow. First, you want to set up your environment. You want to connect the correct tools and then you want to move on to plan.

Now when we plan, we want to understand what it is that we actually want to build, what constitutes being done and what do we want this to achieve. Then we want to build this out. We want to review everything. We want to make sure it's secure and we want it deployed. Okay. So a few different steps again. We set up, we plan, we build. We review and then we deploy. I'm going to walk you through all five in this video. And if you go through that process you're going to get a much better output in something that's actually usable.

Let's get started. So we're starting in stage one which is the setup. Now my opinion this is one of the most important phases because if you set up your environment correctly, you will immediately just get much better results no matter how you prompt the model. Now, when it comes to the setup, there's a few decisions that we need to make. The first is going to be the agent or kind of the application that we're going to use to vibe code our app.

Now, what I mean by that is we could pick cloud code, we could pick Codex, we could use cursor, we could use Replit, we could use bolt. There's so many different tools that we can go through. And the first step is understanding what tool do we want to use. Now generally speaking, using something like cloud code is going to be really great for beginners. So that's what I'm going to go with in this video. However, you can pick any tool that you want.

Just make sure you know why you're picking that tool and understand what you want to build first. For example, if you just want to build a simple landing page, you don't care too much about all of the code and the setup. Then hosting horizons is pretty good. If you want to build something more advanced, it's going to have a back end. It's going to connect to a database. You may want to use something like cursor. So do a little bit of research.

Figure out what tools exist, and then pick one again. For most of you, using something like cloud code is going to be a really safe option. So what I've done is I've downloaded cloud code. I've just downloaded the desktop application, which is free from anthropic website, and then I've signed into my account. Now you can use a lot of these tools for free, but typically you do need a subscription that's usually about $20 per month in order to get enough usage to build something meaningful.

So in my case, I have a subscription in cloud. I've signed into that, and this is the tool that I'm going to use. Now once we've selected our vibe coding tool, the next step is to set that up. Now of course this is going to differ depending on what tool you use. But if you're watching this video, I recommend using cloud code and following along with me. So what I've done is after I've downloaded cloud code onto my computer again, it's very easy.

You can just download it from the website. I've signed into my account and what I've done is I've switched over to this code tab here. Okay. So you should see code in the top left hand corner. This is where we typically want to work, especially if we're going to build out a full application. Now from code I've just press new session and you can see it's brought me to a page that looks something like this. Now from here, what we're going to do immediately is we're going to select a folder to work in.

So you can see it's auto selecting one because I was using this before. But what I'm going to do is just go to open folder where I select the folder here. I'm going to go to my desktop or some location that's convenient to me. And I'm going to make a new folder. So I'm just going to call this vibe for now because this is going to store my project. This is the first step. Whenever you're using cloud code, you want to select the directory that you're going to work inside.

Now once we've selected that, the next step is to select our model. You'll see that there's a model selector in the bottom. So I'm going to use fable five which is currently the best model that exists. However if you don't want to use as much usage, you can use opus or sonnet. The model is not going to matter too much, especially if you're a complete beginner. Most times you can just leave it on whatever the best available option is, and if you run out of usage, you can bring it down to one that doesn't use as much usage.

Okay. Now from here we also have the thinking mode or the effort. I typically just keep it in this high mode here. You can make it higher if you want. However, in a lot of cases, it doesn't give you that much more benefit and will use significantly more. Usage would be much slower. So I typically would recommend keep it in high. And if you're struggling with something or the model can't figure something out, you can crank this up and go up to something like ultra Code or Max or whatever the thinking mode is in the tool that you're using.

But for now, we'll leave it at high. So we're almost done with the set up. But what we're going to do now is add a few integrations or connections to our tool. And this is super common. And you can do this in pretty much any of the vibe coding tools, where you can add third party resources or tools to this tool. So for example, I want to add git and GitHub. We'll talk about what that is in a second. I also want to add something that's going to allow me to deploy the application to something like a domain.

Right. So we can actually view the website, share it with other people. You get the idea. There's a bunch of things you can connect and set up here, but the two that I'll show you are ones that I typically use whenever I'm vibe coding, especially if I'm doing a web application. And then you can connect more later on. So the first tool or integration that I want to connect here is GitHub. Now GitHub is a place where we can store our code in the cloud.

It's going to make it easier for us to deploy it later on. And it's also going to save all of the changes that we make so that if we make any mistakes or if we need to go back to a previous version of our code, we can do that. If you don't understand GitHub, don't worry. But what you're going to need to do is make a free account on github.com. You can see I've signed in right here. And just make sure you've got that set up, because we'll use that in a second.

Now from Cloud Code and again this is the same in pretty much all of the vibe coding tools. We're going to go to customize. We're going to go to connectors. And you'll notice here that there's a bunch of things that we can connect to our application. Now I've got a bunch of stuff already connected. You don't need to worry about what you see here. What we're going to do is press on add and we're going to go browse connectors.

And then in browse we can switch to connectors or to plug ins. And we can search for the GitHub connector. So if we search for GitHub we should see it appear. Now I already have it installed. So you're not seeing it show up here that's why. However if you don't see it here you can also look for it in plug ins and same thing. You can search GitHub and if you look under partners you should see it appear and then you can install it again.

Mine is already connected. That's why you're not seeing it. But you should be able to find it under connectors or plug ins and then simply add it. Now once you've got that added, you should be able to go into the connectors and view the GitHub integration. You can see I've got GitHub integration right here. And what we're going to do is just press on connect. When we press on connect it should prompt us to connect this up.

So it's going to bring us to GitHub. And we're going to have to authenticate. So we'll do that. And then it should connect it to Claude. Okay. So we can see that it connected. It actually brought me back to the main page. But what I'll do is just go back into code. We'll just verify that this was connected to for your customize connectors. We can see now that GitHub is connected here. And we have access to various tools.

And we can start using it. Okay cool. So GitHub is there. You also notice I have a few other connectors here. For example if you wanted to do AI generation of like images videos, you could use Higgs field. And what you want to do at this point is think through. Okay, what tools might I want to use? Do I want to connect this to slack? Maybe. Do I need it on notion? Do I need a full party, you know, back end service like super base to handle things for me and start setting up the connectors by default?

Now the next connector that I want to add is Hostinger. And that's because I'm going to use this for all of the hosting of the site. Now if we look here Hostinger has a native connector that can connect with pretty much any of the vibe coding tools. So vias, code cursor, Devin Claude, anti-gravity, whatever. The way this will work is that rather than you having to know how to deploy something, you can simply just prompt your AI model and it can automatically deploy it for you.

It's going to deploy this to a virtual private server, and you will need to select an option here and make a purchase. If you do actually want to deploy this out and have it live, but this will come with the domain for you. It will come with multiple applications, so you can deploy a ton of different sites, have inboxes, all of that kind of stuff. Now, full disclosure Hostinger is a long term partner of this channel, which means that if you do decide to use them so you can pick the business plan, for example, which is like four bucks per month, you can use the discount code tech with Tim here, and this will give you an additional 10% off.

So what I'm going to do is I'm just going to connect this right now. I'm going to select my subscription duration. I'm going to choose the domain I want to use. So I could use like you know like Tim Roscoe Dot net or Timber Seacom whatever. And then continue and then we can connect this to cloud. So once you go through that it will prompt you with the following dialog. We're going to go create a new site. What we can do is just select this Node.js web application and then press on next for the domain.

Select the domain that you purchased. You can see I have a bunch. So I'll just go with Tim Saga dot site and continue for the location. Obviously just pick whatever is closest to you. For now. I'll just go with Indonesia and then from here we're going to select this build with Hostinger connector, because we're just going to build it directly with AI. Then we're going to select our option. So I'll go with cloud code.

And we're just going to configure this. So we're going to go leave. That's fine. And then it's going to share with us how to add this to cloud code. So you can see that it's giving us a manual configuration option here. So what we can do here is just copy the Json that it shows us. We can go to cloud. We can paste this in here. We can say can you please update my MCP configuration to add this. So all we're doing is just copying the configuration directly from Hostinger.

And then it will automatically add it for us. However, it is saying that we need to add a special token here. So what we can do is generate a new API token down here. So we just need to give this a name. I'll go with Claude. And then we're going to generate this token and copy it. And then same thing. We can just come here and say the token is this. So we obviously don't want to leak the token. I will delete this afterwards.

But the idea is we're going to add what's called an MCP server or in this case multiple MCP servers. These will be able to connect directly to hosting or manage our business deployment for us. Automatically deploy something to the domain so we can do everything inside of this tool. And we don't need to leave it once we've got the initial setup done. And that's the basics on this step here is that we want to connect all of our connectors.

We want to add all of our third party tools. There's something else we need. We want to do it at this stage so that we can just focus on building. And we don't need to worry about keys and credentials and deployment and all of that. So what I'm going to do is just go ahead and press on. Enter here again, I've given the config, I've given the token, and if for some reason you want to add this to another tool, again you can just switch between the OS, say what you want to add.

You guys get the idea. Okay, so we should be good to go. We can close this page for right now. Again, don't leak the token like I did. I'm just doing it for video purposes. And then it should add this for us. All right. Now it's going to keep asking us for permission to change these configurations. If we don't want to have to keep manually applying those. What I can do is just change this to bypass permission mode. When I do that, what will happen is will no longer ask us or prompt us to confirm something.

It will just automatically do it. Okay, so we can see now that it says it's added the MCP servers. However, in order for us to actually use them and verify that they're working, what we need to do is just restart cloud code. So we're just going to close it, reopen it. We may need to make a new session and they should be available. Okay. So I've just restarted this. And just to verify that this is working we can just give this a prompt and say can you check if we're connected to get in GitHub and to the hosting or connector?

Okay. So we just want to verify the tools are connected. And then we're going to move on to planning and building okay. So we can see that we are all good here and we are connected. If something wasn't connected we would just go through the connection process. And if you've never used git on your computer before, this may not be set up for you. So what you can do is simply tell it, hey, can you install git for me? And can you help me set this up?

Or give me the instructions to do so and it will run you through that process? Git is something that runs on your computer. GitHub is what we've connected via the connector. There are two separate things even though they work together, so sometimes they won't be set up together. And you need to go through two separate processes. Anyways, at this point we should be good to go, and what we're going to do now is start planning.

So I know that phase was long, but that's the longest process now we can move on to plan what we want. Now when we're vibe coding, it's so incredibly important that we think through really carefully exactly what it is that we actually want to build and the reason we need to do this is because I will really commonly make a bunch of stupid decisions. It will do things you didn't want, and if you give it a vague prompt or something that's not really clear, it will use its own interpretation, and it can be really difficult to get back to the key idea once it's gone crazy.

So what I always suggest is that before we actually start telling the model to build something, we create a detailed plan. Now the plan is typically just us rambling into something like cloud code. We can use our voice, for example, to text or to prompt and tell it, hey, this is what I want, this is what I'm thinking. And then we tell the model to ask us questions about what it is that we want, so that we can really clarify everything before we proceed and before we start building this out.

Now, there's a few other decisions that we need to make, which I'll go over in a second, but what I always recommend is that you install some kind of voice to text tool. For example, I'm using here a tool called Whisper Flow. It makes it much faster to speak into the computer and give really detailed prompts. You can see that I speak at 217 words per minute. So if you want to leave a link to in the description so you guys can try it out.

But the key idea is that what we're going to do is just kind of dump what we want, and then ask the model to help us clarify and plan this out before we start building. So this is how you would start your prompt. Hi, I would like to create a detailed plan for a vibe coded website that I'm about to build. Before we build it out, I would like you to create the plan. Allow me to review it and ask me any clarifying questions that you need in order for us to build this in it to be crystal clear with no ambiguity.

And you don't need to say this word for word, but you get the idea. We want to tell it, hey, ask us questions. Let's plan this out. Let's start in this phase before we go crazy and start building something. Then after that, we just ramble into the model and tell it what we want. Now, when we're describing what we want, we typically want to describe what do we want it to look like? Who's actually going to be using it?

What problem are we solving by building this thing and why are we building it? If you describe that, the model will be able to ask you some better questions. So don't just say, hey, I want to make a dating app or something. Say, I want to make a dating app for this type of user. I'm building it because I noticed this problem. These are the people that are going to be using it. I want to share it. I want to deploy it, whatever, go through as much detail as you can, and that's going to give you the best result, which is why always speak as opposed to typing.

So I'm just going to ramble something random and then we'll continue. Okay. So I've just given this a pretty simple prompt. I'm telling it that I want to create a kind of digital version of my resume or my LinkedIn profile that I could just share with people that says all the information about me. Of course, you can make something more advanced, but that's what I'm going to go with, and we should see here in a second that it will start generating a plan.

We can review that, make sure that we've created all of these decisions are made these decisions upfront and then proceed. So the model should start asking you questions. If it doesn't, you can prompt it to ask you more questions and then go from there. Now I just want to note that after we go through, we answer these questions. The next thing we want to do is decide on the tech stack that we're going to be using. The tech stack is the languages, the tools, the different technology that's going to be a part of our app.

The model can help us do that, but this is a decision that we do want to make up front. You'll see what I mean in a second. Okay. So we can see that it started actually asking me some questions here. First question where should the site live once built. And what I want to do is I want to deploy this via hosting or that's why we added this this tool. Sorry. So I'm going to go Timothy Gedcom view hosting. What design direction do you want.

Let's go light editorial. What photos should you use? Just use my public avatars and then make this an employer resume or hybrid portfolio. Let's go employ resume okay. So we've answered those questions. Now you'll also notice that it's created a bit of a plan for us here. It has content structure right design direction tech stack assets. And then verification. And for the tech stack this is what I was talking about.

We want to decide before we start building this what languages and technologies we want to use. Now this is fairly straightforward to do if you're going to build a web application. And I'm going to go through some general rules you can follow. So if you're just going to build a web application, which is what we're doing here, you want to use Next.js. You don't have to worry about exactly what that is. But if it asks you for a tech stack, you can select Next.js or tell it to use that.

Now Next.js will be able to handle both the front end and the back end of the website for you. Now, if you're unfamiliar with what that means, front end is just the user interface that you can actually see that you interact with, and the back end is something that you don't see that's not visual, that handles all of the data, the accounts, the security, the credentials. And it's something that needs to be written securely.

Now, if you just build something purely visual, you don't need to worry about the backend. But if you want to have accounts, if you want user to sign in, if you want to store data persistently, you will need a backend, and that's going to involve a few more decisions you should chat with the AI agent about. So say, hey, I want to have some data for my application. I want to have some account suggest a backend for me to use.

If you just want a blanket suggestion, you can use something called Super Base. Super base will handle all of the data and a lot of the complex decisions for you. But if you're building something more advanced, maybe you're building a game. Maybe you're building an application in rust wherever you're going. Something beyond what I'm describing here. You need to do a little bit of research up front by asking the AI model and deciding what stack you want to use.

And again, the stack is typically like the database, the front end, the back end, how you want it to look, where you want it to be hosted. Hopefully that gives you a few insights. Hard for me to go over everything in this video, but that's kind of some general recommendations. So you can see now at this point we've created the plan. Now what we can do is we can tell it the tech stack that we want to use, then tell it to start building.

So what I'm going to say is I would like to use Next.js for this tech stack. Can you please build out the entire website? We just need a front end. We don't need any back end or any persistent data. And actually, I'm not going to go further here. I'm just going to tell it this and start building. So you can see originally didn't want to use the Next.js tech stack. And so we don't need to use any frameworks. But for me I'm just going, hey, let's use Next.js because I want to show you something that's going to work a little bit more reliably for pretty much any type of sites you want to build.

And again, you can chat with this if you want it to use a different type of stack. Okay. So we're going to wait for this to build. Once it's done we're going to review it. I'm going to show you how we can also review the security of the website, even though for this one it doesn't really matter. And then deploy it out. Okay. So it looks like it's almost finished building here. It's actually created the website and opened it up in the browser so I can view it.

If for some reason it doesn't do that, you can instruct Claude. Hey, open this in the integrated browser and it should just do that and be able to follow those steps regardless. You can see that I can scroll through now. I can see all my, I don't know, work whatever that it's put here. And then if I wasn't happy with something, even though it's still building, I can take a screenshot of this, I can paste it into Claude, or I can directly annotate.

So you'll see that there's actually this annotate and select element button in the integrated browser. For example, if I go annotate I can circle something right? And then I can add it to the chat. I can change the color. I can do an arrow here. So I can kind of tell it just like I would a real human. I don't like this. Change this around. You get the idea. Now additionally, I can use the select element button and I can select a part.

So for example maybe my name, maybe I wanted to use my full name. So I select that. And now it gets added to the chat. And I could say please use my full name instead of my shortened name. Right. And then it would change this to use Timothy. Right. My full name. So this is kind of the review phase we go through. We do screenshots. We directly select elements. We tell it what we want it to change. We can give it more detailed prompts.

And you guys get the idea. Now for now I'm going to leave it as is. I'm going to wait for it to fully finish, and we're going to move on to the next step where I'm going to show you some skills that you can add to optimize the page, make it look better, and then if you were building something a little bit more complex to check for the security. All right. So it's done. The first version of our site here. And again we at this point we will have reviewed it giving it some feedback.

And then we can continue building. However, maybe I want to go with something that looks a little bit cleaner. And you'll notice a lot of times when you're vibe coding websites that you're going to get very similar designs, because that just kind of how I works. So there's actually these things called skills. These are effectively reusable markdown files that you can install inside of Claude, or really any vibe coding tool that instructed to do something different better or follow some kind of process.

So for example, there's this skill called front end design, very popular. You may have heard it before. What we can do is I'll just leave a link to it in the description. We can just copy this and just give this to Claude. So I can just copy the GitHub repo, tell it, hey, install this skill and use this to review the design of my website. And it will just make it look better. So rather than me having to come up with some fancy prompt, I can just install this skill.

So what I've done is I found this skill. You can find all kinds them on the internet. You can look for different ones depending on what you're building. I'm just going to paste it here and I'm going to say please install this skill and then invoke it and review the website and make it look better. Okay. That's it. That's all I'm doing. Let's press enter and then it should add that skill. Okay. So this is in the process of building right now.

But when it does that I want to show you another skill that's useful to add, which is a security skill. Now this is called vibe six skill. Again I'll leave a link to it in the description. I'm not going to use this one because I don't have a backend for my application, but if you are vibe coding something that's larger if you care about the security, if you want to make sure you don't get hacked, for example, and you have real user data keys, whatever that you're using, I highly recommend that you install this, that you can install it using the exact same kind of process you saw before.

Just copy the URL, say install this and run it and use it. Now if you read through here, you're going to see that it shows a secure coding guide for web applications. So how you defend against issues access control problems write authorization checks. So what it will do is force clawed code to go through your app and to audit it independently using all of these different things that are shown up here to make sure that you don't get hacked.

Okay. Now of course this is not guaranteed. It's not going to, you know, make sure that's the most secure app in the world, but it should catch any very obvious, easy to kind of hack problem. So I would suggest going through that again. You copy this, you paste it here and you say please run this skill run. And then it will just run it and make sure that you are good to go. Now again, it's still buildings. We'll wait for this to wrap up and then we're gonna move on to the final phase, which is deployment.

Okay. So it looks like this is fully finished. Now, what we're going to do is move on to the deployment. So for the deployment, because we are connected to hosting here, all we have to do is really just tell this to deploy and it will deploy it for us, which is the whole benefit of having this connector. So we're going to say please deploy this site now using Hostinger. So the first entry here and hopefully it will deploy it.

Now keep in mind you can also deploy multiple sites here in different types of applications. So because this is connected you can use this for different projects. And you can keep deploying to the same server. You don't need to keep purchasing new ones unless you go over the limit. And if you didn't already make this connection, I'll leave the link to it below in case you want to set it up now and actually get the app out and running.

Anyways, let's give it a second here. It's going to follow through with the instructions and then we should be good to go. All right so the site is now deployed. Just wrapped it up. And if I go here you can see Timber Seacom. It's live. We have the fully deployed application. I didn't really need to do anything. I just purely told it. Hey, deploy the app to Hostinger and it figure that out for us. And that's why I like using this connector, because it really just saves me all of the time.

It has https, the domain is connected and I don't need to do anything too complicated. Okay. So that's it guys. That's going to wrap up this video. This was a relatively quick guide to vibe coding. I hope that this helped you get your environment set up, that it taught you a few best practices, showed you some interesting tools to use, and you can now go out there and build something that's legitimately useful. Anyways, if you enjoyed the video, make sure leave a like subscribe and I will see you in the next one.