Claude Code - Idiots guide.

So, this video is for those who have been interested in Claude Code or any other sort of AI coding tool and want to make stuff, but they don't exactly know where to start. You're a complete beginner. You have no clue. You just

beginner. You have no clue. You just

don't know where to start or what to do.

The first thing we're going to do is download the Claude app. I've downloaded

the Claude app here. I've installed it.

I've got it ready to go. You will also need to sign up for a subscription primarily because the sort of standard and free plans usually don't give you enough uh sort of tokens. is basically

to make stuff like you sort of will run out. I'm on the max plan which is $100 a

out. I'm on the max plan which is $100 a month, $200 a month, something like that. I don't recommend going straight

that. I don't recommend going straight to that sort of plan. First, start with one of the smaller plans, but like I said, you will need to upgrade to a plan. When you open up the app, you see

plan. When you open up the app, you see the chat, co-work, and code at the top.

We're actually just going to go straight to the code. So, a lot of people have been using the terminal. I would

actually recommend not using the terminal. I would recommend starting

terminal. I would recommend starting with this because the way Claude have designed this is that they've just made it easy for anyone to get started without having to look at the terminal

which I think can actually be quite daunting for most people who've never made anything with code before. Another

important thing is you do not have to know any code. I barely know any code myself. I've been making all sorts of

myself. I've been making all sorts of stuff just messing around with stuff. Uh

yeah, you do not need to learn code. We

will not be touching any code or anything like that. We will just be prompting and making a website and then maybe even making some adjustments, adding a few things here and there. So,

the first thing you're going to want to do is you're going to want to select a folder. Choose folder. You can choose

folder. Choose folder. You can choose anywhere on your Mac. I have made a claude code folder here. Then I'm just going to make another folder. Call it

YouTube test. Something like that. And

then open. Everything that we do will now be in this folder. when you put in any prompts, it will ask you permissions before you make any changes. Now, I have auto accept edits on all the time. I

don't actually have ask permissions on, but I do think if you're a bit wary, try using ask permissions because we're isolating claude code in that folder.

All of the edits will be isolated in that folder as well. I'm just going to do auto accept edits. And then this is where we prompt. So, a big mistake a lot of people think is that you need to be some sort of expert prompter. you need

to come up with all this complex language or whatever just to make something. You really do not need to do

something. You really do not need to do that. You can just talk to it like you

that. You can just talk to it like you would talk to a normal person. Maybe

you're talking to a developer or a designer who works for you and or you've hired and you're trying to explain to them what you want. That is what claw code basically is going to be. It's

going to be like your designer, your developer that's going to make stuff for you and you're just going to explain it in plain text. Let's first start with a personal website. So, let's go with make

personal website. So, let's go with make me a personal website that's minimal,

has an avatar, a name, a bio, uh links to some projects, and a contact form. This is super basic. I think

form. This is super basic. I think

something like this is actually a good way to start. So, before we make anything else, let's just press enter and just go with it. Let's see what it puts together for us. It does show you what Claude code is doing, how it's sort

of figuring things out. And you can see that we have an empty directory here, and it's going to create a personal website using HTML and CSS. HTML and CSS are just super basic formatting. It's

sort of just how websites work. Um, we

can get a bit more complicated than that, but just imagine HTML and CSS is the two files that you need to see a website. HTML is all of the text, all of

website. HTML is all of the text, all of the elements that you see, and CSS is the styling for all of the text and all the elements on the website. So, we're

just going to go let it do its thing.

Okay, great. We now have our minimal website made. We can click preview here,

website made. We can click preview here, and we can actually see the website in here. So, I'm actually going to make

here. So, I'm actually going to make this full screen, and it should preview our website for us. Let's do always allow for this session. And what it's doing now is, as you can see, it's

actually making a HTTP server. whatever.

You don't actually really need to know this. Um, just allow. Here is our

this. Um, just allow. Here is our website. Straight away, it's super

website. Straight away, it's super clean, super minimal, and it works. We

can see we have an avatar, a name, a description, some projects, and a contact form. And it's working

