Want to learn how to build an AI-powered app in record time? In this step-by-step Bolt.New tutorial, I’ll show you exactly how to create your first app in under 20 minutes — no advanced coding skills required!
This beginner-friendly guide covers everything from setting up Bolt.New to building a fully functional AI app you can actually use. Whether you’re a student, tech enthusiast, or someone curious about AI tools, this tutorial makes app development simple, fast, and fun.
👉 What you’ll learn in this video:
How to get started with Bolt.New AI
Step-by-step app creation process
Tips for beginners to save time
How AI is changing app development
By the end of this tutorial, you’ll have your very own AI app up and running in less than 20 minutes. 🚀
Don’t forget to like, comment, and share if this helped you!
#AI #ArtificialIntelligence #BoltNew #AppDevelopment #AIDevelopment #CodingForBeginners #TechTutorial #LearnAI #FutureOfTech #NoCode #AppBuilder #StartupTools #AITutorial #ProgrammingMadeEasy #BeginnerFriendly
This beginner-friendly guide covers everything from setting up Bolt.New to building a fully functional AI app you can actually use. Whether you’re a student, tech enthusiast, or someone curious about AI tools, this tutorial makes app development simple, fast, and fun.
👉 What you’ll learn in this video:
How to get started with Bolt.New AI
Step-by-step app creation process
Tips for beginners to save time
How AI is changing app development
By the end of this tutorial, you’ll have your very own AI app up and running in less than 20 minutes. 🚀
Don’t forget to like, comment, and share if this helped you!
#AI #ArtificialIntelligence #BoltNew #AppDevelopment #AIDevelopment #CodingForBeginners #TechTutorial #LearnAI #FutureOfTech #NoCode #AppBuilder #StartupTools #AITutorial #ProgrammingMadeEasy #BeginnerFriendly
Category
📚
LearningTranscript
00:00What is up, party people? Today in this video, I'll walk you through how to use the Bolt platform
00:03to create stunning AI websites. Bolt.new is an AI platform that allows you to create websites,
00:09apps, or virtually anything you can think of by just generating a prompt. The beauty of this
00:13platform is there's no limits on how creative you can get. So in this Bolt AI tutorial, I'll walk
00:17you through a three-step process. We'll first start with something simple, like a website.
00:21First, we will start with something really simple. We'll start with a blank canvas. I'll then show
00:25you how to refine the design, add in your own content, and publish something that actually
00:29looks good. And step two, we'll create an application. I'll walk you through how to create an application
00:33that you can use right now for your own business. We can make changes, customize the app, and adjust
00:38it however you would like. And lastly, I'll walk you through more of the advanced prompts. I'll walk
00:42you through how to create a website that really pushes the limits of AI. I'll show you how to
00:46create complex prompts with stunning designs in just a few minutes. Now you can get started with
00:51Bolt completely for free just to try it out. So there is a link in the description that'll take
00:54you to Bolt where you can make a free account and then start making some AI websites. Okay,
00:58and this is the Bolt website. Now the domain is bolt.new. It's kind of a weird domain, but that's
01:03what they chose to go with, right? Now with this website, you can create websites and apps all
01:08generated with AI. Now let's start with something very simple, right? Now I'm just going to give you
01:12an idea of what goes on here and then we'll build from there. So for example, make me a website for my
01:21dog, right? And then I'll go ahead and generate the websites. And what this will do is that it'll just
01:26generate a website for basically dogs. All right, and here we go. So now we have this dog websites,
01:31right? So you'll see that we have meat buddy. And here we go. We had a website for a dog,
01:36right? We have some pictures of dogs, right? We have a photo gallery. We have some fun facts and
01:42also a get in touch section. So pretty basic, right? Pretty standard, but that's a quick way on how you
01:47can use this to create, you know, something really simple. Now, if you want to make more complex
01:51websites that go into detail, that's where we're going to go over to ChatGPT. So let's do that.
01:56Now, the first thing I want to do is I want to get the AI familiar with this specific application,
02:01right? So are you familiar with the Bolt.new websites?
02:12Okay. And then ChatGPT just gave us like a quick summary about Bolt and they talked about what it is,
02:17who's it for, examples about it, pros and cons, et cetera. Now, I always like to do this because
02:22again, I like to familiarize the AI with what I'm talking about because then it gives me better
02:26results. So now let's ask it to create something more descriptive, right? So over here, I'm going to
02:31ask anything. I'm going to put, I want to create a website using this platform. Create me a prompt
02:35that is very detailed and descriptive for a web design agency. Be as detailed as possible. And then
02:41ChatGPT is going to give us a descriptive prompt that we can use for Bolt. We're going to copy that.
02:45Now, what I do recommend is do not actually start over from the same tab. Always open up a new
02:51browser. This will produce better results because what I've noticed with these AI tools is it usually
02:56kind of carries over some of the design and some of the, you know, fonts and colors from the previous
03:01design. So I always want to start fresh. So I'll open up a new tab right here and I'm going to paste
03:06this in now. So this is a much more descriptive prompt as you can tell, right? So here I'll click on
03:11generates. Okay. And just like that, you'll see it has now generated a really nice looking website
03:16with a little bit more detail as you can tell. So here we have a landing page. We have some call
03:20to action buttons. We have these little, you know, upsells or whatever featured projects.
03:28Scroll down. We have some testimonials and our footer here at the bottom. So overall, like you can
03:32really create a decent looking website. Now, many of you are probably thinking to yourself, the site's
03:36great and everything, but how do I further modify this? Right? Because a lot of this doesn't really
03:41apply to us. A lot of it's demo content. Let me walk you through on how to do that. Now, the first
03:45thing that you can do is here on the right side, we have some options. So the first option is full
03:51screen. This is where you can get like a, you know, a full screen preview of what your website
03:55actually looks like. Now, right here we have the inspector elements. Now, let's say for instance,
04:00you want to change something on your websites. So here, click on the inspector, right? And then what we can do
04:05is we can go throughout the websites, right? So let's say for instance, we want to change this
04:10landing page title. So right here, I'll put, can you change this to how to make a WordPress
04:20websites? And then I'll, here, then please keep the colors the same. Okay. With the AI, you got to get
04:31really descriptive. So what I've noticed here is when you do actually give it commands or you tell
04:35to do something else, you need to really like tell exactly what to do because sometimes it'll
04:41give you different fonts or different colors, but here we go. Now, see what I should have done here.
04:46Now you're understanding this. I should have said, capitalize the first letter of every word,
04:50right? So you really got to be descriptive, right? But you get the point. So what you can do here is
04:56you can go throughout the website and make any modifications you want using the inspector elements.
05:00So here we have a featured project section. Now let's say for instance, you want to actually turn
05:05one of these into one of your real projects. So we're going to do here is I'll click on the
05:09inspector elements and I'm just going to wing it right now. So what I'm going to do here is I'm
05:13going to go ahead and click on one of these boxes and I'm going to put something like sure to create
05:21a button to link to DuraWilson.com. Okay. There we go. So if they do generate you specific sections,
05:30you can always go ahead and improve upon those sections. You can also take those buttons and
05:35link them to anywhere you want. Okay. So it went ahead and updated and I'll click on this little
05:40DuraWilson. And now if I make this full screen, let's go ahead and make this full screen and
05:45actually view it from here. If I click on DuraWilson, you'll see it creates this pop up. And if I,
05:51you know, click on DuraWilson.com and now it takes me to my website, right? So you can go ahead and
05:56keep building and expanding on the AI. Maybe you wanted like an image of DuraWilson's website or an
06:01image of a client's website. You can actually link it, right? So to further kind of keep going on it,
06:06you can go ahead and click on this again, click on this image, and then maybe upload an image.
06:11So you can upload files. So here I put upload files. So I put an image of my website and I says,
06:16can you use this for the featured image and also show it on the pop up? All right. So here's a
06:21picture of my website. I actually had to use a link image and then it actually, it worked.
06:25And if I click on this, you'll also see that there's an image of me. It's not the best image,
06:30but I'm just giving you an example, right? So you can go ahead and go throughout your website and make
06:34further modifications to it to every part of your website. Now let's go ahead and take a look at
06:39some of these controls. So here we have this responsive mode. Here you can go ahead and look
06:44at what your website looks like visually on the actual mobile device. You can also switch between
06:49different devices. You can also instruct the AI to fix mobile preview. So if there's something that
06:54didn't work out or if it looks weird, you can always ask the AI to optimize your website for
06:59all devices. Now here at the bottom, we have some more options. So here we have a prompt library.
07:04So here we have prompts and you can use these prompts in order to enhance your websites.
07:08So for instance, you can use this for like SEO. So the image that we uploaded might've not been
07:13titled properly and that's not good for SEO. So what you can do here is you can ask the AI to audit
07:19your entire websites, update the images for SEO. You can also use this for usability. And then also
07:26they have some options like implement dark mode, right? So here dark mode implementation. I'll go
07:31ahead and insert this and bam. Now we have this, uh, toggle dark mode where now we can toggle between
07:37dark mode. I mean, this is so cool. Like I just love the fact that you can just easily create something
07:41very complex in a matter of seconds. Now, if you use WordPress, you probably know that you have to
07:46install a plugin, it conflicts with the theme, it conflicts with all this other crap, but with this,
07:51it's like, it just works. You know, I love that. Right now, the last feature I want to show you
07:54all is something called discuss mode. So right now we're building our website, right? But you might
07:58want to ask the AI, well, like how can I make this look better? Right? So for instance here, I'll click
08:03on the toggle. So this is actually in build mode, but now it's in discussion mode. So how can I make my
08:10landing page more creative? Now we're not instructing it to actually change anything on
08:16the website, but we're just trying to get, you know, some ideas and inspiration on how the AI can
08:20help our design. And after we entered that in, you'll now see that it generated this really large
08:24prompt and you can use these prompts if you want to further extend the creativity of your design. So
08:29I do recommend to get the opinion from AI because at the end of the day, I think they're better
08:33designing websites than most humans. Now, another thing I want to show you all is the integrations here at
08:37the top. You can also integrate Stripe and Superbase as well. This essentially allows you
08:43to store like contact information or booking appointments or any information you want from
08:47your websites. It'll all be stored in your Superbase account. And you can also add an integration for
08:53GitHub as well. And if you do want to publish your work, all you got to do here at the top is click
08:57on publish, and then you can get a published version of your work. Now you can also add in custom
09:02domains as well. I'm not sure which provider they use. Actually, I think they use like Ionis.
09:06And once you click on publish, you'll then get this confirmation on the left side. I updated the
09:10design a little bit, guys. I was kind of bored. So hope you guys don't mind. Here is the URL of
09:15your new websites. And this is where you can access your AI websites. If you want to go ahead and claim
09:21the websites and add in a custom domain, you can go ahead and transfer your work over to their partner
09:26Netlify, I think. And that's where you can also add in a custom domain onto your new AI website. So
09:31that is a general overview about how to use this platform. But let's talk about something a little bit
09:35more advanced. Let's make this like an application where we can actually use this for something.
09:40So let's hop on over to chat CPT. And now I want to ask it to create an email generator for web
09:45designers, right? So over here, I'm going to put, I want to make an app. So here we go. I want to
09:50make an app for bolt.new. I want to create an email generator tool for web designers that they can use
09:54to generate leads. I want my website to generate email templates for my users. So essentially what I'm
09:59doing here is I want to create like an application that can actually generate emails for like pretty
10:04much any type of business. And here it is. So it's now going to instruct the AI what to create. So the core
10:11purpose, the functionality description, we have the design, we have the page structure and a whole lot
10:17more. So what I'm going to do here is I'm going to copy this now and I'm going to paste it into the
10:21bolt app. Now, just remember, whenever you're doing that, always start on a new page. Okay, I know many people
10:26are tempted to just enter in, you know, on the page they're working on. But like I said before, it'll give you better
10:31results if you start over from scratch. So I'm going to go ahead and enter this in and see what
10:35it generates for us. And bam, here we go. So now we have this cool email lead generator. So this is my
10:41website, right? Pretty cool, right? But let's just see if this works. So here I'll click on generate email
10:46now. And then here we have an email generator. So here we have the business type, location, email tone,
10:52and the unique selling points. So business type, I'm in, let's just put real estate, right? Real
10:57estate, real estate. I'm in New York. All right, New York. We are in business for 30 years. And my
11:08agency name is Daryl's Agency. Here I'll click on generate email. And now my website should generate
11:15an email. Look at that. Look at that. You know, it generates a really cool email for anyone to use.
11:20And they can go ahead and click on this copy right here. And then they can use this for their
11:24business. But all in all, I would say I'm really impressed with this. I mean, this looks great.
11:28Now just remember, you can always further extend on your apps as well, just like your websites.
11:33Now in this specific case, I like this drop down and I want to carry this for all these sections. So
11:38what I'm going to do right here is I'm going to click on this and I'm going to tell them to add
11:42drop downs for each section. Can you add a drop down menu for each category?
11:50You did on the email tone. Okay. So now I'm saying I want you to add drop downs to each section,
11:58just like they did for this section right here. And just like that, you'll now see we have drop
12:03down sections. Look at this. I love this. I love how easy this is. You know how long this would take
12:09with WordPress? It would take you like a long time, right? And here we can just like generate in a few
12:13seconds. It's wild. So now let's create something really creative, right? So we made a basic website.
12:19We also made an application with monetization functions, but let's create something really
12:23creative, right? So let's hop on over here to chat.gbt and I'm going to use this prompt right
12:28here. I want to generate a visually creative complex design website for bolt.new. Can you create a very
12:34complex landing page with amazing designs and be as creative as you possibly can? Now what's cool
12:39about this is you can go ahead and ask it to create something and you can also further enhance
12:44and make variations of this specific script. So what I've learned here is whatever they give you
12:49right here, you can ask the AI to expand on it more and more and more until you get something
12:55that's like out of the world, right? It's really crazy. And here we go. So the reason why I'm showing
13:00you all this is because I want to let you know that you can further extend already enhanced prompts
13:04and then you can give it different like styles, like minimalists or corporates or whatever it is
13:10you're trying to go with. So here we have the first one, which is retro. And you'll see these
13:14are very long prompts. Now here we have corporate and minimal style, right? And then lastly, we have
13:20creative retro web style 2003 designer AI. I'm just very eager to see like what this can do, right? But
13:26before we get to, you know, before we get off topic, let's just go ahead and go back to original
13:31prompt and then paste that into bolt.new. So going back over here, I'm going to take my original
13:35prompt of the digital origami. I'm going to paste it in bolt.new. All right. And then we're going to
13:41see what this generates for us. And here we go. So now we've got a lot more going on, right? We've
13:45got a more complex website, more design animations, more, you know, more stuff. So let's take a look
13:51here. So it looks like we're generating a, you know, another application to generate emails for
13:56customers, but it's just like a more enhanced version. Now notice here how we have a lot more
14:00animations and we have, you know, interactions with the mouse. So if I click on this little icons or
14:06just, you know, touch them, they kind of like go haywire. See that? All right. Pretty cool. Okay.
14:12Scrolling down here, we have an email generator section where people can filter by category and
14:17then generate email. Really cool. Scrolling down, we have these banner sections. We have the designer
14:23speaks. So these are testimonials and it looks like you can, wow, look at that. So you can kind of like
14:28navigate through each, uh, testimonial. All right. Scrolling down, we have our pricing plans here.
14:34We have this section where it's just like, uh, you know, animations and stuff, right? We got,
14:40you know, some stuff going on and then we have our footer here at the bottom. Now I did actually make
14:44a second version of this website. So I just use the same exact prompt. Now when you do that,
14:50it's going to not give you the same exact website, but it'll give you something a little bit
14:53like similar, right? So here we have this website and look at that. We have this, uh,
14:58our mouse has this animation over that. Pretty cool. Right. And then we have these animations in
15:03the back. So if you don't move the mouse, nothing happens and you move it, these little things go
15:07crazy, right? Cool. Here we have some other sections, right? We have a different style of
15:13an email generator. So here I'll just put in like, you know, e-commerce rights, generate email.
15:19And then there, it's going to generate the email. All right. Pretty cool. We're going to scroll down
15:23below that. We have our testimonials, right? Pretty cool. We have our pricing tables. We have
15:30this animation section and then our footer here at the bottom all in all, right? It's a pretty,
15:35pretty amazing looking website. Now let's talk about the last feature, which is probably the
15:40most important. Let's talk about how to store all this information to a database. So whenever someone
15:45enters in a contact form or they integrate a booking form or they subscribe to your newsletter,
15:51we need to store the information in a database. So this is just the AI creator. It's not the
15:56database. So we need to sync it up with a platform called Supabase. So here at the top,
16:00you have integrations and here I'll click on Supabase. Now, if you don't have an account
16:05with Supabase, you can sign up for free. Okay. So I've already made an account with this website
16:10and all I got to do is just authorize it. So this is actually my account. So I'm going to authorize
16:15bolts and I'm going to connect it with this one here and click on connect project. Now what this does
16:21here is that it syncs up your website with Supabase. Once you do that, then you can instruct it to
16:27store the contact and information. So now that it's connected here at the bottom, we have this,
16:32this subscribe box, but what I'll do here, I'll go a step further. I'll just ask them to create a
16:37contact form and integrate that contact form with Supabase. All right. So now we have this contact
16:42form that I created with AI, right? So now we have this form. So I'm going to go ahead and fill out
16:46this form now. Now in order to make this work, we need to open this in a separate tab. Okay. I'll
16:52select my budget and this is a test here. Click on send message. All right, cool. So now we're going
16:58to check our Supabase accounts. So let's go over here. Okay. So here's my Supabase account and I'm
17:04going to go over here to table editor. This is where the AI will generate tables and store the information.
17:10So if I click on that under the contact form submissions, you're going to see this new
17:15submission dwilson123at123.com. Here is web design. We have the budgets and here is the message. Now I
17:25know this isn't like the best visual way to look at messages. Hopefully in the future, you can go
17:30ahead and update this UI. Now you can also go a step further here and you can integrate this tool
17:35with something like n8n.io. This essentially is AI automation. So essentially when something happens
17:42on your websites, you can instruct this website to do anything, right? So it can contact you on your
17:48website, on your Gmail, on your WordPress website, wherever. I will be having a tutorial on this
17:53platform very soon. And this will help you like automate the process when you get contacts on your
17:57website. So overall, I would say these AI websites are actually quite interesting, right? To make this
18:02from scratch with some sort of page builder, this would take you a very long time, right? In fact,
18:07with WordPress, you probably couldn't make this, right? So you'd have to use some other platform
18:11to make this, but with AI, you can make it in a matter of seconds. So in my personal opinion,
18:16I do think these AI tools are the future. I think like in the next like two years, these tools are
18:21going to get better and better and better. And eventually they're going to replace things like
18:25WordPress or Shopify or something else because those other platforms, they're just not moving at a
18:31fast enough pace to be efficient compared to these new AI models. And once these become more stable
18:35and more mainstream, I can see people easily leaving other CMS platforms like Wix,
18:41Squarespace, just hopping over to AI, just generate something in five seconds and be done with it,
18:45right? But let me know what you think about this in the comments below. I hope you all enjoyed this
18:49tutorial. If there's anything that I missed or anything that you want to talk about, if you want
18:53to talk about my channel or AI or my hair, whatever, let me know in the comments below and I'll do my best
18:59to get to all of your comments. My name is Daryl Wilson and I will see all of you party people in the next video.
19:03Take care.
Recommended
3:04
Be the first to comment