How to build a personal website with AI in 30 minutes

Navid Moazzez: In this session, we will show you how to build a stunning personal website with AI in 30 minutes using Bolt. And I have no one other than Gion-Per from Big Moves with me. I've worked with him for over 10 years in my own business as my design team and tech help and all of that. And he's really good when it comes to this kind of stuff.

He's been experimenting with a lot of AI coding tools and Bolt is really powerful, so I'll make sure I'll link up that, but you can follow along in this session here. But to get things started, Gion-Per, why don't you tell us a little bit about what everyone can expect from this session if they stick around until the end, what are we gonna build?

And also share a little bit more about your experience here.

Gion-Per Marxer: Thanks for the intro, Navid. Let me tell you guys a bit about myself. My name is John pe. I grew up in Switzerland. I am living in Taiwan for about 20 years, so quite a while, and I know Navid for about 13 years and we've been working very closely ever since. We've been building high converting websites and funnels, landing pages.

Um, for, for many clients, uh, uh, around the world. And, uh, we also been working closely with automations and, uh. Of course these days also with AI and AI automations to simplify processes for clients. Today we're gonna cover how to build a personal website with AI in five simple steps. The tool we're gonna use for that is Bolt.

Before we jump into Bolt, let's quickly, uh, review what we're gonna cover in the video. So first of all, we're gonna have a, a good starting prompt, which I'm gonna introduce, uh, to you guys in a second. Then I am going to show you how you can edit the sites. Uh, once the AI has built the initial version, we're gonna go on to the visual editor to make some edits.

I show you how to make some edits through the code. Simple text edits, for example, or a link edit, um, directly in there. Then we are gonna run a secondary prompt to animate the sites to make it a bit more visual and engaging. Then we will be also deploying the site, uh, with one click. So, and then you can connect your own personal domain to it.

So let's take a look at the starting AI prompt, which I've prepared here. So we're gonna. Use a good personal website, uh, which we like in terms of structure, uh, which is in this case, Ali Abdal. Of course, you can replace this and please keep in mind this is a starting prompt, which you can alter and edit to your needs.

Also, feel free to use tools like ChatGPT, Grok or any other preferred AI to basically make some tweaks to this, but this has, uh, produced pretty good results to, to build a nice one page, uh, personal branded website. So I added here a little bit about myself, my name. I gave a little bit of information what can be used in the help sections, which I'm gonna talk, uh, cover a little bit further down again.

And also for the about section. Of course, you can add additional information in here if you want to. Then, uh, uh, I gave it instruction. How the structure should look like. So of course it has a base information already from the AL website, but I wanted to clarify certain things, a bit more detail, keep in mind as more detailed you are with what you're looking as better is the outcome.

So we're gonna define here, okay, we want a menu bar with a logo, with menu items, and we wanna have a CTA button as well. We wanna have a hero section with the headlines of line with CTA buttons and image on the right hand side. We also like you to add some cool, uh, background animations, use, uh, a subtle feed and animated background elements floating around now, not everything, and I wanna make that clear already.

Uh, not everything will be respected, but we trying to be as detailed as possible. We gave it also a little bit of information about additional content. We wanna be in that head heading section. Then we, uh, have a how I can help section. So we have four boxes there. We wanna use a, uh, a, a, a placeholder link so that you can basically just link that after.

We also wanna add some cool box animations. When the boxes are hovered, we have an about section, again, with an image, with some details. We wanna add a. Popular video section. This could be obviously used for anything else, but we wanna basically have here a slider with five videos in a box style. Again, we're using custom uh, uh, demo link there.

Then we have a popular resources section, and then we have a footer section. Again, this could be changed to your liking, but this, uh, gives you a pretty good results to a starting point. So what we're doing here is we're getting add, uh, a few colors in. So in this case, I added some of our big moves, branding colors.

So you can just color pick. If you have an existing website, you wanna base that on, uh, you can do that. Otherwise you can, uh, of course go to any. Tool that can prob can provide you a color scheme, or you can of course also just give, uh, direction. So instead of a, a hex code, you could say, okay, main background color is yellow.