contact form. And it's working fantastically, which is crazy because making something like this, if you had to code it from scratch, you know, it can take a little while to do yourself.

It'll take you maybe an hour, couple of hours to make. Here, we've done it in what, less than like 8 minutes. So,

let's just say less than 10 minutes it's taken me to make this, which is just crazy. Now, we can start making some

crazy. Now, we can start making some more interesting changes. So, let's just say right now this website has a light theme, right? Let's just say we want to

theme, right? Let's just say we want to make it a dark theme. So, let's ask it to add a dark mode. Can you please add a

dark mode and also add a toggle for it in the top right of the website. The

great thing here we can see is that Claude is actually checking the website before it even gives us the sort of finished product, which is just wild to

me. Like an AI is figuring out whether

me. Like an AI is figuring out whether it looks good or not in light and dark mode. So now we've got it working. So we

mode. So now we've got it working. So we

can see it's currently in dark mode. If

I toggle the dark mode and light mode toggle like amazing, it works straight away. And what we can see here is very

away. And what we can see here is very interesting because it hasn't just inverted the colors because I think that's a big mistake a lot of people make with dark mode. They think you just

invert the colors but that is not the case. For example, with the form we can

case. For example, with the form we can see we have white fields with a light gray background. But when we go to the

gray background. But when we go to the dark mode we actually have a dark gray background with darker sort of just a a lighter shade of gray compared to the background for the inputs. So, I

actually think it does a really good job of making dark mode. I have been using this to make dark modes for so many of my websites because in the past it would have taken way too long to make dark mode. I have to go through all of the

mode. I have to go through all of the colors. I have to check all the colors,

colors. I have to check all the colors, make sure everything looks good. But

with this, literally it just does it in less than a couple minutes. It's

absolutely wild. Now that we have our basic website, the sort of standard practice is that you back up your website. It's like saving your website.

website. It's like saving your website.

If you ever played video games or anything, you've gone to like save the game basically. That's something

game basically. That's something developers do all the time when it comes to code and making a website, making anything online really. And usually the most common way is that you save your

website, your code on GitHub. So I also use GitHub to save all my stuff. And

what we can do is we can actually upload it to GitHub and have it automate the whole thing. So I can ask it for

whole thing. So I can ask it for example, upload to GitHub. Let's see

what it says actually when I say upload to GitHub because I haven't done this before in this. Okay, so it looks like it already has my GitHub account connected. I'm not going to go through

connected. I'm not going to go through the whole sort of GitHub connection process because it will actually ask you uh to sort of connect GitHub account and it'll go through all of it for you. It's

super easy. You just log in like you would. You just have to make a GitHub

would. You just have to make a GitHub account. GitHub account is free and then

account. GitHub account is free and then you connect it all. And then it's asking me now, should I make a new GitHub repository for this? A GitHub repository is basically, imagine it as a sort of

bucket or a folder for all of the project content for your project basically. Um, but we're just going to

basically. Um, but we're just going to call it YouTube test like so. Okay. Now

that it's uploaded to GitHub, I can click this link. I can open it in a browser like so. And I can see the three files that it's committed because there's only three files. the avatar,

the index html and the star CSS. So

everything is now on GitHub. And the

idea is that whenever you make any major changes to your website, you upload it to GitHub uh in a basic form. Uh we can get a bit more complex where we can make branches and stuff, but we're not going

to get into that in this video. The idea

is that we just upload everything whenever we make any major changes to GitHub. So now we want to make our

GitHub. So now we want to make our website live on the internet. We want to upload it to the server, connect a domain, whatever. so that we can share

domain, whatever. so that we can share with other people and have our own website. So, we could keep it super

website. So, we could keep it super basic and just upload the HTML CSS, but I actually like to convert it into an app so that when I upload it to GitHub,

my hosting provider can automatically pull it from GitHub. We're just going to say to Claude, can you turn this into a

Node.js app? We are definitely over

Node.js app? We are definitely over complicating this very basic website by turning it into a node.js app. But the

