Vibe coding basics

There is a founder in Sweden who has built an entire startup using vibe coding. No manual code, just AI and he raised over 200 million dollars in Series A funding. That's the power of building software by describing it instead of writing it. And in this video, you will learn exactly how to do it yourself step by step as we build our first portfolio website using vibe coding together. This is going to be your vibe coding 101 class, basically your first hands-on exposure to vibe coding. Vibe coding is basically having an AI agent that builds software for you end-to-end. You just describe it, what you want, the AI handles the design, logic, and code. If you want to understand how these AI agents actually work and understand the fundamentals, watch this AI agents fundamentals video where I cover everything in detail. But in today's video, we're going to be actually focusing on the how. And by the end of this video, you will have built your own working website. No syntax, no setup, just natural language which is English. Alright, with that, let's jump into it. There are several vibe coding tools out there that are literally built to vibe code. For example, Lovable, Repl.it, GitHub Copilot, Cursor, just to name a few. The vibe coding platform that we're going to be using today is Lovable. I personally just find the interface very neat and easy to understand. This video is not sponsored by Lovable. They don't even know I exist. And if you do find out through this video that I exist, Lovable, please reach out to me. We can partner on the next video. Let's cover some fundamentals of vibe coding and how it actually works and what steps it takes. First of all, think of vibe coding as pair programming with an AI agent that understands your intent instantly. You don't write syntax like HTML or Python. You just describe it your idea in plain English. Then once you do that the AI agent does three things. It translates your request into clean, runnable code. Second, it builds your project end-to-end. Three, it refines your thoughts and your feedback. It's basically a mindset shift from how do I code this to do I want to do this? All right, let's go to lovable.dev. I'm going to share the link in the description below and we're going to build our first web coding project together. Step one is we're going to go to lovable UI. So basically what we're going to tell it is build me a personal portfolio website with my name at the top, a short bio section, three project cards, and a contact form and at the bottom. I'm going to give it all the information so it knows what I am. So name is Sundas Khalid and attaching my resume for reference. Okay, so I'm uploading my resume and I'm also telling it what I want my website to look like and my name and i can even go even further give it my linkedin my github portfolio and whatnot but for the purposes of this demo let's keep it simple i mean this is already complicated but let's start here so once i hit enter you will enter into this user interface it i'm using dark mode so it might look different i'm really bright if you're using light mode on your side but basically now on the right side you can see that it's starting to think it's trying to figure out what it wants to do and on the left side it's telling you like what is thinking right now and what it plans to do. Once it has done all of that, it's actually going to give me steps that it's going to follow and the workflow that it's going to use. All right, as you can see, it thought for a few seconds and then it basically gave me a design plan that it's going to follow. It's going to follow a professional tech forward design with navy blue and primary teal accent. It's going to add all these additional features and projects from my resume that basically it's going to highlight my work. So now I'm gonna just let it do its thing. So if I click on show all it actually tells me all the steps that it's doing right now. So far these are all the files it has built in the back end and it's going to continue working in the back end. So when I did it for the first time it took a few minutes. This process doesn't typically take that long but because I'm doing this video obviously it's taking longer. You know what they say like when you're doing demos things always either fail or like perform the worst. While this is building in the background I wanted to share a tool that has been really helpful in my own workflow. I've been using PopStore, who is sponsoring this part of the video. And honestly, it's the AI-powered creator super app I wish I had years ago. As someone who is juggling filming YouTube content with a full-time job and a family, their avatar me AI content studio shows how powerful AI has become for creators. It can generate photos, a full HD video that looks like you in minutes with customized outfits and backgrounds. You can even create short videos where your avatar speaks using your real voice. It gives you the look of a filmed clip without needing to record extra footage. For me, this adds flexibility. I can plan content, create previews, and build promo clips without always setting up a camera gear. I still film my videos but tools like this expand what I can do in less time. What's really impressive is how Pop Store does it. They don't rely on one AI model. They use multiple models behind the scenes and automatically choose the best one that gives you the most accurate natural looking results. It's not generic AI content. It looks like me, moves like me, dresses like me, and talks like me. And it keeps my channel active across YouTube and social without adding more filming to my weeks. If you want to try it, check out PopStore using the link in description below. Okay, let's see how far our Y Pudding portfolio project has made progress. Alright, so now you can see that it has actually built a really solid website for me now this again like this is a very simple example of where i'm building a website you can technically go build a website with drag and drop but for the purposes of this video and keeping it simple i'm starting with this use case you can imagine like all the complicated things that you can do with it build like mobile app build ai agent from an ai agent like so many things you can do build like an actual product like that sweden entrepreneur did so the possibilities are limited to what you can imagine Okay, so it has already added my e-mail and it has added my LinkedIn profile. Before I click, I'm gonna see like what it has added. It already like looked at my resume and came up with this. Uh, this sounds actually pretty correct. Then it also highlighted my feature projects. This is what I actually did. Yes, beta elasticity testing at scale. Yes, I did that. For those who don't know, I have been working in big tech for about 12 years. Previously, I was at Amazon for about six, seven years, started it as an intern. I'm currently at Google. So then it basically says like a way to get back at me and then it's sharing my personal e-mail and phone number. So basically before we publish it, we can actually also ask it to customize it. So let's actually look at the mobile site and see what it shows. So the mobile site looks okay, but I think I want it to like show bigger text, show bigger text on mobile and make the screen responsive to screen size. Okay, so now I did that it basically is going to think for a little bit more and it's going to build my website it's going to basically make the changes so now as you can see like this is what it's doing in the back end it's currently editing this file that it's created bio so once it's done and I have enough credits left I'm gonna ask it to change the color scheme I'm okay with the current color scheme but I actually wanted to make it pink so let's see if that works and then if you want to look at your code you can also like click here and see like the actual code that it's writing it has written in the back like all of these files it has written but we're gonna keep on the preview side because we're white coding we're not coding all right so now i think it is done it has made some mobile improvement it has also made the scaling more responsive let's actually check out the mobile site and see what it did yes it does look bigger compared to how it was previously Now I have no credits left but in case let's say if I do have any credits left what I would ask it to do next is change the color scheme to pastels pink and purple and it's gonna tell me I have no credit obviously uh but basically you can continue customizing it make it your own but this is basically let's see if I can publish it so if I publish it let's see what happens hopefully I'm going to have to unpublish it but if the publishing is pretty straightforward then you can go ahead and publish your portfolio site after making it because okay so the site is now published let's actually go to a your a new chrome tab and try to see if it actually wow it's actually a live site amazing this is really cool and i love that it emphasized like my skill set and everything. Previously when I was testing, I was also adding interaction to it. Basically when somebody clicks on learn more about me or like click on a button, I would show some interactive responses. For example, one of the buttons I created is like it responded with the thank you message. You can do so much with it just by describing it. You can create interactive experiences. You can create interactive websites. You can create dashboards. You can input your source file and the possibilities are endless. This is just basically your introduction. Currently, I used all of the five credits that I had available today. Technically, I can come back tomorrow and make more changes to it. So if you don't want to sign up for the paid account, you can also like do your work in chunks. If you are done building your portfolio website, you can also build something else. You get five credits per day. So this all seems really cool and amazing. An amazing tool to have access to now that I didn't have growing up. Probably when you went to school, you didn't have it. But let's actually talk about what this means and what the bigger picture is. Here's what's wild. Vibe coding will give rise to an entirely new wave of startups. For example, the startup from Sweden that I mentioned earlier in this video. Previously, you needed an entire software engineering team or at least one software engineer to build something. But now all you have to do is come up with an idea, build a prototype, and then eventually to operationalize it, you will need some technical people to support you. But the prototyping you can technically do with white coding. This is the first time anyone on the internet has access to tools that can code end-to-end, front-end, back-end, even data logic while you simply describe what you want. And this is why it's going to change the game. A few years ago you needed a full dev team to turn an idea into a product but not anymore. Now you just need a clear vision and a good prompt to create product, at least the first prototype. Operationalizing it, maintaining it is a completely different skill set and eventually by that point you would need somebody who is more technical than you to be able to do and maintain and sustain that product that you have built. But for prototyping I think this is brilliant and maybe after watching this video you will vibe code your own product idea that you come up with whether that is an app or dashboard or your own AI powered business. The possibilities are endless and if you do come up with some cool ideas which I'm sure all of them are going to be cool, tag me or comment below because I would love to learn what you end up building with this knowledge. Vibe coding is great but there are some nuances and caveats. Before you dive into your next project, here are a few things that you should know. First, vibe coding tools are powered by large language models like GPT-5 or Gemini. They don't understand code like humans. They predict patterns based on the example. The clearer your description, the cleaner your output. Second, vibe coding is a loop, not a one-shot prompt. The best builders think iteratively, describe, test, refine, and repeat. And third, and this is the most important, anyone can vibe code and build an app. But sustaining, scaling, or operationalizing, it still requires understanding system architect, data flows, and core computer science fundamentals. So no, these tools won't replace software engineers, if that's what you're thinking. they will make good engineers and product thinkers 10x faster. And the real differentiator won't be who codes. It will be who understands systems well enough to direct AI effectively. And if you're looking for ways to improve your prompting skills, you can follow the framework that I have been using. I'm going to link that in the description below. And with that, that's how you vibe code. If you follow this video end-to-end, now you have vibe coded yourself. You just learned the fundamentals of live coding, practice them live with me and build your own web app. Not syntax, not setup, just using your creativity and English. And if you haven't watched the AI agents fundamental videos yet, that's your next step. It explains the architecture that makes all of this possible. I'll link it in the description below. Let me know in comments if this video was helpful and also let me know what topics I should cover next. And with that, I hope you're having a beautiful day. I'll see you in the next video. Have a good one. Bye!