You know, the primary color, uh uh, and sorry, the main background color is a dark, or is black or is a dark blue. The primary color is, uh, for example, a green and the blue. And so forth. So further down here, that's what I did. Instead of giving specific hex codes, I just told it to, to add some additional colors with different tones of blue and green, maybe purple, yellow, orange, et cetera.

So this is just to give it a bit of context. Then we have a color, uh, the CTA color, which is, uh, the main primary, uh, colors. I want the primary colors to use for that CTA and, but I want also. That additional colors are added further down, we have some additional instructions for the website. Um, we want it to be a personal brand and not a standard business website.

Um, we want it to be a dark mode, uh, not a light mode by default, but we want it to have a light mode as well. And we would like it to have a light mode switcher so it can be switched between the two. Then, uh, we wanna have the sections, not these more traditional sections where you have the, the straight lines that divides each of the sections, but it should be more of a smooth transitioning and use a fade gradient between of these sections, uh, to make it a bit more modern and, uh, look, uh, a modern feel and look.

So what I'm gonna do now is I'm gonna copy this from here and then we're gonna head over to Bolt. Of course, if you do not have a Bolt account, you will need to open a bolt, uh, Bolt account.

So once you have set up account, you will, uh, see something like this. On the bottom right hand, left hand side, you will have your navigation similar like to other chats.

Uh, and if you have previous chats, that's where you will be seeing here some of your previous chats. And inside a mill, you have basically your bots where you will be inputting this prompt. So let me paste this prompt inside here. Uh, in my case, I can see how many tokens I have remaining. So that is, depending on your plan, you can see more or or less of these, uh, uh, tokens.

Now here we have two options. Just paste in the prompt and straight into build. Are we going into the planning mode? Now, the difference is when you go into the planning mode, basically the AI will think about what to do and it will give you a list of items he's planning to do. Now, what we're gonna do in this initial, um.

Uh, starting point, we're gonna just start into building. So let's put ahead and, uh, click the build button. So now you can see it's opening the actual editing experience. Now this process can take, depending on the complexity of the instructions. One minute, two minutes, couple minutes. It really depends on how complex it is.

Um, so in the meantime, while this is starting to build out, we're gonna look, uh, a little bit into a few things here on the UI part so that we can, uh, already get a bit familiar what is happening here. So on the left hand side, you have to chat again. This is also where you give further instructions. Here you can see basically the steps it is taking, what it is currently doing.

So you can also, uh, click this and so you can basically see the details about what is going on. Then on the top left hand side, you have, uh, you can create different teams, which is, uh, probably not that important, but here we can see the reason projects, for example. So, um, you can access these and switch between them.

You can have a version, see a version, history, you can look at that a little bit further later. You can rename the project. If you don't like it, you can duplicate it and you can export it. Also, open it in stack plates, which is basically just not an interface to see your, your, your, your projects, and then you have the visibility also if it's public, secret, private, and so forth.

Then on the right hand side we have here the I, which is preview. This is where the actual, uh, website will show up. Then we have the code, and this is basically where, where the whole code structure is gonna be added. Then we have the database. And in this case, because it's a small personal website, we don't need to have a database.

But let's say you're building a tool that requires a database. Um, if you have an opt-in, for example, and uh, you wanna just collect the opt-ins in a database here, you wanna be able to export it. And not directly connected to an external tool. Then you could, for example, create a, it would create a database, or if you have more advanced tools with logins where you need to have an AU authentication in order for accessing the tool, then you would also start creating a database and um, so that's basically what the base is.

We can also quickly take a look at the project settings. Here again, you can see the general settings, the name of it. You can see here also what AI model is using in this case we're using at the moment. Uh, Claude agent, uh, there will be Codex coming from ChatGPT later on. And then also there is a v1 Legacy, which was the, the previous version of them, which I would not recommend to you use, uh, at the moment.

So later on, um, once we have the site published, we can also connect the domain. Um, there will be basically analytics and further, uh, information down here. But for now, I, let's, uh, quickly head over into the tool itself again, because it actually completed some steps. So what we can see now, it started perfect.

I created a beautiful personal branding website for you based on the Ali Abdaal structure, and here's what I built. So it gives you a little bit of a breakdown what it has built, and you can see it, it starts appearing now and it gives you just really a breakdown about, uh, what it actually has, has done, you know?