idea is that going forward for future projects when you're making stuff, most likely they're going to be node.js apps anyway. So I actually think it's worth

anyway. So I actually think it's worth just turning this into a node app so that you can simply upload it and it handles the whole thing. So we're just going to put that in trust workspace.

Let it do its thing. Allow. Always

allow. Okay, now it's moving sort of all our files around to make it into a Node.js app. So, our preview has gone.

Node.js app. So, our preview has gone.

Uh, we're just going to let it do its thing and then we'll be able to make another preview of our app once it's finished. There we go. It's already very

finished. There we go. It's already very quickly made the preview of our website.

It's turned it into a NodeJS app. Um,

it's still doing a few things. Just

making sure everything works. Previewing

everything. Okay, great. It's done. We

can see what it's done here. So, we have our YouTube test folder that we made.

And then we can see it's got all of the files in here, the index, HTML, CSS, and everything else. Um, moved it into a

everything else. Um, moved it into a public file. It It does all of the

public file. It It does all of the organization for you. This is what I love about this because I don't remember half of this stuff. I don't really know exactly how NodeJS apps work and stuff.

I am just as much of a beginner as most people. I just am a few extra steps

people. I just am a few extra steps ahead where I've built some stuff with it. Uh, but yeah, we've let it handle

it. Uh, but yeah, we've let it handle the whole thing. Now we're going to again upload to GitHub. Uh push to GitHub. We're going to call it like so.

GitHub. We're going to call it like so.

And then it's going to upload everything to GitHub again. Cool. It's now uploaded to GitHub. We have our latest version up

to GitHub. We have our latest version up there. One thing I actually completely

there. One thing I actually completely forgot to check was if our if our website is responsive. Um it looks like it is though. Responsive straight away.

So we don't have to worry about that. I

could try resizing the window. Yep,

looks like it's already responsive, which is great. The next step is making our website live. So, we're going to be using Hostinger. I have been a loyal

using Hostinger. I have been a loyal Hostinger user since 2012. So, what is that 14 years? I've been using Hostinger for a long time. But what I love about

Hostinger is that they have a service where you can just simply connect your GitHub where you've uploaded all that code and it will just pull the GitHub code and make the website for you and

automate the whole thing. What makes

this so interesting and what makes it so powerful is actually if we just go to it here, NodeJS web hosting. What makes

this so interesting and so powerful is that when we update our website, we make any major changes and then we upload that to GitHub. Hostinger can actually see any changes and then automatically

pull those changes and make those live for you. All automated. You do not have

for you. All automated. You do not have to do a single thing. And this blew my mind because I only discovered this a couple months ago, a month ago, and I realized, oh wow, okay, I don't need to be copying files and pasting files and

anything like that. I can just have the whole process automated. We're going to hit start with GitHub. It's then going to offer us different pricing plans and stuff they have. We're just going to

choose the standard uh 299 plan because we have NodeJS apps here. You can create up to 50 websites as well, which is crazy, like for $2.99 a month. Um, and

then you also get like mailboxes and some other stuff as well. We're going to choose the plan, complete the payment.

Cool. Continue. We're going to click on create a website. And then we can see down here, deploy your NodeJS app. Let's

select that one. Uh, I don't even know.

Let's just use temporary domain for now.

But in here, you can put your domain.

So, I could put something like aotest.com.

aotest.com.

Whatever domain you want to get, you can put in here. And look, they even have 99% off for the first year when you get a domain, which is crazy. Um, but let's just use temporary domain for now. We

can sort that out later. And here we go.

We can connect our GitHub account. So,

I'm going to connect it. Going to login.

Now that we're logged into GitHub, it's going to ask us where we want to install the hosting app basically, which will manage the whole thing. I'm going to choose Olia because that's the one where I have my repos. And then I can select

the repos that I want. So, if I don't want it to see everything, I can just select the ones that I want. So, I'm

just going to select the uh test one that I mentioned. Is it here?

Here we go. YouTube test. So, I'm just going to select that one. Install and

authorize.

