v0

In this video you will learn how to create beautiful websites like this one for free without any coding skills in a matter of minutes. In the past if you didn't have coding skills you had to use one of the various website builders, but they have their own learning curve and you might not have the time to learn how to use them. Also they don't provide the code, so if you later decide to hire a real developer they are limited in what they can do: they have to use the same builder. Now thanks to AI it's possible to create a website with real code in a matter of seconds like an actual developer, but just by prompting an AI in plain sentences, and in this video you will step by step learn how to do this. At the end we will even deploy this project so that we can reach it on the internet under a real URL. My name is Florian Walther and this is AI Tool Corner where I review the latest AI software to find out which ones can actually improve your life and business.

Please excuse if I look a bit tired—I'm actually sick, but I had to take the time to show you this because it's really cool. Okay, let's jump right in and build something. If you want to follow along, go to v0.dev and here we have to create a free account. You can't use the chat without creating an account, so click on sign up. Now with a free account you have a limited number of messages that you can send per day, but this resets every day—it's more than enough to build something cool, and we can later even deploy our project to a real URL for free, so watch the whole video to learn how to put your website on the internet. As you can see, projects that you created earlier are also stored and they are available in the sidebar, but you can delete them if you don't need them anymore.

Okay, now let's create something cool—but first you have to understand what kind of websites you can build with this and what doesn't work so well. Right now these AI code generators are really good at building front ends. The front end is the part of the website that you can see; it contains images, nice-looking designs, buttons to different pages, text, and all that stuff. The back end, on the other hand, is where all the data is stored—for example when you have a blog then the blog posts are usually stored in some kind of database, or if you have a shop then payments are handled on your back end. AI can't really do the back-end code properly yet because you actually have to set up a database, you have to sign up for these different providers that you want to use, everything has to be secure—we can't really do that yet with AI—but we can build websites that don't store large amounts of data—for example landing pages with just text, images, and different pages, a personal portfolio website, a website for your agency—we can do this kind of stuff—but not a shop or a blog. However, we can save data locally in the web browser—like this daily to-do list that I built for myself because I wanted to have a to-do list with a progress bar and subtasks, and nothing like this existed, so I created one in a minute, and even though this is not connected to a database if I refresh the page my input is still there because this is saved locally in the web browser—and I will later show you how to do this.

Now these AI tools are constantly getting improved, so I'm sure at some point in the future you will be able to seamlessly connect a database, but for now you will need someone who knows how to do this. What you can also do, of course, is create the front end yourself and then hire a developer to build and connect the back end—this way you can save time and money. You can also do some fun stuff and get really creative with v0—for example here I told it to create a Windows 98 clone and we can even open the start menu—it doesn't have everything implemented but looks funny—and we could build upon this by prompting the AI with more messages. Anyway, let's build something decent.

As usual when you work with AI chats you want to be very exact in your explanation because you're basically talking to another human and you have to exactly explain what you wanted to do. So I prepared this prompt: create a website for my YouTube channel AI Tool Corner. I gave it my brand color and told it to use it as the background color. I gave it my signature introduction text and some other text that I want it to put somewhere on the page. I also told it to add buttons with links to my different social media accounts. I also told it to create two more pages, About us and Contact, and just put some lorem placeholder text on there for now—we can fill that later. Then I wrote: make the website modern-looking and slick—I like landing page layouts that are divided into different sections like in the attached image; use the image as inspiration but don't copy it. I also attached my logo and banner—use them on the page. We can attach images to our prompt, so I Googled for landing page design and I found this one. I told the AI that I want it to use this general structure but not the same colors.

So what we do is we copy this prompt into the v0 chat, and then we must not forget to attach the images—we can create a screenshot of this or save it on our computer. I use the Snipping Tool in Windows. I create a screenshot, copy—isn't this an amazing time to be alive—paste it in here, which creates the attachment, and I also wrote that I attached my logo and banner—so let's add them as well, so I drag and drop my logo file in here first and then this banner I have prepared. I wanted to use both of them on the website. Now let's send this—again you want to be as exact as possible with these prompts. Then it cooks for a few seconds and then it will start writing code in real time. There we go—isn't this cool? We can see it generates multiple files like a real coding project, multiple different pages and components—and at the end we will see a preview of this website. This also uses modern technologies—it's React code using the Next.js framework and it uses Tailwind CSS for styling. If you're not a developer and you don't know these terms it doesn't matter, but for a developer this might be interesting.