And this one is your first history item. So you can start is basically bookmark this and, and this is, if you wanna go back in history into the version histories, basically this is the first step of your version history. Any other additional change we're gonna do now with in the chat? We'll show up in this chat history and you can jump back to it.

So let's say you, you made a change you don't like, then actually you can jump back to that previous, uh, point. So let's, uh, quickly take a look what it has built here. So it created, uh, use my name here as the, uh, as the logo. Um, we have a navigation sec, uh, navigation here. So this navigation is, seems to be working.

And this link to each of the sections. We have a light mode in the dark mode. So let's see. It's actually working and please keep in mind, and I'll show you that in a second. Also, when I show you some other examples that we've built out. These are, it's not always working. All the functionality. In some cases, the light mode, dark mode switcher does not work.

But we can take a look at that in a, in, in a bit. So we have a, let's talk, uh, button up here, like requested. We have an image in the right, we have a headline, we have the sub headline, then we have these items, which are requested. We have the call to actions here with the main call to action is done in the primary color, like requested.

Then we have the How I Can Help section here. We have, uh, these different boxes. They're nicely animated with different colors already. Then, uh, we have the, my Story section. Uh, what I do notice, for example now, uh. On these titles, the emojis are kind of, or, or the icons that are missing, which we have requested.

So we need to see, we can refresh this quickly and see if they actually show up now. That could be, uh, happening. Okay. Let's see what's going on. Okay. My internet maybe for a sec. All right, so they're not showing up, so that's maybe something we wanna dress softer. But here we have the watch your videos, uh, the read book.

These are instructions we gave it. We have the video section with the slider, so we can click those. So we have a, uh, a few, few of these items inside. We have a watch more videos section here. Then we have the popular resources. Again, there's some animations. And then we have the, uh, footer with, uh, final call to action sections, like also requested, as well as the social icons.

They are basically all here. So overall, I respected what we requested in the initial prompt. Um, you know, but there's definitely things that can be improved, right? Uh, for example, the spacing here seems to be a little bit large between the sections, so we could potentially reduce that. Um, you know, of course, uh, the image is probably not what, what we want to use here.

So we could obviously replace that image with something else. And, um, obviously we will need to, to start linking certain things out to, to the areas. So, uh, some of these, like these boxes, if you look at the bottom left hand side here, we can see that it added the, my link demo, uh, uh, placeholder link in, in, in some of these areas.

So we would just need to start replacing these, basically what we actually wanted to use. Okay. So let's quickly go back here. So let's go into step two here and in the step two. Now what we're gonna do is we're gonna talk a bit about using the visual editor. Okay? And it's not a visual editor, like some of you might, uh, have experience with like Elementor, et cetera, but this is more of a visual editor where you actually, um, chat with.

So what you're gonna do is you're gonna click on this select. And let's say we wanted to, let's take a look here. So we have here a relatively large, large, large spacing. So what I, what we could do here is we can select this and I would say, um, instead, let's change the hero section from full browser height to a.

Of, of a petting like section, like the other sections, like the other sections have. So let's, let's, let's try this. So, at the moment, uh, if, if you look at this. It, it's basically resize it, it's using the entire height, right? Um, so what we don't, we, we don't necessarily want that. So we want maybe just have a little bit of a petting here and then we want it to start, and then right away see the next section here.

So what, what we're gonna do is we're gonna, uh, select here, give this information, and then we're gonna basically like enter, so the AI is now thinking what it should do. And again, each of these requests can take, you know, from a couple seconds up to, uh, more time, you know, a minute to, it really depends on the request, uh, on the complexity of it.

It will a little bit, take more time. Um, but in the meantime, again, it gives you the, the, the Olympic context, what it is actually doing. But in the meantime, we can already think about what else do we want? So, so one of the things we, we, we saw here is, okay, we, it seems like we can't see these icons, right?

So what we can already think about is how are we gonna phrase that, um, next. So we're gonna, for example, we can start already preparing that and saying, um, the icons on the pre. Title are missing. Please add for all, all pre titles and icon. So as you can see now, it, it did actually re reduce the padding here.