Uh, select it again here. Cool. Now,

it's going to ask us for a few different things here. We'll just leave it as it

things here. We'll just leave it as it is. We can see our temporary domain. And

is. We can see our temporary domain. And

we're just going to hit deploy. Now,

it's going to take a couple minutes to deploy. Hopefully, it doesn't even take

deploy. Hopefully, it doesn't even take a couple minutes. It could be even quicker than that. There we go. We're

already completed. Boom. So, we can go to the dashboard and then we can open up our website temporary domain.

And there we are. We have our website live. It's working. The dark mode and

live. It's working. The dark mode and everything works. This is an actual

everything works. This is an actual website. And it really is as simple as

website. And it really is as simple as that. I've made a website. Well, from

that. I've made a website. Well, from

recording this video, I'm nearly at 30 minutes. The cut down version might be

minutes. The cut down version might be even less than that. But yeah, within 30 minutes I have a website up and running.

Let's do something else though. Now,

let's show you what I mean by when I update the website locally. So, this is our local version that we're working on and then having the website, the actual live website automatically update. So,

let's add a blog section. Right now,

we're not actually going to have a proper blog, but let's just add a placeholder for a blog. So, let's just

say um can you add a grid of thumbnails and titles for a blog under the projects section and let's see what Claude code

does actually because it might suggest us a few things. Our blog section is now up. We can see we just have a very basic

up. We can see we just have a very basic blog here with some colored thumbnails just for demo purposes. Claude has done all this for me by the way. Like I said, like I've not actually asked it to even

make like a grid or anything. We

actually don't have this live on the website, right? We have it on our local

website, right? We have it on our local theme here on our local development that we're making on our computer. But when I refresh the website, it's not there. So

this is when we're going to push to GitHub.

And then as it's pushing to GitHub now, as it's pushing this latest version, GitHub will be updated and then Hostinger will see the update and then we should see the update on Hostinger on

our website. This does take a minute or

our website. This does take a minute or so because obviously there's a few things happening here and it has to sort of build the website. But thankfully

because this is such a simple website, it doesn't take too long to build. Um,

we can actually see it happening. So if

we go to our dashboard and we go to we just refresh actually. Oh, we can already see it's already done. Look, we

can see where deployment completed. We

can see add blog section which is what we just did. And when I refresh the website now, we've just run into our first error, which is great actually because I think this is a great time for me to demonstrate how we can fix an

error and how I actually like to troubleshoot an error. And it's it's crazy how simple it is. So, I'm actually going to take a screenshot of this.

Gonna take a screenshot, copy it, then I'm going to paste it into Claude and I'm going to say, um, the live

website doesn't seem to match the blog design you made. Here, I have attached a screenshot

for reference. try doing a hard refresh

for reference. try doing a hard refresh on the browser. So, let's do command shiftr.

There we go. You see it's there wasn't even anything wrong with the deployment.

It's just me not refreshing the website, doing a hard refresh. But our bug, which wasn't really a bug. It was, I guess you could say, a user error, is now fixed, and our website is updated with the

blog. So, if you ever come across an

blog. So, if you ever come across an issue, if you ever have something go wrong, you can ask Claude to figure it out for you. Sometimes, like it shows here, this is just a user error where

I've just had to completely refresh the website using command shift R. Um, but

if it wasn't that, it will try and figure it out. So, yeah, that is it.

It's really as simple as that. Making

our own website live. I will have some other videos coming very soon on doing this sort of thing, but getting more and more complex. I'm still seeing where the

more complex. I'm still seeing where the limit is because it really feels like there is no limit. You can go further and further, do even crazier things and just make whatever you want. But this

video, like I said, is for people who have never used it before, who are really starting fresh and just don't know where to start. Hopefully, you can learn a thing or two from here. I will

also leave a link to my club, Digital Creator Club, where we have lots of other people doing this sort of stuff.

People sort of share feedback, want feedback, um share their experiences, share what they're working on, just a bunch of other stuff. It's a cool place.

Hopefully you guys enjoyed it.