Okay, so this is what it came up with—I think this already looks very decent. We have our brand color as the background—looks amazing—we see our images here. The navbar at the top even has this cool frosted glass effect, which the AI just decided to implement. We have our social media links—it added the appropriate icons—it came up with some text below that's fitting, and it added these different links here in the footer—even the current year, which by the way updates automatically, so next year this will change to 2026. The website will also be mobile responsive, so if I make this a smaller screen then the layout should adapt to the screen size—there we go—it still looks good—this turns into vertical instead of horizontal—and this way we can use this website even on mobile phones. The links to the different pages also work, so now we are on About and Contact with some placeholder text. We can now tell the AI to fill this with actual text, more images, whatever we want—and of course we can fine-tune this design by just prompting the AI with additional instructions. Here via this code button we always have access to the full code, so if you later decide to either learn coding yourself or hire a developer they have access to the code and they can use that to build upon that.

So let's try to change something on our website—I'm going to write: this looks good, but please make the YouTube button red, for example. Then again it starts writing code, making changes where necessary, and now we have a red YouTube button. Maybe I decide that this doesn't actually look very good—I could either tell it to turn it back into the previous color, or I can reset to a previous state, so I can scroll up to Version 1, this one that we had before—I can click on Open—now we are back at the previous state—and when you click Restore up here it resets the chat so that when we give it new instructions it will continue at this point and not at the point of our red button, so let's restore this state. If you click on this Retry button here it will retry this specific prompt, and sometimes it will happen that you get an error message if you try to do more complicated stuff—then you will see a red toast message here somewhere on this page—but on this toast message there is a button that says copy into chat. This will copy this error message directly into the chat and it will ask v0 to fix this error, so again you don't need any coding skills—even if you get an error you can just tell v0 to fix this particular error—and of course if you completely mess up your project you can always start over with a new chat.

Okay, let's try filling our other pages here with content. Let's say we want to put some text into this About us page—of course we could go into the code, find this page, and change the text ourselves—this requires very basic web development knowledge. We can find the page here under About—page text—even if you're not a developer this probably makes sense—and here we see the lorem text. If you know basic HTML you know that this is a paragraph and this is a paragraph, and this creates these two different paragraphs—here we can modify the text directly or add more paragraphs—for example I can write blah blah, save the changes, and then I should see it in preview after refreshing the page—there we go. But if you want something more complex and you don't know how to do it you can also tell v0 to fill this page with whatever you want—for example I can send another chat message: remove the placeholder text from the contact page—and replace it with my contact information—I added some simple stuff that I want it to put on the website. Let's try this out—see what it generated—I click on Contact—we get to the contact page and here's our information. If you don't like the design again you can prompt it with more instructions—for example add some fitting icons to the contact page—let's try it out. As you can see I have one message remaining today—this will reset tomorrow—or we can get a paid account where we have unlimited messages—and now it added these icons to the contact page which already looks a bit better.

Earlier I mentioned that you can store data locally in the web browser like I did here for my personal to-do list app. If you want to do this just tell the AI something like this: save all the important data locally in the web browser—the AI will know what to do—add this to your main prompt—then you can store data—which is very useful for these kinds of personal apps.

Okay, and now let's put our website on the internet—up here we have this Deploy button. It's very simple because Vercel, the creators of v0, are also a hosting provider, so you can host this website directly on Vercel—so we just follow these instructions—we have to add this chat to a project—I already have a few projects but we can create a new one—project created successfully—then we click this button again and confirm and deploy, and this takes roughly one minute. Now it builds the project, and when it's done we get a real URL on the internet under which we can reach this project—this one here—we open this—and voilà, there's our website, and you can copy this link and send it to your friends and they can all reach this website, and it's also very fast because Next.js is a fast framework. You can keep making changes, prompting the AI, and then you can deploy these updates here via the update button—it's so simple.

Now of course this URL that we got is not very pretty because it's a free URL, and normally you pay money for URLs—if you want a short URL you will have to pay some money. We can click on set a custom domain here—we will need a premium Vercel account which is 20 bucks a month per user, but this also gives you a lot of other features—you can host multiple projects, you have higher limits, you get free analytics and all of that—and when we have a premium account we can also buy and connect custom domains. If you're willing to pay that price, subscribe to a premium plan, then click on set a custom domain and just follow the instructions.

I will put a link to v0 in the video description below—have fun building your own websites—let me know in the comments if you came up with something cool—and subscribe for more AI tool reviews. Take care.