To like request it and it's not the full browser height anymore. Now of course, if you'd like that the way it was, you didn't have to change this, but it will allow you with a simple command to change that. So let's run this next command. And you don't necessarily need to always select, you can just give it also a uh, information.

Now what we are gonna do with this one here, we're gonna actually click the plan button and we'll see what it does. So we're gonna plan first, and in the planning phase, it's not actually doing anything. It actually analyzes my request and then is gonna give me, uh, a plan. Then I can agree to the plan or say, no, I don't want to implement the plan.

So let's take a look, uh, what it does. So it's gonna go. It takes a bunch of actions, you know, get current working directory list of files. So he analyzes basically the code and so it has an understanding of everything. And so you can see perfect. I can see now the structure found several components, um, with retile batches elements.

Some i, some have icons, but I need to check all of them. Let me analyze. So it actually analyzes all these and great news, all the pretrials already have icons. However, let me verify if there is any other sections that I've missed, blah, blah, blah. All pre-typed fill sections. Let's see what it says here.

Questions? Are you seeing the website without icons? This could be rendering issue with the missing code. So he actually asks me now questions on this. So what I can do now is I just type in, uh. Yes, the icons are not visible.

Then number two, would you like me to suggest different, better icons, or I like you to add proper colors to the icons so they become visible. So we're gonna try that. And then number three, are there specific pret titles you're referring to? No. All, uh, of them. So what we're gonna do is basically, um, reply to the questions.

We're gonna stay in the planning mode,

and then we run this. So again, it's gonna analyze and check, uh, my answers, and then based on that, uh, it will say, okay, thanks for the clarification. I understand the issues to see the, the icon exists but are not visible because they need the proper, uh, uh, colors. So let's see what it does. So it basically does a suggestion now what to do so you can, uh, of course.

Read through all these suggestions. Uh, we will accept these now and then we click the implement button. So perfect, you can start implementing this plan. So that's, uh, what it does now. So it's starting to implement this plan, and, uh, while it does do that, uh, we already gonna start looking what other things, what we could, uh, change or improve.

So I think one of the, the things I'd like to show you next is how to replace, uh, an image and, uh, that will then apply to all the images and then we'll also, uh, change a link. And then next we can also change maybe, uh, a text for that matter. So now you can see it executes. The plan on the left hand side here with the steps update, so you can see exactly, see step by step what it is, uh, is, is doing.

And at the end it will actually publish or not publish. It will, uh, um, populate these, these changes and reload the page. And then we should hopefully see those changes being reflected. What we also can do quickly is see on the light mode if we can see these icons, but we can also not see it in the light mode.

So it's not a dark mode issue per se. But, uh, uh, a general issue that, uh, the icons are not visible. So hopefully, uh, this will make the icons visible. This change. In the meantime, uh, let's go quickly to pixels. So what we're gonna do here is I'll take a random of these photos, you. Upload a photo. You can take any, uh, photo you want.

But for this, uh, demonstration purposes, I'm just gonna copy the link address from here and then we'll heading back over here. So the plan has been completed, and you can see now these, these icons are in fact visible now with different colors. So it did the job on the dart mode. And as well as on the light motor zone.

So let's have better back here. So next what we're gonna do is we're gonna go again into the select we are selecting the the top image and say, please replace, raise this image with the following one. Lemme just paste that link in. As I said, this could be also where you drag an image in, so you can upload images here.

Um, here. You can upload files, attach files, and basically based on that, it will then, uh, uh, use that image instead of the, the image. I just paste that in here. So let's, uh, run this quickly and then next what we're gonna do is. We're gonna quickly take a look here. So these are both not linked at all. So what we're gonna do here is we're gonna pick one of these and then we will be asking to add a link to that.

So let's say we wanna link this to google.com. So what we're gonna do now in a second, once this change has been applied, we'll be selecting this button and uh, we'll ask it to send it to google.com.

We'll see. Is happening. And what you also can see, while this is working, every time it finishes one of these requests, it basically adds a new version history. And if you are happy with a version, so what you can do is you can first of all, rename it, and second of all, you can also bookmark it. So in case, uh, later on it makes changes that you don't like, you can always easily find that one, uh, that is bookmarked.

Okay, so we can see the image has been updated, uh, as requested. So next we're gonna click again on select, we come click this button and say, please add a link to this button. And then we use HTTPS uh, google.com. Open in a new tab. So if you ask it also to open in a new tab, you should actually do that as well.

So we are gonna, uh, send that request in the chat and, uh, so we can see. Next. What we are gonna look is we're gonna go after this request, we're gonna go head over to step number three, where we can also do some of these changes, um, right away into, in, in the code, right? So any, anything I've requested now.

So if you wanna change the title here to something else, you click on it and you request, please change. Update the text to. Um, how, how I can, uh, support you, you know, uh, whatever you wanted to, to write. So that's how you can, uh, with this select, this visual editing feature. You can do that. And let's go away here.

So now we can see, this is linked to google.com, so any of these links. It can be basically treated like that now. So any of these existing links also, please update this link to whatever you wanted to link. If you wanted to link it on this, uh, in the same tab you can do so. If you wanted to open it in a new tab, you can request that as well.

As I mentioned before, step number three, we're gonna quickly go into the co, uh, code and we'll see how you can, for example, swap out a title. So let's say we wanna change this, my story, um, about, this is my story, let's say. So what we're gonna do is we're gonna copy this text and we heading into the code tab.

You have here a search, and if I search for my story, well then it does not read that, uh, is interesting now why it's not, uh, showing that. So let's, uh, try to refresh this. Well, eh, as always, not of these tools are perfect, so sometimes you have a little hiccups and uh, then uh, sometimes a refresh helps. And, uh, sometimes it doesn't.

Normally the search should actually work. Um, but I'll show you otherwise also how else you can find it. So let's try again this, uh, same search here.

So, okay. So you can, let's try to just find story instead. Okay. My, okay. So the reason why I probably don't find it is the following. So in this case, we have. Story as a gradient and, and therefore it's wrapped differently. And then we have my also wrapped differently. So, uh, and that's the reason here why You can see here story is basically wrapped, uh, inside the text gradient and therefore it did not connect the two with each other.

So, which is why only story, it actually finds it. But, so if we wanted to change this now and say this is.

So we can actually update it right here,

and then we can just save on the top right hand side, which I forgot before. If we save it and then we go back, then we can see now as as this is my story. So, and this is basically how you can pretty much update any of these boxes as well, so. If you wanna not keep in mind, anything you chat with is gonna take tokens from you.

You know, uh, mostly these small requests do not eat much tokens, but it will take some tokens away from your account. Now if you have an idea about certain of this information, let's say you wanna change this text, um, then you can really just go into the code itself. You'll find it and then you can actually, um.

What I like to do is also press. I'm on a, on a Mac command F um, or control, uh, uh, f it should be, uh, for, for, uh, windows. And then you basically can find it also here. Then you can actually within text of, uh, uh, within the code itself here, you can see right away. So let's just say we wanted to change this to, um, let's just say we wanna change this to.

50 k and, and you can see also, we can maybe say even, uh, Instagram followers instead. So we're gonna save that again. Go back here. And then it says 50 K Instagram followers. So this is how you can, um, basically. Change manually. Also, anything relatively easy. I'll show you one more thing here, and that is actually the files most.

Of the files you can ignore. You know, if you obviously have a little bit experience, you can take a look. Um, but the main files, which are really relevant for you, uh, for this page is inside the components Here. You can see there is an about one, there's a footer one, there's a hero one. There's a How I help navigation resources, videos.

So of course, if you wanted to now make a change that is related to the hero section, right? Then you will go into the hero file and then you can find the code if you read the things here. So, founder of Sales Elevation, Creator of Beecoding all coaches and so forth. You know, so any of these texts can be now tweaked.

Important is just that you do not mess with the actual code. Don't remove any of the syntax, don't, don't remove any of these code elements because that could break the site now. Because you are, you're doing this manually, you're not really getting a restoration point. But, uh, always, obviously if you, if you make a change here and the site breaks, you can just go to the previous back, you know, so it might make sense also, uh, if you do a lot of manual changes that you from time to time do a, an in-between step.

With the actual jet and therefore basically gives you a new restoration point, you know, so that you don't, um, lose too much if for whatever reason you make a mistake and decide actually breaks. So that's probably another good tip here to, to, uh, avoid. Um, some, some issues if you're not as experienced with the code.

The other, uh, option obviously is always if you break something, you can take this whole content. Uh, just copy it, go into ChatGPT and say that. Code is broken, please fix it for me, and it will actually fix it. And then you just copy the whole thing back inside here and then save it again. And that also should address then that issue, um, in, in most cases.

All right, so let's go ahead over back here. So let's, uh, quickly take a look at the, uh, step number four. And this is just a prompt, which, uh, we have here that makes the site a bit nicer. So if we refresh here, so let's, let's go to refresh the page. And

this, uh, might be small loading. So if we. See here what's happening? The, the everything just loaded, right? So we'll just come in here. There's no, no animation, no nothing happening between the sections. You know, yes, there is small animations when I hover elements, but there's not really any other animations going on.

So what we have here is a prompt that you can use do make some of these things a bit nicer. So we're just gonna paste that in and we're gonna run it. And what this will do is it will actually animate. The, the different sections, you know, so make the side feel buttery, smooth, and ultra polished on a page load.

Have the hero, plant and softly fit in. Rise with a gentle scale up. Each elements slightly delayed. For a smooth start entrance. Apply. Scroll, scroll, uh, trigger animations for each section with subtle fade up and slide motions using slow easing curves. So what this is basically meaning is. First of all, when we slow the site, uh, the heading section should, uh, fade in.

And then also when we start scrolling, the elements that come into the view port should be slightly animated to, to give it just a little bit of an additional touch. And of course, this can be tweaked. You can use this, you can ask even ChatGPT or any of these other tools to give you another, uh, animations if you say, okay, I wanna.

Animated to, to come from the, uh, the two, from the right to the left or from from bottom to up. Uh, you could obviously add, uh, your own twist to it and, uh, or even ask Bolt to suggest, use something on how you can make this better, which is actually also a good way to, to communicate. So sometimes it's nice and say.

Hey, I, I would like to really optimize the site a bit further. Um, can you make any suggestions how we can make it better? And you could go into the planning mode while doing that, and it will give you actively suggestions how, what you could do improve the site, um, further, you know, so let's see. It, it's going through, reading the files, taking some actions, and, uh, shortly it should, uh, complete this.

So it gives us a little bit about. A breakdown what it actually has done. And, uh, it's loading the page up now. So let's take a look what it actually does and what it looks like. All right. So you can see, um, the things are now a little bit animated, not a static anymore, when it seems like it has not been applied, uh, potentially in all of the sections.

I was just gonna did on, on the top section. It did actually also here. Oh yeah. And it does also on these ones. So now after refreshing, it seems like it has applied it also that, and this could be fine tuned and tweaked, um, even further. Okay. So we're gonna head over to, obviously. There, there's a lot that you can do, but, uh, this gives you a good starting point on what can be done and, and how, how, how, you know, ideas on, on, on what you could do.

So here now it's launch time. Let's the page. So what we're gonna do, we're heading over to the right end side and all we do is basically publish the app. So again, this is gonna take, uh, a little bit of time. What it is gonna do is gonna publish and it's gonna give us a URL. To actually view the, uh, page in the meantime, while it does do, do this, uh, and it should not take very long, but in the meantime, let me show you a few other examples.

So I ran this same prompt, which you're seeing here. Maybe small, small, tweaked prompts, but, uh, very, very similar. So every time you can see, uh, it creates different results. It's not like when you run the same pro prompt over and over again, it is gonna look always the exact same way, right? So in this case, we basically have, uh, uh, a site that looks like this, that has little bit gradients, uh, backgrounds, like these fate, uh, effects.

Um, it has d sections with like the different colors again. Uh, multiple images here. There's a slightly different slider here with different colors. And so forth. So then, uh, these ones, uh, these are a little bit previous ones. So I, we tried slightly different colors, you know, so we used, uh, here instead of, uh, the primary colors, which is the green and blue we used here more of an, uh, yellow and orangey color.

And therefore it gave us also these, uh, orangey yellowish colors. But again, we have, uh, some boxes here. The overall structure is always the same. Here we have a bit. More colors on the buttons. We have, uh, uh, some emojis here instead of regular icons. Here's a slider. Slightly different variation again with different button colors.

Here are the boxes for the resources and so forth. So, uh, let's, here is another version, uh, that it created.

And then, okay, this one doesn't wanna load right now. Maybe scratch this one. And here's another version without an image, uh, with a previous prompt where we didn't add the image in with, uh, uh, some boxes. But as you can see, you know, every time it, it gives you slightly different results. And if you really not happy with the first result, maybe you start over, you maybe start from scratch again.

And, uh, if you're happy with it, you maybe continue using, um, that. So for some reason it's actually still, uh, publishing here. Normally it's not taking that long. Okay? Uh, here it actually is. So we have the personal brand. So if you click now this link, it will go actually to the site. So you can see here now the site is being published, so you could share this link now.

Uh, I could share this link now with you guys, uh, or with anyone else. Now if we wanted to, uh, connect this link though with a personal site, we again can come to the publish here and we can say, buy a domain or add a domain on your own. So if we do that, it will actually open that up here and it will ask for a domain.

So let's just say we own, for example, this main, Beecoding.com.

So it would actually, your primary domain has been added, but it's not yet functional. So basically it, I added this domain now, but what I need to do is I need to follow the instruction. So first of all, you have here a link, uh, to a good. Instruction so you can purchase a domain, blah, blah, blah. And if you follow these instructions, you can basically connect your own domain to it.

So you can also follow this, resolve the DNS issues. You can see it gives you all instructions. You need to know where you can copy these and add them into your domain registrar basically to point this domain to here. And then you would actually use Beecoding.com. For, for this one. So that's basically, um, how you can build a personal website and connect it to a domain.

Now, I wanted to give you one more thing and show you one more, um, example, what you can build, because having this personal website is, is a nice start. If you don't have one, if you don't use WordPress, um, of course builders like Elementor or Framer. Go High Level are much more powerful in that sense you have.

Um, but this is giving you a fast way to build something nice and you could even just build a concept. So we know a lot of our clients, um, use now tools like this to just build a concept, uh, you know, to basically gives you a way to express. Your creativity or to build your, your and, and see, okay, what, what is possible?

You know, you could play around and then before you even work with maybe someone, before you even wanna hire someone, you could basically see, okay, what, what do I like? You know? Um, of course you can always go to other sites, but maybe you can take another side. Build a prompt with your, with your structure you'd like to have with the elements you like to have with the colors you like to have, and see how that looks like, you know, on a, on a side like this.

And then you can then go and say, Hey, can you build me something very close to this? This might help you to. Work faster with someone and potentially even get a better price right out of this. Um, and but where really the power also lies of these AI tools, like Bolt, Lovable, etc, is building apps, you know, building full fledged apps.

And I just wanted to quickly show you, uh, an app I built because I needed to study for a driver's license. I've been driving for 30 years almost, but, um, I, I still had to redo my license here in Taiwan and, um, because I'm also from Liechtenstein and they, they don't have a co-operation, so I, the, long story short, I needed to make a, a local license and I didn't like to study with their PDFs.

It was not efficient. So what I did is I created a tool where I can basically have true and false or multiple choice questions in this format, pasted in here. What it did then create me a card library, uh, with all the questions. So I have the questions, the answers, everything inside here, and then I could create my own study session.

So I could basically here, select now a bunch of different, uh, questions and I can say, create a study session for me. Okay. So let's just create one as an example here. It creates these study sessions for me and I actually can see, okay, answer them and I could, if I wanted to while I work, I can reveal it if it's correct or not, or I just go through it.

Um, so let's just finish this quickly. Um, it's just three questions anyways, so let's select that and then I hit complete session. He will then tell me. How many questions I got, right? How many questions I got wrong, you know, I can see exactly what I done. I can restart or study only the wrong questions. Um, I can see a breakdown of previous sessions I have done and I can see, okay, let's see here.

85, correct. You know, I can see then. Okay, I got 85. Overall score, 30, uh, four questions I got correct. Six, one, I got wrong. I used 23 minutes to actually answer them. I can see. Correct ones, the wrong ones. I can study them. Um, and I, I, I built some, some cool features in where I can even bookmark them. Filter them and so forth.

Like this is the power of where you can build things. You have kids, you want to build a study app for your kids, uh, for a certain thing. Yeah, you can build it now, relatively easy. Now, this took me a bit of time, but I added tons of features, but you can build very simple versions of this. Relatively fast.

And that is the beauty of these tools. And it's very, very exciting because you can, even if you have an idea in your head, you can try it out. Uh, you can create a prototype, an MVP, and then once you have the MVP, you could basically send this to someone and say, Hey, I wanna build this. What does it cost?

You know, actually build, the cool thing is also you can connect this to external sources, super base, GitHub and so forth. So the code, what you've started building here can be used actually outside of this tool. So it's not just tied into this tool. And I think that is. What this makes it really, really, really exciting, along with the options that you can build, uh, a prototype of a, of a site.

You want to build an idea, maybe you have an idea for a calculator, you have an idea of a, of a directory and all this stuff you can start playing around with and trying to bring your vision, life, and then give it to other people. For me, I have so many ideas in my head. To be able to get this more easily out and fast route in is, is very, very exciting to me.

And, and, and very fascinating. Well, uh, let's go back here, um, quickly and, uh, we deployed it. Um, I wanna just give you a, a a little bit of, of a closing remarks here on this session, which is be patient, you know, these tools are. Not perfect. They're really, they're not, but they are pretty amazing. And be very specific if you have a little bit an idea about CSS or you know, how to inspect codes.

So for, for example, for me, and I'll just show you that quickly, is I, I like to sometimes make a right click and inspect and just by inspecting I can understand sometimes a little bit. Some of the classes that's been used, I can some, so, so some get some ideas and, and therefore I can give better instructions, you know, so if I select here, I can see for example, what kind of spacings it's used, and maybe I can specifically say, Hey, change this to another spacing level and so forth.

And so it's, anyways, be specific. Be patient. It does sometimes run in a hamster wheel. Um, don't give up. You know, just don't give up. Um, use also Claude, uh, use ChatGPT. Use Grok, to help you, um, uh, on top of this, you know, ask you some questions, um, maybe share the link, publish it, and share the link and say, Hey, you wanna change this If.

Bolt maybe is, is stuck because it can't happen that it gets stuck, you know? And, uh, the other, uh, little tip I would say, uh, two more little tips is sometimes it's also good to duplicate the project, to just have a, it, it, when you do that, it kind of erases the chat history and, and it can kind of start fresh in that sense, but you have the starting point of the project.

And the other cool tip, sometimes if you wanna just ask a question. Just right, just answer. So you, you, you, you, you asking for example, um, you know, what do you think about changing, removing all these pre-Title, you know, and then what do you think about removing the pre-title? Um, just answer. So we don't want it to do anything, but we want it just to answer it and gimme, letting me know what, what it thinks, you know?

And, and this is basically then a way how you could also get it to exactly do that, you know, because you are not in planning mode. But you don't want it to do actually something you just, I think removing the pretrials is the small batches, icons, uh, blah, blah, blah. And it, it, it just gives you, uh, a little bit of, of feedback on, on what it thinks.

And of course, you could do the same with, with other tools, uh, like Bolt. So just wanna bring those. Little closing remarks. You know, again, be patient, be very clear, and just have fun enjoying, experimenting with the tool. All right guys. I hope, uh, you enjoyed this session. I wish you a great day and, uh, until the next one.

Navid Moazzez: Thanks so much for this awesome demo GP. This was really, really valuable and I'm sure if you're watching this session, you can go out there and build a stunning personal website with AI pretty quickly using Bolt. Be sure to leave your biggest takeaways if you are inside the AI Creator OS program and community.

You can leave your takeaways there if you want to hear more about this, learning about different AI website builders and coding tools, do let me know because there's quite a few, especially when it comes to building websites using AI. There's, Framer... it has been around for quite a while. Beehiiv. They have integrated AI into their website, builder too and the newsletter platform.

And Elementor, which we use for our summit website and Creator School also got AI. So you can experiment with these different tools. We wanted to demonstrate Bolt in this session because it's quite versatile. You can do more than just websites. Actually, it's probably even more useful if you're building apps and tools and stuff like that.

So with that being said, hopefully you enjoyed this session and I'll talk to you guys in the next one. Ciao for now. Bye.