Transcripts
1. Introduction: Welcome to the future. This is your chance
to level up to learn something that's going to significantly improve your life. And that's vibe coding. And that's because you no
longer have to be a developer with tons of years of
experience to create a website, an app, a business. We'll use a platform
called windsurf AI and the power of artificial intelligence to
help us build websites. You imagine it, you
describe it, you get it. You fine tune it, you launch it, you learn, and then
finally, you earn. It may take you a couple of tries and maybe a
couple of months, but vibe coding gives you an incredible shot to make a fantastic business
all on your own. I believe this is
the best shot for most people to create a
solid, reliable income. And I repeat without
being technical, without knowing how to code, this is the future. In this course, we're going to create a website
from scratch. We're going to launch it
on our own domain step by step with the help of AI. This is not gonna be super easy. It's gonna be
frustrating at times, and that's because we're early. But being early is where
our main advantage is. Imagine having
invested into Apple 20 years ago or buying Bitcoin when it
first got launched. Sure, there's gonna be uncertainty at the
beginning, right? Issues, all sorts of problems, but don't wait until
it gets mainstream. This is your Shop. And in this course, I'm going to explain everything
that you need to know. You just started and launch at first website in no time at all. I'm going to teach you in
plain English what AI, LLMs, MCPs, and
all of that mean. I'm a designer, and if you've ever watched
my design courses, you know that I focus on getting results fast without
boring theory. I won't fill your head with complicated terms and concepts. No, again, I'm not a developer, and that's a huge advantage. Instead, I focus on
examples and fun exercises. Invest in your future. This is one of the best things that you can learn right now. To secure your future and
have a fantastic income. Get started today. Don't wait. This is your shot.
2. What’s Windsurf and vibe coding: Welcome back. In this quote, we're going to use
windsurf to vibe code, but what's windsurf and
what's vibe coding, right? So first of all, windsurf
is a platform that helps you build software
with the power of AI, and that's without
knowing how to code. It was just bought by Open AI, the people behind Chat
GPT for $3 billion. Yep, that's a B billion. It's 15 bucks per month, and what you get in return
is a complete game changer. With Winserf, you are working side by side with
artificial intelligence. That understands your project, follows your
instructions, and builds your app for you,
almost like magic. You write what you want.
That's called the prompt. Maybe you describe
what the apps you do. And then the AI takes over and does most of
the heavy lifting. So, in short, what can
Windserf actually build? Well, we can make mobile apps, both for IOS and Android, just like the apps
you can get in the app store or on Google Play. You can create anything
from a fitness tracker to a chat app to even a
professional finance tool. Whatever you can think
of, you can build. Of course, you can make websites like we're going to
do in this course, like presentation
websites, portfolios, personal blogs, the works. It can handle landing
pages for products, for startups, for the
events, whatever. It's all fast, all responsive, all clean. There's no downside. Of course, you can
build SAS products. That means software
as a service. And windsurf can
help you build that. It can help you with the
front end, with the back end, with the database, everything, so you don't have
to know that stuff. Just tell it what it should do, and it's going to figure out the complicated stuff.
And one last thing. You can build plugins
and various tools. You can build chrome extensions. You can make discord bots. You can make internal tools
for your team or company. Hell, you can even make
web press plugins. If it lives in a browser
or it runs on a computer, there's a very good chance
that Winserf can build that. Now, here's the big idea. Winserf connects
directly to some of the smartest AI
models in the world. So that means it knows
how to write Python, Javascript, react, next
JS, node, whatever. It's like having
a senior team of developers on staff 247
with infinite patience, ready to code whatever
you want on the spot. You tell it what you want,
and then it starts coding. You review the results, you give feedback, and
it improves instantly. This is, again, without
you knowing how to code without all of those things that I
previously mentioned. So that's the essential part. So imagine this. You've got an idea for the product,
right, for the plug in, an app, a tool that solves a problem that maybe
you've had for years. Now, normally, you would
need months of development. You would need a team, right, a budget, endless meetings. And the thing is, that's no longer
needed with Windsor. You just describe the idea, and in a few minutes,
you've got something real, something functional,
something that you can test, improve, and then maybe finally
launch after some work. So that's vibe coding. So vibe coding is you telling the program what you want
done in plain simple English, and then the platform
executes it. That's what makes
windsurf so powerful. It doesn't help you write code. No, it helps you build products. It solves problems, and
it helps you move from idea to execution faster
than ever before. Please download the attachment and sign up for the windsurf. So go ahead and sign up, and in the next lecture, we're going to install windsurf together. Let's go for it.
3. Install Windsurf and setting your expectations: Welcome back.
Installing windsurf is quite easy because it's
just a simple program. There's nothing
special going on, but while I handle that
in the background, let me set your
expectations, right? We are early. Things
are changing rapidly. Every week or so,
maybe every two weeks, there's big news, improvements. And that's a bit
uncomfortable, right? New features are coming out, and I'm sure that this course
is going to be outdated, even though I'm going to do
my best to keep it current. Now, my goal is to teach you how to learn and how to
use these tools. I'm going to teach
you principles that won't get outdated, and that's the real
value of this course. Let's go back to
this constant change of improvements, right? Now, this is the price that you have to pay for being early. You need tons of patience. You need to let your
frustration wash away from you. And that's because I promise you you will get stuck.
I promise you that. And it's not about this course, my teaching style,
or my knowledge. No, I've had countless cases where the official guide said, click on the blue button. But there were only red ones. Or the guide said to
click on the save button, but there was no save button. It's so annoying
when that happens. I had issues where
I couldn't work anymore because of
problems with my VPN. But I don't actually use a VPN. It said I didn't have Internet, but everything was working fine. I followed every step of
every official guide, and I got stuck with
an obscure problem. I use three different computers, and I got three
different issues. Now, I could go on for ages. This is bound to happen. And my advice, use the guide from the
attachment to get help. Now, most of the time,
you will have to do a lot of searching and
fixing all on your own. I'm here to help.
You can count on me. But some issues are going to be very specific
to your computer. And you need to have
patience to solve them. So that's the downside, right, for being so
early in the game. Now, what's the advantage
of being so early? Well, you get a head
start in the race. Whether it's for the job, freelancing or building a
business, this is massive. You learn from your mistakes. You see common issues,
and you get ahead. You get ahead of everyone
else that doesn't want to go through all that
pain of being early, of things not working out.
You get ahead of them. And as I said, it's like investing into
Apple 20 years ago. Nobody knew it was going
to be such a big company, right, such a huge success. But here, I promise you,
there's nothing bigger. And it's all in your
hands. That's the thing. You can create incredible stuff. Or you could just postpone. You can wait until
things are super clear, easy for everyone. No more bugs, no more issues. And then then what? Well, you're going to have
100 times the competition, right? It's as simple as that. If you invest now into Apple
or Bitcoin or whatever, sure, you may do
well, of course. But if you were there
at the beginning, the rewards would have
been infinitely higher. So please understand why
you're going to suffer. You will have headaches
and a lot of frustration. But it's for your future. And if you can handle that, if you can continue to push on, the reward is going to be huge. That's why I really love
vibe coding so much. It's exactly the right
difficulty level, right? If it was too hard, it would just be classic coding. The classic way of studying
for four, maybe six years, studying, constantly
working, being a junior, leveling up slowly, but surely. So four to six years. So that would be the hard way. But if it were too easy, everyone would be here. Everyone would do
it. So the reward would be next to nothing. This, this level of difficulty, it's a fantastic one. It's exactly the right
level of difficulty. So back to it. You won't actually code, right? You don't need to know any programming language
of any kind. You will need to be patient, and you have to be able
to clearly explain the idea from your
mind to the computer. And that's a skill that
you're going to develop throughout this course
and through practice. But again, you won't code
and you won't read code. You're not supposed to understand
everything that's going on while windsurf is working in the background
on your project. No, one of the key principles that I want to teach
you is that you can spend all day creating
memes to share with your friends and have a
laugh or on the flip side, you can create a platform to windsurf that allows
people to create memes, and then you can make a source
of revenue out of that. So this is one of the most important
things from the course. It's all about
where your focus is and how you can come up with
ideas and execute them. I'm going to have a lecture
about that, so stay tuned. But now you have to have
windsurf installed. I set up our interface to the dark colored scheme and we're about to create
our first project. Yes, so soon we're
going to make one. Now, one final note. I'm going to simplify
a lot of stuff, so it's easy to understand
for everyone, right? But just in case you're the
coder with vast knowledge, please understand that
when you say that windsurf is a fork of VS code, that doesn't really say
much to most people. Or when you say
something like pull up your terminal and run
this quick Python script. Again, that's a bit
overwhelming for most people. I'm not going to do that. I may oversimplify stuff, but this is a course for beginners that
are not technical, so we're going to take it
easy and step by step. Okay, with that, I'm going
to see you in a second.
4. Our first website in Windsurf: Welcome back. Let's create our
first website in Windserf. Now, before we start, please watch this lecture twice. The first time around, just watch and see what's happening. Then rewind from the start
and pause to work along. You're going to need to
hit pause quite often. Please don't try to work
along on your first viewing. You won't be able to keep up. So again, please watch twice, and the second
time around, pause as often as you need to. Okay, now, all of our projects have to be
organized into folders. So let's open up our computer
and create a new folder. If you're on Windows, try to
avoid your main partition where Windows is installed because sometimes
for some people, that may create issues. Okay, call it,
whatever you want. I'm going to use wind one, but the name really
doesn't matter. Next, let's fire up windsurf and we're going to
open that folder. Nothing special so far, right? Wait for the second
until the interface is loaded up. But
yeah, that's it. We now have our first project. Attached to the course,
you're going to have this text file with a task. It's something super
simple, quite basic. This is what we paste here to
the right side in cascade. This is cascade on
the right side. Now, we are in write mode, and from this drop down, I'm going to use this model. Please use the same one, or if it's not available, you can use any of these
ones from the screen. Okay, I'm going to explain
everything in detail later on. So please let's keep going. Now, the message, the
task is the following. Create a modern portfolio
landing page for me, Chris Barron 36 from
Bucharest Romania. I have 14 years
experience in design. I'm going to Dobe
certified instructor, and I specialize in
web and app design. I prefer a red and
black colored scheme, nice animations and a portfolio section
with five categories. Use placeholder Images for now. It will be a single page
with a main menu at the top that takes you down
to that particular section. My office address is this one, and please add dummy reviews. Add a contact form for people to message me and show
my phone number. Also show my social
media profiles. Use best practices to
build this landing page. Okay, so that's the task. You should use the same one, but be aware that it's totally normal for your design to
look different than mine. That's exactly how AI works. It's not a mistake. That's how it works. Now, in case something
doesn't work at all, it just gets stuck. Don't worry about
it. Continue to the next lecture
where we're going to set everything up and then we're going to come back and
we're going to try again. So, again, if you're not
able to run this at all, continue to the next
lesson, then come back. Okay, once we hit Enter, we're off to the races. Notice this area here. This says it's running. And you can also notice this
green circle underneath. In case you want to stop it, you want to stop the AI. You can use this red button, though you won't
actually do that. Now inside this panel, you can see how
the model thinks. Some models are
quite descriptive. They explain
everything in detail. Here, this model says
it's going to make a pretty basic website using HTML and CSS plus a
bit of JavaScript. Okay. And files are popping up, starting with the index file, which is basically the homepage. You can see the files on the
left side of the screen, and you could potentially open them here front and center. But 99% of the time, you're actually going to
focus on the right side. Now, I'm going to speed
up this recording as sometimes it
might take a while, especially with certain models. Now, don't be
surprised to see that the model may make
a mistake, right? The model simply means
the AI, by the way. Now, for example, here, it tried to generate
too much code at once and it backfired.
It couldn't do it. But it realized its mistake, so it looked for the
different solution, and then it already applied it. And that's without
us intervening, without us doing stuff. So that's quite nice. Now, next, it tried
to start up Python, so we could actually
see the website. You don't need to know Python, but we do need to
have it installed. Now, you can see that this
is where we have to decide. Now, do we install Python or should we
try a different way? This is what the
AI is asking us. And I want to show
you something. Let's tell it to install
Python on its own, right? That would be awesome, right? But no, it actually won't do it. And we'll talk about that
in a separate lecture. In short, it would
make our lives easier, but that would be a
major security concern. It would not be safe. Now, going back to it, let's tell it to continue. But here's the thing. I was
too vague with my message. Continue. So it doesn't
know what to do, right? So I checked for Python. Yet again, I actually
wanted the other option. So it's my fault. Now, you always have to be precise
with your instructions. Tell it exactly what you want. Don't be short about it. But actually, that's not
going to work either. So let's install Python because it's actually
quite simple. We'll only do it once, and then the model will
handle everything. Okay, so scroll up and
click on this link. Don't worry about
the warning message. Here we are on the
official website, so it's all nice and safe. Scroll down and look for
your operating system. As you can see, this is
the recommended one. So we'll download
it and install it. Now, before we choose anything, the model did say that we need to enable one
specific feature, and that's this
second checkbox here. But it's best you
check both of them. Okay, now, please be patient and pause as often as you
need to to work along. Okay, now, let's install it, and this will only
take a minute or so. Now, sometimes this
won't work correctly, and I have a lecture
for that specific case. But yeah, here it's
done. Back to windsurf. Let's tell the model that
Python is installed, and let's tell it to continue. Immediately, I get
a command here that Winserf is not configured
to run on its own. But that's not a
problem. We'll click on this except button ourselves. And after the second, here's another one.
Click Accept again. And just like that, we
should be ready with Python, and we're good to go. Now, my Windows computer
is asking for permission, and of course, we're
going to say yes. We can now check out our
website by using this address. Let's copy it and then
paste it in any browser. But you could also use
open and External Browser. Now I'm going to use Microsoft
Edge on this computer, but you can use
whatever you want. Yeah, this is a lovely website. It's black and red because
that's what I asked for. Now, looking at it,
is it spectacular? No, of course, not, but we got it running with
just a few clicks. Notice that I have no photos because we haven't provided any. Again, the model would not
download anything on its own. But let's take it
a step further. Let's change the black
with a nice shade of blue, and maybe let's add
the map instead of simply showing
the address, right? Now, again, type that in, and it may take a while, but
I'm going to speed it up. Now, when all the
changes are done, please use the accept
all button from here. Don't use the one from the
central part of the screen. No, always focus on
the right panel and accept all the changes
once the model is done. Notice there's no green circle and there's no red
button to stop it. So that means it's stopped,
and we can accept. Okay, let's have a look and see. Yeah, this is solid. It's now blue, and
we have a map. We have something to work with, and it should be responsive. We can right click
and from this list, we can choose inspect. In this new panel, we're
looking for this icon, which is going to change
out browser to mobile mode. Yeah, this is awesome. Congratulations. Again,
it's not perfect. I know that I have
things to improve. But this is how fast you can get up and running with
windsurf in no time at all. What I want you to do is
create your own version, starting with my textFile. Create a new folder
on your computer, then go to the top menu
and use Open folder. It's as easy as that to
start a brand new project. Replace the name
in the text file, change your details,
and then create it. When you're done,
take a screenshot of the entire design and
post it so I can see it. If you can't manage to take
a screenshot, no worries. Just take a photo
with your phone. In case you're having issues
and you can't manage, use the PDF that's
attached to get help. Now, before we end,
for some people, Python won't install correctly,
and this may not work. If that's you, please
don't be disappointed. We have a lecture where
we set everything up. So if you don't have
a website right now, leave a comment so I
know what issue you're facing and then move on
to the next lecture. Okay, I'm going to
see you in a second.
5. What can you build with vibe coding in Windsurf: Welcome back. Before we
continue with windsurf, you may ask, Chris, what should I build? I get it. I know that you may not be an entrepreneur
with some the whiz, but let me help you out
with some quick ideas. Now, before that, I have to
tell you one important thing. Execution is essential. Ideas are worthless. I'm
going to say that again. It's all about the execution. It's not the quality
of the idea. I'm going to expand that then. So let's start
with this website. I lovemg.com, right? This website shrinks
your images. If you've ever worked with
Photoshop, for example, you know that sometimes
it's going to give you huge file sizes, like two, three, 5
megabytes, right? Now, with this platform, you dragon drop the
images, and that's that. You cut down their size by
80% without losing quality. And it can also help you
resize images quickly. Again, drag, drop, and
that's that, right? And you have a few
other features here. But the price it's four
to seven bucks per month. It's nothing. Even I signed
up. So that's one idea. And here's one platform that changes your PDF
to an Excel file, so your accountant has
an easier time with it. It's super niche, right? It's only for the
select group of people, but this does 38,000
bucks per month. $38,000 per month. Crazy stuff. And that's another one
that's doing very well. This renames all of your
photos, and that's it. The entire thing. That's
the entire platform. So instead of calling
them IMG 010203, it gives them a proper name, which is awesome for those
cases where you go on vacation and you have thousands of photos lying around, right? Again, this is a very
specific service. Next, let's use
this one poly.com, which helps you
post and schedule your content on all of your
social media channels. This platform has
one single person, one single guy behind it is making over $1
million per year, Australian dollars, but still, and now he's Channel se. Now, let's take a break. These are not incredible ideas. These don't come from
business geniuses, right? These are regular people
that had an idea. They had a problem, and
they fixed that problem. They executed that idea,
and they did it well. There are maybe 50
other platforms like Poly, for example. So more expensive, some cheaper. That's why I said it's
all about the execution. And my advice, focus
on the design side. Take something that's already
been done 100 times before, add a beautiful design, a small twist, and you
got yourself a business. Of course, you still
need to promote it. You need to advertise, but that's a different story. Now, let me continue with
a few other examples, something a bit higher up. So here's base cam, a seemingly complicated platform that's focused on
one thing messages. It basically allows
you to create a to do list in a very
similar way to notion. Of course, there's a lot more to these platforms, a
lot more features. But then you start off
with a simple idea, and then you expand,
you make it grow. For example, make an
app that reminds you to get up from your chair
every hour, right? That's a business.
That's a service. That's an app,
that's a platform. And that small idea may give you another
source of income, how you monetize it, how you build an audience. That's a different thing again. That's besides the scores. But I promise you
that are tons of platforms built around
a very simple idea. Here's a WordPress extension
that simply allows you to insert social media
posts into your website. Super easy, and they make a lot of money, mostly passive, right? Now I've seen paid WordPress extensions that allow you to add a bar with a custom message at the top or at the
bottom of your website. That's it. That's
the entire thing. That's the entire plug
in the entire business. So the thing is, the
sky is the limit. It's all about solving problems, problems that you know
that you care about, that you want to
solve for yourself. Still on WordPress, there's
an app that helps you insert the Google Analytics code or Facebook Ads tracking. And it's as easy as that. It's nothing too complicated. Now, a guy vibe coded a horoscope platform
live on TikTok, and it's doing very, very well. Hodoscop whatever. It doesn't make any sense. It's not for me, but
maybe it's for you. Now, another guy made
a wallpaper app, but only for the
specific type of anime. You don't have to make the
next Uber or door dash. You get to one, five,
ten K per month. You actually need to solve a problem for a small
niche of people. But let's say you don't have
any of these ideas, right? Well, we made the
portfolio website, right? Why not offer this service
to some local businesses? Find 100 of them in your
area, in your city, in your country and ask them for $1,000 or 80 bucks per month. And you've just made a
good chunk of change. There are other
platforms that offer you lists of all the dentists in
your York city or country. Now, what matters is, you find the right approach. Do you email them? Do you call them? Do you
show up at the business? Do you charge $1,000 or 800? And of course, you don't have to do that only with dentists. Think about all the
other businesses in your area that
make good money, but they have horrible websites. In my part of the world,
that's restaurants, that's lawyers, that's
service shops, it's vets. The list goes on and on. They have countless web
design agencies, of course. But yours can be different
because you can specialize in one certain area that
you may know very well. Or that you're about
to learn very well. You offer a good website already coded with little
to no maintenance. This is why it's a race because more and more people are going to start offering the
same thing, right? Because if you can do a
website in five, ten, 15, 20 minutes, of course, what's the word, right? Are you going to charge
maybe 600 bucks? The next guy is going to charge 400 and all of a
sudden from $1,000, you start offering
it for pennies. So time is of the essence. This is why I said
it pays to be early. But of course, there's
no need to panic. There's more than enough
for everyone to go around. So my advice before you create anything
that you want to sell, start with a few
small fun projects. Now, let's pause. Hopefully, you can now see there's a
world of opportunity, but you don't have to aim for
the $100,000,000 business. Just solve small problems like transforming square corners of an image into
rounded ones, right? And that maybe a funds
100 bucks per month. It sounds silly, I know, but social media is filled
with stories like this one. It's called building in Public, and it's a great
way to advertise. You constantly post
about your journey. This building in public
movement is fantastic because you can actually get
inspired by their projects, and you can also learn from their mistakes so
you can avoid them. When you see their profiles, you can see that these
are just regular people. So that's how you can
get some inspiration. The guy that coded
ply.com documented every step of his
journey and how he grew it over the
course of many years. He was totally alone. He coded everything,
the old fashioned way. He was the only developer. But now maybe you're alone, but you have the knowledge
and the power of 100, 1,000 skilled developers,
in your corner for 15, 20, 25 bucks a month, right? So it won't take you years
to build your project. You may fail at marketing, but then you can do it another time and another time
and another time. You can try again. You can
fail fast. You can learn. And then at one point, you're
going to have success. Whether it's big or
small, it's up to you. It's in your hands. But yeah, now the question is, what do you want to build? It may be silly.
It may be small. But if you keep
trying and learning, I promise you you're
going to have results. Let's continue with Windsor.
6. Getting around in Windsurf: Welcome back. Let's fire up Windserf so we can
explore its interface. This may change on your end, but the basics will
always be here. We have a main menu at the top that we won't actually use, a towels panel on the left
side and on the right side, we have our glorious
cascade panel, which is where we will talk to the program and have
it build stuff. When you start a project, you should create a folder
somewhere on your computer, then you should use the
open folder button. Now, just in case you worked on a different
project in the past, you may see them here. And in this panel on the
right called cascade, I can start giving
instructions bit by bit by using this field here, or I can resume a previous conversation
by clicking on it here. Now, don't work along, just watch what's happening. So jumping inside
an active project, there's a lot to look at, right? But let's change the team because you may want to
change the interface, right? So go to the top menu to file. From here, go down
to preferences. Then look for Team. And finally, here,
click on Color team. Right now, after you
click on any of them, the window will close, which is not ideal, but open it up again. File preferences, Team color team and choose
any of them. Okay, great. Next, to better
see the interface, you can use Control plus to increase the
size of the text. Now, you don't have to do that, but if the text is hard to read, that's one option.
So Control plus. To shrink it, use Control minus. Now, back to a real project, you don't actually
have to read any code. The interface is
quite overwhelming, but actually 90% of the time, if not more, you're
going to focus here on the right
side on cascade. So here is where
you will see how the artificial
intelligence thinks and what it's working on. It's going to tell
you when it has errors and basically
what it's done. Now, the rest of the
interface, well, you have a file exploded
here through which you can see all the
files in the project, and these are actually opened here in the main
part of the screen. So when you click on
the files on the left, they're going to open here
in the center of the screen. Notice the opening tabs, very similar to your browser. So you can quickly
cycle through them. Now, are you going to do that? No, 99% of the time, no. Again, our focus is
going to be here on the right side on cascade. Okay, it's about the same
with the bottom panel. Problems, outputs,
terminal, and so on. We won't really use
this bit all that much. The terminal may come in handy, but yeah, we're going to
take it step by step. So while everything seems so intimidating for the regular
person that has encoded, this is actually quite simple because you strip
most of it away. You talk to the AI here on
the right, then that's that. Now, there's one important
setting here, write and chat. We will always use write, which simply means we'll have
the AI create everything. Now, experienced
coders may simply want to talk to the AI
to get advice and so on. That's not the case with us. We want the AI to do
everything. That's be coding. So, for us, no thank you. We're going to stick
to write mode. Okay, one thing to
keep in mind is this the AI will only work on the files from that
specific folder. So every website, every
project needs its own folder. That's how you keep
things clearly separated. You open that folder
and windsurf. You have your conversation
in the right side, and it's going to create or edit files from that specific
folder, nothing else. Now, the final important
setting here is this part where you
choose your model. That's going to dramatically
change the results. So let's talk about models
in the next lecture. For now, please change
it interface to a new team and create
a new folder on your computer and
then open it and windsurf just so you can
get used to that flow. That's how you create
brand new projects, and that's what
we'll do as well.
7. Getting around in Windsurf: Welcome back. There are certain tools that you can
install on your computer, so windsurf can do a better job, especially if you want to do the least amount
of work possible. Now, we're not going to give up complete control to any AI. Instead, we're going to install very well known software tools that are going to help
Winserf work better. Now, we already
installed Python, but if you haven't,
please do so. At the end, I'm
going to show you a potential issue and effects. Now, to check and see if
your installation is good, open up your start
menu and type in CMD. CMD is short for command. This is what you
want. Command Prompt. Here, type in this command. And if you see something like
this, you're good to go. Now, most likely, you will have a newer version, but
that's totally fine. As long as there are no warnings or issues, you're good to go. Now, in case you can't manage, you can go to windsurf to
the top menu to terminal. Here start a new one. It's going to be right
here at the bottom. Type in the same thing
and see if it works. It's all good on my end. Now, before we
continue, I got to say, I won't explain every piece of software because it's
counterproductive. Instead, I'm going to
attach a file with a few details about
every single program. Now, what I want
to do is I want to focus on practical things. For me, the goal is simple. Create websites as
fast as possible. Learning about Python
right now won't help. It's going to make
you the head spin. So I'm going to keep this
as short as possible. Yeah, Python is
checked off my list. Ideally, you would restart your computer just to be safe
after every single step. Here I'm going to continue, even though that may
cause some issues. But yeah, let's
go. The next thing on my list is this one. Now, no JS LTS version. This is another must have. And during the
installation process, it's going to ask you if you want to install a
few other duals. Now, one thing, please make
sure you check this option. This is going to show another
window with a lot of texts, and I do mean a lot. Now, on my end, it says
that it can't find Python, even though I just installed it. Restarting my
computer could have potentially solved this
issue. I know it's installed. I'm going to continue.
But the thing is, after the while, this just
stops. But here's the thing. Open up a note of command
prompt and type in node V. You don't have to memorize any of these
commands, by the way. They're all attached
to the course. And yes, I see my version
here, so I'm good to go. So two programs
I've checked off. Next on my list,
Power Shell seven. We're on the official
Microsoft store, and this tells us that are many ways of installing
Power Shell seven. Now, it seems overwhelming, but it's actually quite simple. We'll use this method, Win Get, which is the
recommended method? Here, actually, there's
only two steps. It looks complicated, but
it's actually quite simple. This is the first one. So
you open up Command Prompt. You click here to
copy this text, and then you simply
paste it with Control V. You're going
to get a question here, type in Y as in yes,
and then hit Enter. It seems there are two
versions available. Preview means
something like Beta. So it's a version that's a bit experimental,
usually less stable. We don't want that. So
we want the other one. So that's step two, to install
it, copy this command. Again, not the preview version, that's a bit lower down, and then paste it in
to Command prompt. And after the few seconds,
this is going to install. Now, test it out, open up your star menu again
and type in push. But instead of a U, use a W, and you should see
Powershell seven available. Now we're doing quite well. Let's continue with GitHub. We need an account,
but like with everything else,
it's totally free. Put in your email address,
then after a while, you're going to
have to verify it, and that's it, we're good to go. Github is very much needed, even though it may be
super intimidating. As you're about to see, we'll
focus on the essentials, and soon enough, you're going
to be comfortable with it. Okay, great stuff. Next, we're
going to install Docker. This is considered optional, but I had quite a few issues because I didn't
have it installed, so I would much rather have
you install it as well. This is one of the slowest
programs to install, but there's actually not a
lot that you have to do. It's just slow to install. But yeah, after it's finally ready and there is going
to be a few minutes, you do have to be patient. You're going to have
to create an account. The thing is, I initially
wanted to set up an account, but here's the Qull thing. Some of these tools allow you to sign up by using Giild Hub. So because we just made
an account on GID Hub, why not use it, right?
It's much faster. And there are a few
other things here. But as I work in the background, let me explain what's going on. So we're about to cook many
dishes in the kitchen, right? It's going to be breakfast,
lunch, and dinner. It's gonna be desserts. It's gonna be snacks. It's gonna be full blown meals, right? Now, this means we need to have a fully stocked
fridge and utensils. We need the ingredients, and we need knives, forks, spoons, the works, right? This is what we're
doing right now. Are we going to use
absolutely every single one of them in
every single dish? No, of course, not, but
it's much easier to prepare everything right now versus trying to find them
while cooking. See if you get error
after the error in windsurf because you're missing this or that, you're
going to waste time. You're going to use credits, which is basically money. You lose energy and momentum. So this is why I strongly suggest you install
everything right now. You pause off, of course,
you get to the wit. But then after this
is going to be done, you're going to be flying. So that's what we're
doing right now. Okay, now let's install something called Git
for the Windows. This is going to have
quite a lot of settings, but we're actually
only going to use the default values every
single step of the way. Now, feel free to pause, but I'm just going
to accept everything because windsurf is actually
going to manage everything. Now, I realize that this list
isn't all that comfortable, but this will allow the AI to do a lot more
with fewer prompts, with less intervention from us. So it's going to be a
bit more independent. Okay, fast forward, and we only have three more
accounts to create. But these are done
in an instant. Versll is the first one. We'll use this to host our websites so everyone
can see them, right? Now, again, it's
free, so no worries. Sign up by using Github
to simplify the process. Okay, great. Next, we'll
use resend to send emails. This is totally free for up
to 3,000 emails per month. Awesome to get started. And finally, we are going to make an account with Super base, which is fantastic for our databases for more
complex projects, which we might do later on. But hey, it's only one click, so let's just get
it out of the way. And yeah, overall,
believe it or not, we're done with these tools. Now, there are a
few other settings that we're going to handle
in the next lecture. For now, pause,
install everything, and only continue after you've gone through
this checklist. I'm going to see you in a
moment when you're done. Pause the course right now
and install everything.
8. Set up MCPs & rules in Windsurf – the easy way: Welcome back. We've
installed quite a lot of things like Python,
NoJS, Power Shell. But there are a few things we can set up in WinSerf as well. The first one is rules. You can get to this section by focusing on this
corner and WinSerf. And inside customization
we have a few tabs, rules, workflows, and memories. Now, I'm going to keep it
as simple as possible. Global rules are what
we're interested in. So click here and
you're going to get an empty document in
this central part. Here, use the attached file to simply copy
paste these rules. Now, in short, we're telling
Winsorf how it should act. It's like telling someone how you like your coffee
to be done, right? And inside the rules, we have basic stuff like
we want to be efficient, we want to use best practices. We want it to be
safe and covered up sensitive
information and so on. You can find many
templates for the rules on the web or you
can simply use mine. I got it from the web, as well. Now with using global
rules because we want windsurf to apply them
to every single project. Workspace rules would be specific for this
single project, and we don't want that. For example, if we switch to
a mobile app project on IOS, for example, we may
have different rules. So yes, in that case,
that would make sense. But yeah, overall, what's
written here is a global thing. So simply copy paste it, hit Controls, and you can use this icon
to refresh things. After the few seconds, you should see it here. Okay, now we're going
to click on plugins. It's this icon right here. These are MCPs, and
sort to be super short, this is us giving more
control to the AI. If we don't want to use these, we would have to do
a lot more work, write code ourselves,
write more commands. It's basically more work for us, and instead, we want the AI
to do most of it, right? Now, the great thing is that this is an official
list. It's safe. It's good to go.
Now, on your end, you may have more
available because they're absolutely fantastic and Winsurf is adding more and more of them. But yeah, let's get started. The first one memory. Click on it, and while you
could use this download icon, I prefer to use the central
part here and hit Install. And basically, that's that. There are no other
settings for this one. Same thing for
sequential thinking. This will help the AI break down the task into smaller bits, and it's going to
keep track of them, and it's going to give
us much better results. Okay, let's keep at it. Let's enable G but
here's something that may happen and it's going
to be quite annoying. Even though I installed Git for the Windows correctly in
the previous session, it's saying that
it's not working. So we're going to come
back to it at the end. This is one thing that's bound to happen on
your end, as well. In tutorials, it seems so simple. You do
everything right. But here's the thing, on your end, it doesn't work. You follow every single
step from the video, but on your end,
it doesn't work. I know it's frustrating,
but no worries. We'll do our best to fix it. Next, the file system MCP. This allows the AI
to make folders, to move files around,
to make copies, and so on, because it
wants you to feel safe, it's asking where exactly you
wanted to have permission. Now, my advice is you set
it to the entire drive. In case you are nervous, you could potentially
give it a folder, maybe inside of a folder, but that might create some
issues down the line. Now, I will always set
my entire D drive, not just a single folder because I feel very
confident about it. Next, let's enable Suba Base, which is actually quite
useful for serious projects. Now, this is asking
us for the token, and this is actually quite
common. Nothing too tricky. Click here and you'll be
taken to that exact page. One thing, never, ever
show your keys to anyone. It's like showing your credit
card number on the web. All sorts of bad
things can happen. So this is why you
won't be able to see it after you've moved
away from this page. You're going to see it once. So say that someplace safe. I'm just going to paste
it inside windsurf. Okay, let's keep this up, but please pause as often as you need to on
your second viewing. Let's go for Git Hub. Previously, it was Git,
which is one thing. Now this is GitHub, which is a different thing. This is asking us for the token. You can use Google
to look up Github, personal access token.
Or you can do this. Go to your browser, go to github.com and then
account settings. Now, from here on the left side, at the bottom, you're going
to find developer settings. And from this new window, you'll see exactly what we
want personal access token. We want the classic one. Created, but be aware that you will have to set up a
name, an expiration date. 90 days is what I recommend, but you're going
to have to check off absolutely
everything on your own. I know you're sick of
setting things up, but I promise you,
this is going to make our lives that much easier. Don't skip any single step.
It's quite important. But yeah, overall, with now ready to rock and roll.
Everything is set up. The entire list is
checked off on my end. One thing, though, it seems
like Github is not working. The issue has something
to do with Docker, which is a bit strange. In any case, here's the thing. When you restart your computer, Docker may not start on its own. In this case, I'm
going to launch it, and then I'm going to wait for the minute until it loads up. And then I'm going to refresh by using the icon from
the top right side. One thing, though, please
be patient with Docker. No matter your computer, it loads up quite slowly. Okay, it started,
so let's refresh. And yes, there you go. We good. This is all fine. You may say, What
about some other ones here in Windsor,
some other MCPs? Well, for the moment, if you
try to enable more of them, you're going to get an error. I'm sure in the near future, we're going to be able
to add more and more. But at this time, this is it. Quite a short list,
quite a bummer. But yeah, now you can pause, set up everything on your
end, so you up to date. But in case something
is wrong on your end, you can skip to the next video.
9. How to fix issues: Everything works, you can
skip to the next video. But in case something is wrong, on your end, continue
watching. It's my case. For whatever reason, the Git
MCP server doesn't work, and it says it's due to Python. We installed Python and
it seemed fine, right? So I copied the error
and I used Google. I found a few things
on stack overflow. I tried many solutions,
but they didn't work. To be clear, I'm
not a developer. I have no idea
what's the problem. How you handle these
issues when they come up, that's going to
determine your level of success. So I repeat. You follow all the instructions, be it from the course
or from the web, but things won't work. That's how it goes right now. So how you manage this situation is going to
determine your success. Here, I tried a few things, and then I switched to chat GPT. You can use it totally for
free, or you can sign up. I recommend you sign up, even though it's
another subscription, it's another 20 bucks per month or whatever
it is, on your end. But I use it quite often, so I can honestly recommend it. You're not going to need it for the purpose of this
course, by the way. It's just something
good to have. Okay, I used this model, which is very good at
thinking at reasoning. I told that exactly
what's happening. Hey, I'm using windsurf AI, and I'm getting this error. The fun solution it gave me, well, it was quite complicated. For my taste, I
said, No, thank you. It's a bit tricky. So I
skipped to the second one. Here, I had no idea
what these meant, but I just started pasting
them in my CMD window. So the first line
didn't seem to help. So then I went on to try the
second one, the other one. And yeah, after the few seconds, it installed something, and
I had a feeling it worked. I went back to
Windsorf. I refreshed. And yes, it's all good. But here's another case
on a different computer. The Git NCP doesn't work, but for a different reason, I honestly don't know
what this means, and to be totally transparent, I don't plan on learning it. Instead, I'm going to
use the same method. I'm going to ask
Chat GPT OT about. I'm going to use 03 because it's the most advanced reasoning
model at the moment, and for me, it's free. I pay 20 bucks per month, so I get unlimited discussions. Now, if you don't have access to CHA GPT for whatever reason, use cascade, and it's very likely you're going to
get the same answer. Now, here in CHA GPT, I told it was going on. And then after about
90 seconds or so, it gave me a step by step plan. So first of all,
I have to install something by using Power Shell. And here's the exact command. Okay, so that's simple enough. I'll use the start menu, and then I'm going to type
in push but with a W. Now, inside Power Shell,
I'm going to copy, paste that command
and had Enter. Okay, now, this is
installing something. It's doing various things. And Okay, yeah, it seems like it's good to go.
Okay, pretty cool. Now for the next step, it
gave me a different command, but it's insisting that I open up a new terminal.
Okay, pretty good. I'm going to type in push yet again and paste that command. But of course, that
raises an issue. I've copied two different lines, which is not correct. But I'm going to paste anyway, and it seems we're good. Now, the second step is
to restart windsurf. Let's not skip that. I'm happy I don't have to restart
my computer now, I'm going to have to wait for
a second until it warms up. I'm going to hit the refresh button from the top right side, and victory. Great stuff. Now, on your end, I'm
sure that you're going to have different issues,
different problems. But remember one thing. Once you solve them, you're
going to be good to go. You're going to be
flying. This is the essence of vibe coding. You don't have to
know how to code. You have to have A patients, B, ask the right questions, and C, the most important thing, try stuff until it works.
Now, here's the thing. I could have asked my question
cascade and windsurf. But since I already have chat
GPT, why not use it, right? I would much rather get a free answer versus wasting
credits and windsurf. Now, to wrap it up, this
is how headaches happen. In tut or els, it's simple
ABC and success, right? In your case, you may
spend hours on step B, and you're stuck and
you can't continue. As long as you keep my
advice in mind, patience, ask the right questions, and try stuff until it works, you're going to be just fine. Remember, this is the price
to pay for being so early. Being early means without bugs, with other issues, but it's a small price to
pay for your future. And with that, let's continue.
10. Claude vs GPT: Come back. LLMs are
large language models, and they are the main
thing that windsurf uses. So all the intelligence
comes through these LLMs, which most people call
models. So that's a model. Now, to be clear, windsurf
is the main program, but most of its
intelligence comes from these models from
different companies. So windsurf is like a pipe. The models are the water. Now, could the water
flow without the pipe? Sure, of course, but it
may be all over the place. So windsurf makes sure you're getting more
of what you want, and that's why we're using. Otherwise, we could
just sign up to one specific company and use
this specific model, right? But that would be much more limiting and substantially
more expensive. This is why windsurf is
a much better choice. So through Winsurf, you
get access to most of the companies and to most
of the models out there. That's why when you click
here in the cascade panel, you can choose from quite a few. And now the question is,
if this is so important, which one should
you choose, right? And the short answer
is, it really depends. I'm going to give the top
ones the same task so we can compare the results
so we can decide together. But again, you're going
to see it really depends. Now, you have the task attached, so you should do the same. On your second viewing, you should try this
on your own computer just to verify you have
the same experience. Now, here's the thing why it may be different on your end. Models change often. So what's slow today may
be quite fast tomorrow. So keep that in
mind. Okay, let's start with a clear slate. When you start up windsurf, you'll get the previous project. But you can go to the
top menu to file. From here, click on
New Window. Great. Now we can use the
open folder feature, and I'll brows to a location. Right from this window, I'm going to make a
new folder and I'm going to call it by
the model's name. This is optional. The name really doesn't matter. It's for us to get organized. Cloud 37. Okay, great. Select that folder,
and we're going to load up our brand new
project in Windsor. By the way, if you can't manage, go to your drive
on your computer and make a folder the basic way. I'll also add a few
images to this folder. Now, the fastest
way is to click in this panel and select
Reveal Explorer. Then I'll simply copy paste
the folder with a few images. To make sure the model
knows they're there, I'm going to right
click and I'm going to choose Copy as path. We have to paste that
address in the text file. If you don't have copy
a path, not a problem. Just click here and
copy the address. It's the exact same thing. Pause as often as you need to, but we'll do this a bunch more times in this lecture,
so no worries. Okay, the images are,
of course, attached. The model is set to cloud. Now, I'm going to paste the task and I'm going
to start the timer. Okay, well, this is working. Let me tell you this. Winserf
is sort of like a car. What tires should you put on well, that's
really up to you. Is there one
particular tire brand and model that's the
absolute best out there? No, of course, not.
There's premium brands, there's medium ones, and, of course, there's cheap ones. So it's not a clear cut thing. There's no one
very clear winner. It's the same in
football with phones, with Coke and Pepsi, with just about everything. There's a battle
between two, three, five very well
established companies. So it's always something where there's a lot
of competition, and you can choose
from many options. And it's the same thing
here with these AI models. And here's a table which shows you what models are
available right now. Anthropic is one company. Open AI, of course,
is another one. Google is in the game, but there's also Twitter, which is called X AI. And that's Deep Sk. There are Chinese companies, and it's bound for the
few more to show up here. Now, this can make your headspin
so many choices, right? And more than that,
they all have different costs
and capabilities. And what we see here is that some models are very smart,
but they're quite slow. Some are smart, but
they're super expensive. It's exactly like buying
a car or buying a phone. Sure, they all do somewhat
the same thing, right? Some people swear by BMW. Other people would not drive anything other
than a Mercedes. Some quirky people
might prefer Lexus. It's the same thing
with these models. Every one of them has die hard fans. But
here's the kicker. New versions always come
out and quite fast. So what do I recommend? I say, stick with the top ones. Try them out and see
the personalities. Because, yes, they do
have personalities. Now, what I used a
lot is the following. It's Cloud 3.7, GPT 4.1 oh four Mini high
and Gemini 2.5 pro. This is bound to change in the next few weeks
or a few months, but here's what you
have to remember. You have to test them out, which is what we're
doing in this lecture. Oh, by the way,
let's have a look. So this is on a fresh computer
with a very basic setup, not what we previously did at the beginning
of the course. So we don't have any
tools installed. So Claude started immediately. It's proposing a
very solid approach with a nice text stack, react and next JS. You don't have to
know what that means, but it's a very
healthy sign that the model is applying best practices in
modern technology. Now, here's the first
thing in the terminal, we have to hit Enter, otherwise, it won't continue. This may not be very
obvious to most people. This is one of those cases where you shouldn't focus on
the right panel alone. The bottom side, the terminal is also quite important
from time to time. Now it's installing a
whole bunch of stuff. But I'm waiting here, and
it seems like it got stuck. It's frozen. I'm
not sure what's up. So here's the thing.
Let's stop it. And now to resume it, we have to say continue. Okay, when an accept button
comes up in the right panel, I'm going to hit
Accept pretty fast. Now, you're going to
notice a bunch of s, even though the model did
absolutely everything, and it seems like it
stopped working yet again. So I'm going to use a third prompt and say
continue once again. This time, though Claude
dropped the standards. It's no longer trying to use that text tag
from the beginning. No, it downgraded to
something much simpler. It's still going to work,
but it's not great practice. It's going from a brand new
car to a car from 1999. It sort of does the same thing, sure, but it's going
to miss of features. And I have to say that at the five minute mark,
I'm quite disappointed. It's moving much slower
than I expected. I'm going to zoom ahead, and after about 7.5
minutes, it's done. We could use this button called Open and
external browser, but this time around, I'm
going to go into its folder and look for the index
file, the classic way. And this is how the
website looks like. Nothing crazy, but it
does look pretty okay. That's a hover state. The font is nice and chunky. It followed our instructions. Yeah, overall, I'm
quite happy with it. And I think the mobile version, that's actually
quite solid as well. Nothing to shout
about but solid. Now, let's compare
it to something. Let's switch to GPT 4.1. I'm going to add
all my setup steps in a file that's attached. Okay, please review it. So I'm going to speed ahead. 4.1 also proposes something
quite strong react and vet, and then tailwind CSS. Again, it's totally fine if you don't know
what that means, but it's solid.
It's a great sign. 4.1 is checking out the images and it's
creating files quite fast. Under a minute and
I'm quite happy. But here's the thing. Here's what's happening.
It spirals down. Error after error after error. And this goes on for the while. And then I was quite surprised. It stopped working
without saying anything. I looked for an index file,
but there wasn't any. So this is what I
mean by personality. Typically, Claude always tells me what's up? What's
the situation. And often it does lots of steps without stopping and
asking me for stuff. But I hear this model, 4.1 from Open AI, is a lot more nervous. It pauses often and
it tends to consume a lot more credits because it wants us to confirm if
we want to continue. Of course, we want to continue. More about costs later on. But yeah, this is
more expensive. This is going to
take more money. But yeah, going back to it, I had to give it a second
prompt so we can continue. Accept everything, and
then one final prompt, the third one, continue. But, yeah, I think
it's already done. Quite interesting.
Okay, so only now, though, did it give
me the address of the website, its local host. Because it used a
different text, a different approach, it actually didn't
make an index file. Interesting. Okay, now
let's keep it simple. Let's open it up,
but, it doesn't load. Now, here's the yellow
light in this area. Now, this means something
is trying to run. So let's open up the terminal. And here, it seems like it's
asking me to run a command, to type it in myself
and run it myself, which is a bit frustrating. I would have liked
for it to do that on its own or at least type it out. But it is what it is.
Okay, let me type that in. Okay, run it, and
then a few issues, and it's telling me what
I have to do to fix it. Again, it's some simple copy
pasting. It's nothing major. But initially I had no idea
I had to do this on my own. So, okay, let's go for the
fourth prompt to continue. And now I think the server is up and running, and
we can check it out. Okay, yeah, let's have a look. The design looks quite okay. It's quite a lot darker, and here's a fun thing. I wanted an Instagram feed, even though I knew that would be very difficult to implement. It did add one, but it's a random one, not the one that I mentioned. So is that a win?
No, I'm not sure. Overall, it's a decent design
made with a good tex tag, and the mobile version is
decent enough, as well. So that's GPT 4.14
prompts in total, decent results,
but we already see quite a big difference
between it and Claude. Let's continue after
the quick break. Don't work along just yet. Let me do the other
ones as well.
11. GPT vs Gemini vs Grok: Welcome back. Let's continue
to compare these models. So let's go with GPT 04. Now, while I set this up, let me quickly explain
4.1 versus 04. In short, every model is
built around the use case. It's a sports car versus
a seven seater SUV. They excel at different things. They're meant for
different uses, right? 04 is very much
focused on coding. It doesn't support images. It focuses on reasoning, logic, which basically means
it's great at coding, right? Now, on the flip side,
4.1 is universal. It's a typical sedan that most people can use for
just about everything. Now, does that mean it excels at every single thing?
No, of course not. By being okay with everything, it's not great at
anything, right? Now, this is obviously not a comprehensive comparison
between these two, but I hope you understand why a company would put
out different models, exactly like car brands. They offer two seat
of sports car, a sedan, an SUV, a pickup truck, and so on, different use cases
with different needs. But yeah, back to it, 04 is
really, really thinking. Now, where the other models got started immediately,
this one hesitates. After 2 minutes, it hasn't
done anything productive. I just saw my images inside
the folder, and that's that. So that's a bit disappointing. And this slowness continues, and it's actually
quite annoying. Keep in mind, for the moment, the price is a bit lower
than the rest of them. It's actually 25% of
the cost versus Cloud, for example. But
here's the thing. It's actually quite slow. But surprisingly,
after about 4 minutes, it's actually done the website. The project is done. Now, let's have a look, and, you know, the website
isn't all that great. By the way, the model didn't
tell us what it used. What framework did it use? It didn't say that it didn't manage to use what the
previous ones did, like next JS or VT, whatever. But, yeah, it actually
didn't think about it. It didn't tell us anything and
it didn't ask us anything. Now, because with Knot coders, this is actually
quite a bad sign because we have no context. We can't really ask for help. We don't really know what's
up with our project. It built it, but we have
no context, no clue. And as for the design. In the mobile version, we can see how the text
touches the sides, the cards as well. They don't have any
breathing room on the sides. So yeah, it did the job. It did it in one single
prompt, whatever. But I don't think
this is awesome. But yeah, overall, this is
04. And here's the thing. When you look it up on a chart, it seems to be one
of the best ones. But I think in this case, it's quite low on the list. It's slow. It didn't
tell us anything. So overall, I can't
say that I'm happy. I've actually tried
it for the few days. Actually, I think it was about
a week, nonstop only 04. And, man, way too slow. Even though it's smart,
it doesn't compensate. Sure, I'm happy that it doesn't make a whole lot of mistakes, but yeah, overall,
it's way too slow. Okay, let's move on
to X AI, ak Twitter. They have a model called Glock. So I'm going to go to the exact same task, the same steps. Okay, Glock three says that it wants to use react
and type script, and it explains why.
This is quite good. It starts out strong by
making a bunch of files, but something fishy is up. So as you can see here,
evos are coming up, and there's quite a lot of
them one after another. Of, so that's not great. So something happened
here. Deadline exceeded. I have no idea what it is. But you didn't ask us anything, so it just continues. So I think it reminded itself of the goal,
which is quite good. And yeah, it's remaking the files from
above, which had vs. Though, again, more vs here. So this is not a great sign, but as long as it's working,
you know, I can handle that. And here's the thing
while my computer is not set up because I repeat
it's not set up, it's the same for
all models, right? So this is a fair
comparison because all models received the exact same task
on the same computer. Now, grog seems to think
there's a problem with creating files and is
looking for options. So it decided to use a simpler structure with
just the essential files. So downgrading, not
ideal, but let's see. So after one single prompt, it gave us our result. Okay, let's have a look.
It's a basic design. It's not using the textag it
initially said it would use. And as for the
actual design, well, it's the only one
that managed to implement the correct
Instagram feeds, so this is the only one
that actually works. But having said that, the products are missing
the respective photos. So overall, from what
I'm seeing here, the Glock tree, it's
a bit of a miss. I can't say it's my favorite, but it's not worse than 04. I like its personality, but again, you're going to
have to decide on your own. Now, one final test. Let's switch to
Gemini from Google, which most people bet on. Same steps as before,
nothing has changed. So let's go ahead
and have a look. So immediately, it
says it's going to make a basic website,
no text tag. No great. It talks to us
in a great way, though. It explains that it
sees eight images, and it's happy that it can make a perfect
four by two grid. This is a lovely insight.
It's quite interesting. It's not asking us for
anything. It continues to run. And it's working quite
fast, the time it shows it. After the minute and a half on the dot, it's actually ready. Wow. Okay, quite fast. And let's have a look.
Okay, yeah, this is solid. Nothing to shout
about, of course, but the task was quite vague. So I'm happy with the result. The Instagram feed
is not real, though. This is very interesting. So what it did was it used my photos to create a fake one, which is a very
interesting approach. I'm not sure that I
trust that, though. I would have
preferred it to say, Hey, I can't do it
with something. But yeah, I just made up one. Okay. The card isn't as nice
as the one from Claude, and the images,
they're a bit modest. They're quite small, and
they don't fit well. Plus, the entire
website is super wide. Okay. Google just
launched a new model, a new Gemini model, but it's not yet available. But yeah, overall, this is what the current one
can do quite fast. So overall, what's the winner? Well, it's up for debate.
You got to test it yourself. But I can clearly say
that 04 is way too slow. And Grock forgot one of the most important things
the product photos. GPT 4.1, I think is the only one that actually
used the local server, and it used the
great textag with react VT and tailwind
CSS, I believe. I'd like to say that
as a non coder, as a person who
is not technical, I think this is a big advantage because I don't know what stuff
I want to ask for, right? When the model is guiding me, I think that's best
because again, I don't know what to ask for. So that's actually quite good. Now, plus, on the featured side, it did integrate
on Instagram feed, though it was the wrong
one from a random company. But yeah, overall,
this is the test. It's not a definitive one. It's not a comprehensive one. If you're giving the models
better instructions, if you've set up your
system in a better way, you may get totally
different results. Plus, every time you run it, there's a good chance you're
going to get something else. So don't take these results
as being definitive. No, I struggled with GPT 4.1
a lot with my Android apps. It was forgetting
what I tried two, 3 minutes ago, and it
was running in circles. I then switched to Cloud, and it worked from the
get go immediately. So there are no
definitive answers. I'm constantly
switching sometimes during a project
when I get stuck, but more often than not, I start out with a clear goal. Hey, I'm going to build
this project with Model X, with Claude, with
Gemini, whatever. And that's because when you change models during a project, the new one might not like
what the previous one did. Yeah, that happens. It's actually quite funny. Have it critiques. Oh, man. There's a mess here. I got
to fix all this stuff. Let me handle it,
man. Whoever worked here did a terrible job. So when you see the AI
say stuff like that, it's actually quite funny. But yeah, to wrap it
up, I hope you now have a bit of a sense of how
these models compare. And now you have a
different perspective, not just the chart
that I showed you. By the way, there
are many charts. That's just one of
them. So my advice, try it out on your own. Use my prompt. You have it
attached, and see what's what. Then tell me your results
in the comments area. I'd love to hear about
your experience. Give me your best model, you're the worst one, and
you're the average one. Remember, have fun with it. Issues are bound to come up. Stay cool, stay relaxed
and enjoy the process. You will have your
own favorites. What matters is you
achieve your goal, no matter what you
use. Good luck.
12. Costs explained in a simple way: Welcome back. I want to address something
that's quite important, and that's range anxiety, credit anxiety. And
here's the thing. Your monthly plan comes with
a certain amount of credits, 500 credits as of right now. You pay a certain sum, and you get to use
those credits. It's 15 bucks at the moment, so 15 bucks for 500 credits. Now, here's how this goes. Click here and have a look. You can see, the cost varies. Some of them are very expensive
and nobody uses them. From time to time, there
are also promotions. For example, Open AI gave
4.1 and 04 for free, totally free for ten days or so. At the moment, they're
cheaper than Cloud. Claude also has two
versions at the moment. So it seems fairly
complicated, right? And that's because you sometimes give a model a prompt, a task. And then the model does 20 things one after
another, right, completely on its own, and you are just a passenger, and it's one credit, right? It breaks down a huge
task into smaller ones, and then bit by bit,
it checks them off. It works on its own. Great. But other models are different. You give it a prompt and
it does one single step. So one credit, but it's
actually only one step. Sometimes it actually tells
you what you should do, which is very frustrating. This is why the
cost is relative. You may say, Okay, let's say
4.1 is super cheap, right? But if it has amnesia and it needs you to hold its hand
every single step of the way, and you have to give it
four or five prompts, whereas to Claude, you only have to give
one single prompt. Well, then, does the cost
really make any sense? Can you actually compare
the two? No, not really. On the flip side, some models
are incredibly expensive, even ten times as expensive. Now, does that mean
they're ten times as good? No, that's not the case. Again, I think things are
changing at a rapid pace, and these models
are going to get better and better
and less expensive. Now, here's what I actually
want you to take note of. Running out of credits
is not a big deal. You have that nice
round number 500. But the very first
time you use it, it goes down to
499 and then 498. And after the few
days in this course, you're going to have
450 and then 390. And then the panic
starts to set in. What if I blow through the
entire plan, 500 credits? What happens then? I had
the very same thought, but then I realized the game. Even if you go through
all 500 credits and you don't have a
completed project, which is almost impossible, by the way, you can
always buy more. And the price right now it's
ten bucks for 250 credits. That's $0.04 per
prom you would take. So $0.04, right? Again, sometimes
one single credit may give you a lot of progress. While, other times it may not. It really depends on how clear you are with
your instructions, how detailed it is. But even if you have
average results, right, let's put it this way. It's $0.04, right? So ten prompts, ten tasks, is going
to cost you $0.40. 100 means four bucks. And my guess is that
at the beginning, you'll spend under 50 a day, especially if you use some of the cheaper models that
are in promotion mode. Now, here's where
this finally clicks, and where, for me, it made
a whole lot of sense. Our goal is to build websites
and then make money, right? Build projects that will get
us hired as freelancers, get us stable job,
launch a business. That's the goal, right? Okay, if you wanted to hire a coder, trust me, you would not pay two, three, four bucks per day. No. I'm talking about an
average coder, right? But here, you have access
to some of the best coders in the world for pennies,
literally pennies. Now, an average landing page
should take you anywhere from 2030 prompts to maybe
maybe 100 at the most. In our example, we use
less than five, right? But even if you use 50, right? Trust me, that's nothing in
the grand scheme of things. When you sell that
website for whatever, let's call it 500 bucks
on the low end, right? Does it really matter
that you spent two bucks making it
no, of course not. So this range anxiety
that you're going to run out of credits is
actually not rational. Most coders ask 25-100 bucks per hour on
freelancing platforms. Winsurf is cheaper, faster, better, and it's
under your control. You won't use hundreds
of credits per day, especially in your
first few months. Now, keep in mind another thing. Initially, you don't know what you're doing,
right? It's fine. You may burn through
some credits. The first 20 or 30. That's totally fine.
That's normal. That's how you
learn, right? But as you get better and better at it, you'll use credits more wisely. But for now, splurge. Use them. Don't worry about them. This is an investment
into your future. You buy a course, you buy
several subscriptions, but the overall cost is nothing
compared to the upside. I've built actual businesses
in the food sector. I've built businesses
in the tech industry. I've had teams with
dozens of people. The costs are immense. Rent, utilities, salaries,
expensive equipment, the works on the flip side with windsurf with paying pennies. That's no better deal than
vibe coding at the moment. With a few dollars, you
can achieve so much. Now, to wrap it up, don't
protect your credits. Don't cherish them. It's an investment
into your education. Use them. Okay, let's continue.
13. The Hidden Dangers of Vibe Coding & Full AI Access: Welcome back. Let's talk about something
that's not very fun, but it's super
important security. Specifically, what happens
when we vibe code? You know, when
we're in the zone, all excited to try out
our new AI agents, we might install a ton of things left and right without any
second thought, right? But here's the
problem. Every time you run a script that
you found on this cord, read it or some other places, every time you give full
access to an agent, to a model, to a company, you're handing over the
keys to your computer. And let me explain
what that means. Imagine that your computer
is your apartment, right? And inside, you've
got private stuff. You bank login, your
business plans, you have creative files, crypto money, credit cards, private photos, your
passport, ID, the works. Now, picture this. You
go out for lunch and you leave your apartment
door wide open. Worse, you tape your key to the front door so anyone can use it for anyone
to take, right? Now, that's exactly what
happens when we let someone or some thing control our
computer without question. This happens a lot with
vibe coding because sometimes the AI doesn't
consider these issues. It sometimes saves of passwords, all of all passwords from projects in a text
file called passwords. I'm not exaggerating. Well, I am a bit,
but not by much. The bad guys know this stuff. These models don't have security in mind unless
you tell them to. And when you let a program do whatever it wants
with your computer, Again, it's like saying, Hey, feel free to look around to my house, take
whatever you want. Now, here's the thing. We didn't want to install
Python ourselves. We didn't want to
fix the installation when it didn't work, right? We didn't want to read
up on four rooms and send support tickets and
ask people to help us, right? We didn't
want to do that. We would much prefer the AI to just fix it,
to do it on its own. But that's the way it has to be, even if it's frustrating. I know we all want a personal robot that does things automatically
in a perfect way, a GPT clone, something. Maybe it types for you, maybe it installs programs. It sounds so cool, right?
But here's the thing. Giving full control to AI is not like hiring
a personal assistant. No, it's like giving a stranger, your credit card,
you have house keys, your passport and saying, Hey, do whatever you think is
best. Here's the thing. We're not there yet. And while this tech
is impressive, the technology is fantastic. The security part is
still very much fragile. So, yes, I'm all for AI. I love using it to
speed up my work. I'm fine giving
over some control, but I'm not going to give
control to any type of MCP, to any type of agent
or whatever, right? A bit more work for my hands. Sure, that's totally fine. Installing tools manually,
checking permissions, reading a few instructions, it's not the end of the world. Sure it takes more time, but it can also
give you control. And when it comes
down to launching a serious project,
whether it's an app, a website or startup, whatever, security should never
be an afterthought. We'll talk more
about that later on. But for now, I
wanted to tell you that we will do a bit
of work ourselves, but I wanted to tell
you all this stuff because I think it's
quite important. Everything that we've installed is top notch. It's
official stuff. It's very well known programs. But you're going
to find on the web other things that aren't
official, so to speak. You're going to find software
made by who knows who in a different part
of the world that claims that it can operate
your computer automatically. Okay, who is that person? What are those developers? Who is that company? You can't give you
keys a wages like. So, again, everything that we've installed so far and everything
that we're about to do, again, it is vetted. It is something that's safe and you shouldn't have
any issues whatsoever. But don't fall into that trap where you see something
on TikTok and, hey, look, it operates my
computer automatically. Don't install that just yet. Use something that's
very well known. Use best practices. Okay, let's continue.
14. 80%-20%: Welcome back. Let me be clear. You won't make $1,000,000,000 company on your own
with vibe coding, but you can launch products, websites, apps that
generate a great income. One of the main
issues is getting that last ten to 20%
that you may want. And that last bit may take you an incredible
amount of time. Plus a lot of frustration. So let's do this. Attached,
you have this folder. It's one of our
previous websites. And there's this product
card that looks decent, but maybe we want to make it
look a bit better, right? So that's the goal.
Make this look better. Now, this is the type of
thing that may go either very well or very
wrong in windsurf. So let's test of Luck. Please go to the main menu to file and then open this folder. You have an archive attached that you first have to extract. Okay, now, here's the thing. We're going to use Cloud
3.7 for the moment, though, you're going to have a
similar experience with most models, even newer ones. Now, you may want to
open up this website so you can see how my
existing card looks like, and I want to use it as a
reference point, right? Something like this
would make me happy. Okay, now we could potentially write all of the
changes that we want, and that would save
us some credits. But I'm going to take
it step by step. This typically gives
you better results. So let's say this for the
reviews in the product cards, add the product score
with two digits. Make the score bold. Okay, we're off to the races. It does take quite of analysis, but that's typical when
you import a project. Is going to look through
the entire code, and it's going to try to
understand what's up. Okay, fast forward. And okay, it's done. And here's exactly what I mean. This is my entire point. This doesn't look like what I
have up on my live website. Now, does it look horrible? No, of course, not, but
it's not what I want. And if you're a perfectionist, these types of things
may drive you nuts. If you want stuff to be
in a very specific way, this may take you a lot of proms and quite a lot of effort. Okay, let's continue.
Let's write this. Add a view details text that's styled in orange and
bold, no background, and add an add to card button that has an orange
background and white text. These two buttons
should be side by side underneath the rating. Okay. Now that's a question. Could you describe
it in a better way? That's another discussion. But yeah, you have an
idea in your mind. In this case, we
have the advantage of actually seeing
the live version. But, yeah, you just
got to do your best and describe what you want. And let's see how this goes. Okay, after the
while, it's done. Remember to always
hit accept all edits. Now we can refresh it. Yeah. Again, it's pretty good. Is it exactly what I want? No, not really. This is the entire thing you
have to realize. Sure, that's a question about the quality of my
instructions of my prompt. I could describe what I want
in a lot more detail, right? Maybe provide an
image as a reference, maybe show it a design
that I made Figma. Sure. That could
potentially work. And I'm not against more work, but that's not what
I'm trying to say. I'm trying to say
that you should be prepared for this workload. You get 80% to 90% there, but then the rest
it's really tricky. Let me try one final prompt. Move the weight of the product, the right side of the price, align the weight with
the add to card button, make the add to card
button completely rounded, change the weight of view
details from bold to normal. So as you can see, I'm
stacking instructions, right? One single credit, but I'm
trying to fix multiple things. You can, of course, do this, let's see how this goes. By the way, while you could 100% create a shop with Winserf, I think I would still use
WooCommers based on WordPress, but maybe shopiI
for such a project, simply because they're
very well established. Of course, if it's
just a simple shop with only one or two products, something fairly
small, you can work in WinSerf just as well, my $0.02. The only exception would be a very simple shop that's based
around very few products. But yeah, coming back,
this is, again, decent. It's not exactly what I want. We could spend ten, 15, 20 more credits, or we could try various approaches to get
closer to what I want, but I would much rather
end it with this. Be happy with it. This won't
make or break your project. Don't be a perfectionist. Launch the project
as soon as possible, see how it goes, find
out what people are saying about it, then polish it. Again, after that,
you should polish it. It's so easy to fixate
on these details, but I promise you, you'll just
lose out in the long run. And I'm talking from experience because I'm a
perfectionist, as well. It's hard, but we
got to accept it. Launch it, then polish it. And with that, let's continue.
15. From Figma to Windsurf?: Welcome back. The dream of
coding a design made in Figma in just a few
seconds is not there yet. At least not the wind surf. We have a Figma MCP
through which you can give wind surf access to
your designs. Sounds great. You need to set up a token
and you have Figma settings. It's not too complicated, but you do have to
be a bit patient. Please don't work
along, by the way. Now, here's the thing.
It sounds awesome. The AI can now analyze all of our design decisions and implement them in a
pixel perfect way. After all, that's what we're
struggling with, right? That last ten or 20%, the details, but
it doesn't work. At the date of this recording, it's actually doing
a horrible job, no matter what model you use. I tried it with Claude, with Gemini, with GPT, and the results range from bad to not being able
to finish the task, and I really do mean bad. The flow is simple. You design a nice
page in Figma, right? You select the entire frame. Then you copy that specific
page by right clicking and choosing copy link
to selection. Okay. Then you can start a new
project and a new window, make a folder, as always, and then tell the model of
your choice to implement this design by using CSS,
HTML and JavaScript. So very basic stuff to not
complicate things, right? Then you add the link. It should be as simple as that. But for whatever reason,
it doesn't work. Again, it's so bad that it's not really even
worth showing it. It's just horrible.
It doesn't work. Now, here's the
thing. When things change and windsurf, I'm
going to let you know. But for now, I don't think that this is credits well spent. On the flip side, I strongly recommend my
web design courses. And that's not because you
should learn how to use figma, but because the design
principles make all the difference,
things like contrast. So people see what
actually matters, hierarchy to guide the eye, big titles, clear the
buttons, wide space. More is obviously better. Don't bunch things together. Symmetry, alignment, keep
it neat, keep it clean. Typography, not just
beautiful fonts, but appropriate sizes,
weight, and spacing. These are the
principles I teach. And as you're finding out, these coding platforms help us with all the
complicated code. But if you want a
polished design, you got to know these principles so you can guide the model. You have to know
what to ask for. Things like increase
the padding in the card or make
this text H two, and then this text H three, whatever, use this
colored code or how some buttons need to be filled while other ones
should be pure text. These are the things that I teach you in my design courses, and I promise this is not advertisement. It's
what you need. Take your designs to the next level to improve
your instructions, your prompts, so you
get better results. It's what you need to
better describe your ideas. And with that being
said, Figma and windsurf doesn't work,
so let's continue.
16. Overview: Welcome back. So far, we've learned that
vibe coding basically killed web design in terms of
the classic way of working. Wireframes, high
fidelity designs, and figma, preparing the
file for the coding, and then finally, a
code comes in and actually implements the project
into a working website. Now, this entire flow would take from a few days to a few months, and that's no longer the case. And actually pains me to
say it because I've been active in that area for lots and lots of years.
But here's the thing. As a designer, I have quite
a lot of experience in moving ideas from my
mind to a blank page. I typically know what I want. I know what looks good, and what clients usually
want. I'm going to be okay. I'm not 100% comfortable
with this AI wave, but because I'm in it, I'm learning, I'm growing. I think there's actually more
opportunity than before. I think I'm riding this wave, and even though I'm going
to lose a lot of projects. I think I'm going to find great
success with vibe coding. Now, what I'm actually
worried about is how my friends who are into
coding are going to adapt. See, at least in my country, nobody is hiring
developers anymore. The only jobs that
are available are for super senior positions and other positions where
someone would typically get, say, $3,000 per month, are now being
offered just $2,000. It's a big shift because most companies can't
adapt this fast. They see how multibillion
dollar companies are focusing on AI, for example, dual lingo, okay? But most companies
can't actually do that. Without a lot of funds, without a lot of
senior developers on staff that closely overlook AI, things are bound to go wrong, and most companies
can't afford that, can't afford to mess
something up to AI. Their reputation is
everything, right? So that means most companies
are basically stuck. They can't really hire people the classic way developers because that seems
like it's outdated. Investors, shareholders
of all kinds, banks could look at them like they're buying fax machines. Now, obviously, that
would make sense, but on the flip side, they can't really
switch to AI either, because, again,
it's too sensitive. It's early and mistakes
are bound to happen. So this means that
the job market for developers is
basically on pause, at least in my
part of the world. And that's why I
worry about Again, designers, I think
they can pivot. They're typically
resourceful, agile. I hope developers are able
to do the same thing. But yeah, overall,
that's how I see things. Some opportunities are lost, but the new ones are
far more interesting. So overall, I think we're
going to be just fine. And with that, let's continue.
17. From idea to Windsurf to Vercel to live website: Welcome back. Let me explain
the process of creating a live website with your own domain name in a
very short amount of time. So we'll start with a totally blank project and wind surf. Create a working version
of that website that runs locally on our own
computer, nothing more. When we're happy with it, we'll then send it to the Cloud to Github,
to the Internet. You can think of GitHub like
Drawbox or Google Drive. It's a place on the Internet
where you store your files. That means you have access
to them from any device, and if you want, you can
share it with everyone. It's quite easy to do. So once the website
is on Github, we'll then send it to Versll, which is a platform
that's going to help us publish it so
everyone can see it. In short, Versll replaces
a hosting company. That's the essence of
it. Here's the thing. After you import the website
from Github to Versll, it's going to run pretty well, but you're going to
have an ugly link, something like this, right? But still overall, it's
still available to everyone. So you can share it
with friends, family, you can show it to your client, so it does the job. But if you want to take
it to the next step, you can buy a domain
name directly in Versll, wait a few minutes,
maybe a few hours, and then you'll have your own
address like cresbarn.com. That was already taken, so I bought cresbarndt fYI. So once this is all set up
and working, of course, you can come back to Winserf and continue to
make improvements. The great thing about
it is that you can tell Winserf to update Github, and it's going to do
it automatically. And then Verslls going to
work automatically, as well. So actually, it's fairly easy. The hard part was setting everything up at the
beginning of the course. Now it's a method
of going through the motions and debugging, fixing small issues
that will come up. Now, these issues may
take us five, six, ten prompts, maybe ten, 15, 20 minutes, or
you may be unlucky. Maybe you're going to need 20
prompts, maybe a few hours. But in any case,
you will get there. This is what we're going to do in this part of the course. So to recap, we'll start
with a good prompt, something with a decent
amount of details, and then we'll start
building in Windsorf. Then when we're done, we're
going to publish to Github. Then to Versll. So it's going to be live
and sharable with everyone. Optional step at the very end, we can buy our own domain name. But again, that's
optional. One quick thing. Why did we sign up for
Superbse or resend? Well, resend is going
to be useful in this project because we're
going to have a contact form, and resend is needed for that. When someone uses the
contact form on the website, we want the client to
receive that message, right? So that's what resend is for. SupAbse is great for giving users an option to
register an account. It will handle all the
complicated database stuff, and through the way
we set everything up, it's going to do
it automatically. Supabse is for later on. For now, we'll finish a solid website from
start to finish, and then we can chat more about complicated
things like databases, payments, registration,
and whatnot. For now, let's get to work. Let's publish our first website.
18. Let’s understand the prompt: Welcome back. Here's the prompt that we're both going to use. You have it attached.
And in terms of detail, I would say it's
a six out of ten. If you take this
natural sounding prompt and try to improve
it in chat GBT, for example, you will get a prompt that's a lot more
detailed than technical. Typically, this helps, but a complicated prompt would
be a bit overwhelming, so I decided to stick to
something that sounds natural. We walk, then we run
step by step, right? Now, one of the issues
is this in simple terms, I say blue, right,
blue and white. That's the color
scheme. But usually, you should provide color codes. Blue can mean
absolutely anything from a super light
baby blue to a dark, intense navy blue. So
keep that in mind. The more details that you
give, the better the result. I want to remind you that even if you do
everything perfectly, even if you copy
paste my prompt, your website is going to
look different than mine. And that's just how
these models work. And another thing, it's
very likely that you will have different issues than the ones I'm going to have. And that's totally normal. Again, I don't have
a crystal ball, but I've been working in
Windsor for a long time, so I know that this
is inevitable. Okay, so set up a new folder and the new project in
windsurf the basics. Please make sure you have all the setup done from the
first part of the course. GitHub, Python, no JS, the works, Power Shell,
Docker, et cetera. Speaking about Tech, I wrote
a few things in the prompt, use next JS and tailwind, resend for the form, and then GitHub and Versll. So I clearly mentioned these
things, and here's why. So when you start off, you write a basic prompt, make me a website, right? And you see how certain models, the smarter ones, at
least, talk to you. We already saw how some
chose basic HTML, CSS, and JavaScript, while others smarter ones recommended
exactly what I wrote here. So here's the thing.
If one model prefers to use this textag then
make a note of it. And then the next time
around, suggest it. And that's exactly what I did. I spoke to a few coders, senior ones, and I asked
them, why tailwind? Why not this? Why
not that? Why react? Why not this? Why not that? And in short, these coders
told me the following. Everyone has their
own preference. So like BMW Pepsi and Android, other people like Mercedes, doctor Pepper, and
IOS. Who's right? Nobody, of course.
It's what you prefer. It's the same thing here. So if this model prefers to
use these specific text tags, Okay, let's go for that. Now, the next thing
about the prompt, I asked for a PRD, a product requirements document. This is so the model can clearly tell us what's
about to happen. The PRD sounds fancy, but it's sort of
like a checklist, if you will, so you
know where you're at. So that's the PRD.
It doesn't hurt, so always have it in there. Next, I wanted to add images. While we could use an MCP to
download some automatically. I actually did this splash.com. I selected a few photos that
would work for a dentist. By the way, keep in
mind, it's a filter. Some photos are
free, some are paid, so make sure you use the filter. Okay. And then I switch to people to get some photos
for all the reviews. So after you set up your
project on your drive, you should copy the address and paste it here in the prompt. So this is something you have to do. You
have to replace it. This is the first one here, and here's the second one, which what I did was, I put a folder
inside the main one. Just to be clear, you
download photos from Osplash. You put them inside
the folder anywhere. I called the TMG, and I put it on my desktop here. Next, we have to move
this folder from the desktop to where the
project in WinSerf is set up. In my case, the project in Winserf is set up in D Dentist. So that's where we have
to paste this folder. Now, to get an address from
any location, use this area. In my case, it's D Dentist IMG. So copy it with Control C, then switch to the prom
file and paste it. Here it's already set, but I'm going to paste it underneath so you can
see it, so it does work. That's how you get the address. And remember, in Winserf
we opened dentist. That's why we're adding
the photos there. That's why we're not leaving
them on the desktop. And for the reviews, same thing. Go inside the folder and
click here to see the path. Copy it and then paste
it in the text file. Okay, let's continue.
Okay, the rest of the prompt is just
basic information. The only major thing
that I'm asking for is a form to
make appointments, but it doesn't have any
advanced functionality. So I didn't include a drop down for the services that
the client might want. I didn't include the hour
that would require us to have the doctor's schedule when he's busy, when
he's available. So what I did was I chose the
absolute simplest version, a simple contact form. Plus, I added the phone number so they can pick
up calls that way. The idea is this, you could sell this website. As long as they have someone answering their
phones and email, a basic contact form will
work. I promise you that. Now, the cabinet can
call the client back and ask for more information
and set up an appointment. So I repeat, even though
this is the basic, the simplest form,
the simplest version, you can still sell this. But of course, you can also add more features
and functionality. You can use this as a foundation and then
probably adapt it, sell it to vets, to restaurants, to lawyers, anything that you can think of. Again, this landing page is versatile and you can make
it work. Let's get to it.
19. Start the project: Come back. For this project, I'm going to use this model because I quite like
its personality. If a much newer one
isn't available, please use the same one. No matter what, you are going to encounter issues that might
not show up on my end. So please be patient
and ask for help. Okay, let's get started. It's off to the races. It's fascinating to
see how the model thinks and how it
often makes mistakes. Like, it's trying to
create a checklist, but it didn't make
the folder first, which is quite silly, but this is the worst it's ever going to
be. Keep that in mind. In a few months,
this will take off, and this model is
going to look like Windows 95 if you are that old. Okay, we have the PRD, and this is actually
quite detailed. I can see in the
technical requirements that it understood correctly
what I wanted to use. So next JS, tailwind, and so on. Again, I'm not a developer, but if this model
likes to work with those technologies,
sure, why not? Okay, I checked them out. They're modern and they
have a lot of benefits over the simple basic CSS
and HTML website. So yeah, overall, all good. Okay, we have a first
command for the terminal. You could potentially
set up windsurf, so all of these would
run on their own. But I like to review them and accept them
individually one at a time. It's a good way to
learn. One thing. If you see yellow here, it means you should wait. But as of now, I've seen countless cases where the terminal just stopped. And, you know, we just wait. Nothing is actually happening. Okay, the model is running, but there's nothing
happening in the terminal. It's not installing stuff, it's not moving
stuff. It's stuck. So in these cases
where I'm just stuck, what I like to do is this, I type in one single letter in the terminal,
and I hit Enter. Usually, I use Z. Now, that's obviously not a correct command, but it does seem to
wake up the model. If you now check the
color, it's green, which means it's done, and now it can continue. So this is without stopping
the model and restarting. To be honest, I have no idea
if this is a valid approach. I've tried to see if
I can prevent it, if I can stop the
terminal from freezing, but I couldn't find anything. So what I did was I came up
with something on my own, type in any letter
and hit Enter. But here's where you
got to be careful. You actually have to hit
Enter in the terminal. The model wrote the command, but it's waiting on
us to hit Enter. This is not super obvious as other times we don't
have to do anything. So that's something
you have to be aware. If nothing is happening, but the model is still running, it may be waiting on you. Okay, so check the terminal
and see if there are any instructions or if you're
just supposed to hit Enter. Now, after the while, the same thing happens
yet again. It's stuck. So I come out with my
Ziki, I type it in, I hit Enter, and just like
that, the model continues. Going back to it, I quite like this model because it's
quite independent. One prompt can give you
tens of actions in a row. It knows what I want.
It has the PRD, so it just execute
stuff step by step. But funny enough,
after 20 steps, you have to tell it to continue. It would be bad for business if one single credit got you a
completed website, right? So when you hit Continue, you are going to
use another credit. Now, to be honest,
we shouldn't get bogged down into credit use.
It really doesn't matter. Just use them. Don't act
like they're precious. They're meant to be used. Now, the only time I was
actually upset was with an open AI model that was constantly saying it
was going to do stuff, but then it didn't do it. Or it kept telling me
to do that on my own, even though it was more than capable of doing it on its own. So that's something where you feel that you have
scanned, you know? But this model, just look at how many steps this model went
through without stopping. Imagine if we
switch to one where it needed us to hold its
hand every step of the way, say continue after
every single step, that would be nasty. But yeah, here's an issue. I praised this model, you know, but now it's installing
super Base, I think. And that's weird because I
didn't tell it to do that. And here's another
automatic stop. So after 20 steps or so, you're going to have to
hit Continue on your own. I'm also going to accept
all the changes so far. That's what I
recommend you do as well. Now, here's the thing. I decided to wait for the natural break and
then ask about Superbse, which is not in
the requirements. Now, I could stop it right now, but there's a chance that may produce more bugs, more issues. And I think I did the
right thing because the model seems to actually
have a lot more work to do. It's in a train of thought, and stopping it to remove super base might actually
interfere with it. Of course, even if you restart your computer
or whatever else, you have your
conversation history, and any model can review the entire code base and
it can continue to work. But I found it's ideal. You let it finish its
train of thought. It seems like it has something
like 15 other steps, so I'm going to
leave it to a thing. Okay, now here's the
interesting part. I actually did a bigger
project for a dentist, and I used the same model
and the same program Wser I think I may have used a similar
name for the folder. Now, windsurf has this
ability of creating memories. So after it works
for a while and it achieves certain results,
it's going to make a memory. This helps it consume
fewer resources. So think of it like this. Say it can only remember 100 messages in our
conversation, right? This is just an example so you can understand how it works. So as you add five
more messages, the first five, the
initial five get lost. It's like a fog of war if
you're into strategy games. But what if those
initial five messages contain something important? Well, that's where a
memory comes into play. You store that key
information separately, independent from
those 100 messages, and this makes
everything smarter. In a way, it's like you telling your doctor you're really
allergic to shellfish, right? Now, the doctor may forget about other stuff
that you're saying, but when the doctor
checks his notes, he's going to see
that you're allergic and he's going to
act accordingly. Now this is, of course, an oversimplified explanation,
but I hope it makes sense. That's what memories do. They help windsurf to remember
key pieces of information. Now, here, when I use SupaBse, I had a lot of issues with it. It wasn't working well. The model saw me
struggle with it. It kept trying to make it work, and it was not going well. Super Base was not working well. And after trying for a while, it made the memory about it. And now that memory
came into play. It's actually super
exciting and fascinating, even though it's not
ideal for our project. Let's take a pause, and then I'm going to
continue in a moment.
20. How to deal with bugs: Welcome back. Bugs
are inevitable. You might say that if artificial intelligence
is going to write it, 100%, it's going to
do it correctly, right? But that's not the case. Not at this current state. Bugs are inevitable, but the good news is they're
fairly easy to fix. So back to the project, our model did a pretty good job. It created the entire
website with very few proms. So without spending a
whole bunch of money, you can tell that it's
done when you see an overview of what
it's managed to do. Now, some models don't offer this insight,
but this one does. You can also see these
two important buttons, open preview or open in
an external browser. Now, I like to use
an external browser because that's how most people are going to see the website. So I prefer that clean
look with no distractions. Okay, that's an error, but we'll fix it in a second. So back to Windsor for now. Now in the overview, you can see the model tells us the next steps two and
three are all good. Github and versel. Okay? Then test out the form
so it works correctly. Cool. But step number one
doesn't make any sense. Superbse should not be here, even if you're not technical. You can clearly see that's an issue because it wasn't
mentioned anywhere. But let's say you
have no idea, right? In the same way you
don't know about react next JS,
tailwind, whatever. If the model chooses them, maybe it knows best, right? Well, here's the thing. Talk to it like you would
talk to a developer. Just ask it exactly this. Why did you use Super Base? For the form, I said, we should use resend. And then see what
it says, right? By the way, that's
how I learned. I asked it about react, next JS, VT, tailwind,
all those things. I asked the model about
it. Why did you use it? And the model said,
It's a great choice. It's best practice,
so on and so forth. It has many advantages. Okay, so the model can say, Hey, I made the right call. I made the right choice if
that does make sense, right? Well, here, it's
actually quite funny. It says, I'm absolutely right. And I apologize
for the confusion. It implemented Super Base because of its memories.
And here's the thing. It's going to fix
the code on its own. Notice, it's not even
asking us to validate it. It knows what it did wrong. It knows what it has to
do, and it just does. And now lots and lots of
files are being edited. Now, I'm sure that you're not going to have
this type of issue, but I really wanted to
show you this case. I wanted to show you that some issues are
totally unexpected. But, yeah. Okay, let's continue. Fast forward, and it's done. So it replaced a lot of things. It updated the documentation,
quite a lot of stuff. Now I'm going to accept it, of course, but here's the thing. I bet the error in my
browser is still there. So let's have a look.
Always refresh, by the way. But, yeah, it's still here. So here's what you need to do. So select all this
text and simply paste it into windsurf With
or without context, it really doesn't
make a whole lot of difference in this case. Now, here's the thing.
Immediately, the model understands the issue and
it begins solving it. In the meantime, let's
talk about resend. Now, to keep it short, we need to connect our
project to resend. It's like plugging it in. Now, for that to happen to
connect it, we need the key. So our website is going to use that key to get
access to resend. That means it will be
able to talk to resend, and that will allow emails
to be sent back and forth. Now, to get the recent key, it's actually as easy
as clicking a button. As I said before, typically, you only get to see it once. If you lose it, you're
going to have to make another one.
Now, no worries. There's no cost, but it's not a great idea to come back
to resend and find 15 keys, and you don't know
which is which, right? Which one is for this
specific project. Okay, now, another thing, I'm going to blur
my keys because it's similar to my
credit card number. Yeah, once you have it, you have to add it here and
you have project. You can actually tell
Winserf to add it for you, or you could potentially find that file yourself
and paste it in. Usually, alli sensitive
information is stored in a file called dot ENV. Here's where I'm going
to paste my key. Now, there are two
other fields here. These are specific for resend. From email is our website. You can see that actually the model created a
fake email for it, but obviously this is not real. It's not going to work. And to email is where the form is
going to send the message, basically the dentist, the
receptionist, whatever. So in this second one, I'm going to put my email
address so we can test it. And in the first one, we'll have to use
a special address called delivered at resend dot V. When you decide to use Super Base or firebase or
recent or whatever else, you're going to have to learn a bit about that
platform yourself. Okay, let's go back
to our website. So it's now live. But is it what we want? Let's have a look in a second.
Let's take a quick break. Y y
21. Make the form work correctly: Welcome back. Our website is looking okay at a
first glance, right? So what we see here
is professional, quite clean, very well
suited for the dentist. There are some issues with text. That's a bit too light
and you can't read it. And the photos don't seem
to load up correctly. The site is in English, but the prices and names
are in my local language. I guess it did that because it saw the address
of the cabinet. A biz change, something to fix, but interesting
nonetheless. The sticky bar at
the bottom is cool. The map works well. So overall, this makes me happy.
This is a great start. Now, the first thing I want to do is I want to make sure that the images load up and make sure the form is
working correctly. So let's type that in. Now here's the deal.
You can provide a list of changes in
one single prompt. You could even write ten, 20 things that you want change, and there's a good
chance that it will execute them correctly,
every one of them, right? But if you want to be safe, you should take it step
by step bit by bit. Usually, the model
concentrates a bit better and you get more
predictable results. Okay, my prompt is good to go. Let's see what happens. Make sure you work along on your second
viewing, by the way. Okay. By the way, one thing, you may have seen something where you can talk
to a microphone, and then windsurf understands. So you can talk to
the AI directly. But I actually
don't recommend it. For the vibe coding, it's a good idea to write out
your thoughts, review them, make changes, add more details, cut out stuff, and then
submit your prompt. Talking may be great
for the other cases, but I don't like to use
it for the vibe coding. Okay, now for the photos, I think that's going to
fix them quite fast. But after the while, I think we're going to have
the same hanging issue. Yes, here you go. The terminal stopped. We can see it copied
all of the files. Okay, all good. So then
what are we waiting for? So again, type in any letter
Z or whatever, head Enter. And now, yeah, it's
back on track. It seems this was a bit more
complicated than I thought. There are a lot of files
that have to be adjusted. But yeah, overall, we really
don't care that much, right? It's not even a half an hour, and we already have
something super solid. So let's continue. Let's fast forward. So the model is done, right? It made a lot of changes. It added my key for resend
and so on. I blurred it out. But because it's done, I'm really tempted to go back to my browser and refresh my page. That's
instinctive, right? But here's the thing,
it won't work. This is a great teaching moment. If you're not paying attention, you may argue with Windserf. Hey, it's not working.
It's a blank page. What's up? But here's the thing. Actually, it restarted
the local server and it slightly
changed the link. That's why you should use Open External browser just
in case that happens. Okay, let's quickly test out the form and see if that works. The images, I'm
sure they'll fine, that shouldn't be an issue. I'm going to blur my
details because the browser saved my actual details.
Okay, but here's the thing. It's actually not working. There's an issue. You can see that in the bottom
left. One issue. So click on it, and we'll
see there's a message here. The message doesn't make
a whole lot of sense, but let's copy paste it into windsurf. And here's the thing. Even if the message
is not that useful, the model may review
the whole code. It may review a bunch of files. And yeah, that's exactly
what's happening here, step by step, checking
out any potential issues. And actually, I
love this approach. I think it's fantastic. And yes, it did see
there's an issue, and it's about the domain name. It's not verified, and
resend doesn't allow it, which again, it's awesome because this is a
very quick fix. In the central part,
you can see how the original line
with smile care.com, which doesn't exist is
highlighted in red. This means it's
going to be removed. The next one is with that email address on
boarding at resend dot DV. Great stuff. Just to be clear, I didn't pay attention, and I left that domain name that doesn't exist, smileca.com. That's a fake domain
that doesn't exist, that the model put
in on its own. Of course, resend won't allow it because
it's not verified. It's a fake domain, right? But we were lucky enough
because Winserf replaced the fake domain with
the correct one with the one from the documentation with
the official one. So that's why it wasn't
working because of that fake address,
smilecare.com. To be honest, here's where
I made a bit of a mistake. I was arguing with Winserf that it's still not working,
but here's the deal. I have lots of email addresses. I forgot which one I used
for this resend account. So for testing purposes, you're allowed to send emails to your own address that
you used to sign up. Now, because I got mixed up, I tried a couple more times, and I was getting
the same error. In the end, I made this change. To email, the second field, I set up the correct email. I used the one that I used
when I signed up for resend. So that was the issue. So that's one of the dangers
I was talking about. You mess up. It's
totally on you. It's your problem, but you
keep speaking to Winserf. You keep speaking to
the model, right? And the model has no idea. It's trying to review the code, it's trying to see
any potential fixes, workarounds, it's going
to try various stuff. But obviously, it's
going to fail. It's not going to succeed. It's on your end.
It's your problem. Now, the great news
is that you can see the message right
here in the terminal. Hey, you can only send test
emails to this address, and it actually tells
you the email address. So as long as you keep an open mind and you don't
let frustration take over, you should be fine.
I was quite chill. I was looking at the
terminal on the right side. I was exploring potential fixes. But the thing is, if you get upset and you start seeing red, you may get stuck here
for hours or even days. But I'm happy to say, you'll
only make this mistake once. Now you can use resend for all of your projects
without worrying. And just to confirm
it's working, I've opened my personal email, and yes, the email came through you can also go to resend and you can
also confirm that. So why did we do all this? Because if this was a real
client, an actual dentist, of course, he would
prefer to get all of his messages through
email, right? So congrats. The
form is working. Resend is working. Remember, add the key to the
project and keep it private. Use their special email
in the first field. And for the second field, use your email address, the one that you used
to sign up for resend. Okay, great stuff. Let's continue after
the quick break.
22. Upload your website to GitHub: Welcome back. The site is looking quite good and
it's working well. We tested the form,
and it's fine. Now, we could potentially
improve the design, but that's quite
straightforward. You go back to windsurf and you say what you want to
change, and that's that. Now we're going to do
that at the very end. But for now, I want
to show you how we can take it live in
just a few steps. So the first one is GitHub. Remember, this site is working, but it's only available
on our local computer. To publish it, we'll use Versll, but an intermediary
step is Github. More on that in a second. For now, let's tell the model that we're
ready to move on. I'll say exactly that. Let's move on to the next steps. Please upload it to Github. I'll pause. Here, I want to do the least amount of
work possible, right? So I prefer to tell the
model to use Github MCP. This is less work on our hands and fewer
potential issues. Otherwise, it may
tell us to go there, make a new project, make a
few settings, and whatnot. I don't want to do
that. Okay. Then I'm going to tell the
model I'm going to use Versll to publish it, so it can guide me
in case I get stuck. Now, over sharing is not a
problem. No, far from it. The more details, the better. Okay, and we're
off to the races. It's going to look at my
account, my Github account, see what's up and create a
new project all on its own. This is called a repository. That's the correct term
repository or repo. Okay, but you can remember
it like a project. Project, repo is the same thing. Now, unfortunately, as always, the model gets stuck. But let's bring it back with a random command in
the terminal section. Okay, just like
that with BO Track. So here's what's happening. We're uploading all of our
files from our computer, from our local computer
to the Cloud to Github, with basically
cloning the project. Now, you may not be
familiar with Github. I'm not either. I'm not a coder. But here's the cool
thing. You don't have to know anything
about Github. You're just going to use
the model in Winserf. Now, in case you're curious, you can go to your repositories and look for this project, which should be the
only one in your case. I actually have a lot loaded up because I do use
Github quite a lot. But yeah, once you see it, you can see all the files plus some instructions that the model wrote for you for you
with other people. Now, this is fantastic. Now, why does Github help? Well, this is where GitHub becomes more than
just a simple middleman. When your project
is up on Github, you've created a
Version control backup that's public or private
depending on what you choose. So step by step, what's
Version Control? Let's say that this is Virgin O. With a form that's as
simple as possible. Nothing all that fancy, right? Now, we may create a much more advanced
form where the visitor, I don't know, he can
choose the services, he can choose the time and
date and so on, right? Something a bit more advanced.
And here's the thing. We make that. We then bring it to the client. You make it live. But after the while, you get
that dreaded phone call. Hey, Chris, you know what? The new form is not working. I'm actually having
fewer appointments. People are not using it
for whatever reason. So let's go back to the old one because people
are simply not liking it. You can ask, Is it broken?
Is it not working? No, no, it's fine, but
people prefer the old one. Can you bring back the old one? Ah. Okay, that would be painful. You would have to go
back to windsurf, strip away all that extra code. That may produce bugs. The form may break. The entire website may break but that's actually
not a problem at all. This is where Version
control comes into play. With GitHub, you simply go back to the previous
version or any version, to be honest, because you
can have multiple ones. You can also have
separate versions, based on a color scheme, based on functionality, layouts. You can do whatever you want. You name. So Github helps
you organize all of that. You can come back to
a version that was yesterday, a week before, a month before, five years ago, it really is that easy.
And it's just like that. Now, is it incredibly simple? No, but it's not
difficulty there, because here's the thing.
You have windsurf. You have the AI on your side. Simply tell it to do
whatever you want to do. Go back to the red wind, go back to the Virgin with
the basic contact form. So that's how it works.
That's version control. GitHub gives us version control. Now, public or private. Okay, public means other
people can see you at work, can see this project. And that's super useful
if you want to get a job, or if you want to collaborate
with other people, maybe a team, something
like that, right? But if you want to sell it, if you want to get
clients on your own, if you want to have an
agency or something, if you want to be a freelancer, most likely, you're going
to keep it private. So, yeah, that's the
choice, public or private. Okay. Version control,
public or private. That's GitHub. It has
a lot more features, but in short, that's the thing. But now coming back
to our AI story, here's the scoop, here's
the most important thing. GitHub is the perfect bridge
between your local code in windsurf and deploying it online to Versll.
Here's the situation. Platforms like Versll are
deeply integrated with Github. So when your site is
ready to go live, Versll simply looks at
Github and he sees, Oh, okay, here are
all your files. Here are all of your settings. I see the latest changes.
Let me put it live. So that means you don't
have to upload any files. You don't have to
change any settings. You don't have to do anything. You simply connect Versll to your Github repo, and
that's going to be that. By the way, we'll do that
in just a few minutes. We'll connect them. But, yeah, that's how your website is going
to be taken live. This is powerful because it keeps everything
automated and clean. If you make changes
to your project later on in windsurf
on your computer, you just ask the model to
update the Github project. And when you do
that, automatically, a signal is sent to Versll to update the live version
of your website. With that extra code. It's fantastic. There's
no extra steps. You type something into
windsurf and overall, in just a few seconds, maybe a couple of
minutes, it's live, and you don't have
to worry about it. It's all wired together. So in simple terms, windsurf is where you
build the website. Github is where you
store it on the web, and then Versll is where you make it live for the
world to see it. Think of it like a
hosting company. H, by the way, you have step by step instructions
in the cascade, so you can read up
and take it slowly. Okay, great job so far. I'm really happy you've
made it to this point. Let's take a quick break, and I'm going to see
you in a second. Remember, work along on
your second viewing.
23. Publish your website with Vercel & fix bugs: Welcome back. Let's recap. So we created a website
by using modern Tech. We made sure it works well. We then uploaded it to Github, and now we're ready to publish it so we can
share it with the world. Now, developers don't
really say publish. They say deploy. So let's deploy with Versll should already have an account if you've been following along. Now, in Versll you may be
asked to connect Github, but that's super easy. It's just a couple of clicks. Nothing major, no key,
nothing like that. As long as you stay
logged in, you golden. Okay, this is where
the fund begins. We want to import the project because we've connected
Versll to Github, we see all of our projects.
This is my name here. Well, the name that I put into
Github, so I recognize it. And more than that,
I can see there's a new project that
I just uploaded. So what I'm going to do is
I'm going to hit Import. Here we have just a few
things to take care of. So Versll gives a project name on its own, and
that's totally fine. It recognizes the framework. Next JS. Okay, good stuff.
We don't really care. The only thing that we need to add is this
environment variables. And that sounds complicated, but actually it's what
windsurf is telling us to do. So go back to it and you
will see you have to add the API key and two fields
from email and to email. So this is actually
quite simple. It's a matter of copy pasting, and the AI tells you exactly
what you need to paste. So the first part
in the left field, the name of the thing,
and on the right side, the value, AKA the key. So let me do just that. Again, I'm going to blur my
key for safety purposes. Oh, make sure you use
the recommended values. So in the from email field, it's the default address. Delivered at resend
dot Dev here, I actually got confused by Windsurf and I used
another address, but I think that works as well. Okay. And in the two email, it's the email that you
use to sign up to resend. And now we're ready to deploy. Use this big button to publish our website.
But here's the thing. Please be aware it
takes a few minutes. Sometimes two, three,
four, it really depends. Now, if you scroll down, you can actually see a timer
and the current state. If we are lucky, maybe we'll get a success message in about
40 to maybe 50 seconds. But in most cases, to be fair, is going to fail
the foods few times around. Now, let's see if we're lucky. Okay, no, it actually failed. We can see there's a
few issues with it. But here's the thing. We have a copy icon in the top right
side, so let's use it. Funny enough, I can see it's
related to the testimonials. I've had something similar in the past. Here's
the funny stuff. So when you add testimonials, you typically add a quote to showcase what people are
saying about the business, right? A quote, right? Well, those quotes,
that character, well, if it's not formatted correctly, those characters break the code. So it's actually super
silly, but, yeah, I had to use five
to ten prompts just to review the entire
project and clean it up. While some of these models
are incredibly smart, sometimes they make
silly mistakes. But yeah, back to it.
Here's what's happening. So windsurf is checking the files and fixing
just about everything. After it's happy, it's
going to push to Github, which means it's going to update GitHub with the latest
code with all the fixes. Of course, the
terminal may stop, but type in anything, hit Enter, and it should resume.
Okay, good to go. But yeah, once the code is uploaded from our
computer to Github, then Versll is also going to receive the
new code automatically. Okay, the model says it's done, and it says we should
try again in Versll. Okay, I'm going to click
here on GoTo Project. Here, I know it's
your first time, but it's actually quite simple. If you notice this
part, it's yellow, which means it's trying to
build the project again. So it's an active process. But yeah, after a few seconds, it fails again, so it's red. Again, this is typical. So let's click and see the log. It seems to be very similar. Yeah, it's probably the same
issue, but here's the thing. Don't bother with reading
the log too much. Just copy paste it
back into Winserf and we'll see what's what.
Take your time with it. And by now, you
should be used to this flow where Winserf
is fixing stuff, the terminal gets stuck, you resume it, and then everything gets uploaded
back to Github. Okay, now, let's go back to Versll and here's where
you should focus. This is my account, and this
is the current project, and this is the current
deployment, which has failed. So we go back to the project by clicking here on
the project's name. Remember to pause as often as you need to the second
time you watch the video. Okay. Now, once you click, you can see the new version
is now trying to build. Because we updated GitHub, Versel saw that, and it's
automatically publishing it. Now, of course,
you can stop that, but yeah, this is usually
what you want to do. Now, let's see if we're lucky. We can wait here or we can click on it. Let's
see what's inside. So the status here is in yellow, so we got to wait a bit more. But yeah, after about
a minute or so, Okay, some more issues. Again, classic.
Now, funny enough, it's about super Base. Okay, I thought we removed it, but it seems some files still
have something about it. Now, this is a bit
frustrating, right? The AI did a lot of bad
stuff in our project. Now, on your end, I'm sure you won't have this
specific issue. Maybe you got lucky and maybe it worked on the
first time around. But on the flip side, I
think this is useful. You get to see
debugging in action. Now, I didn't want to remove these issues from
the recording from the course because I think it's essential that you understand
that this is normal. This is totally fine. It's expected. As you get more comfortable
with this flow, you'll be ready for anything. But you got to be relaxed. You don't have to be nervous.
You don't have to see red. You don't have to get angry. You don't have to worry
about the credits and how you're consuming money. That won't help. But yeah, fast forward and
another failure, but I won't despair. I'm going to keep working at it, and I'm going to
continue to update. I'm going to continue fixing it. Even though it's costing me some credits and quite a few
minutes, I'm fine with it. Try working with
a freelancer from a different part of the
world for, let's say, 50 bucks an hour and you'll quickly see how this
is infinitely better. It's not awesome. It's
not a walk in the park, but the alternative
is far worse. But yeah, after so much hassle, we finally have a green light. The website is ready. It's live. You can now click on it here and see it in action. And here it is in
all of its glory. You can now share it with your friends and family.
But here's the thing. Before I do anything, let's see if the email comes through. So Wserf suggested it, remember, we used a different email
we didn't use delivered. We used onboarding. So let's quickly have a
look and see if this works. And yes, victory. The form still works.
The website is live. The form works.
Congratulations. Okay, let's continue after the quick break.
24. Publish the website on your own domain name: Welcome back. We
managed to upload our website to GithHub and
then deploy it with Versll. If you go back to Versll, you can see a temporary
address here. It's not beautiful to look at, of course, but it's live. It works. You can
share it with people. You can now stop, go back to Winserf and make a
few other changes to improve the website, add more pages, more features, improve the design, translate it to your own language,
the works, right? But just in case you're curious, I want to show you how you can move from a temporary address, an ugly link to something
like cresbarn.com. So your own domain name. Go back to Versll
to your project, and you'll have
something called domain. Click on it. This is exactly
what we're looking for. Here, I can see the one Versll
made for me on its own. Now, again, this is not bad, but I want something
that's my own. So let's click on By Domain. And after the few seconds, you're going to
be able to search for something, your
own domain name. Now, the best ones, of course, are already taken, but you
can use your own name. So I'm going to
write Chris Barn, but I know that.com is already taken because
I previously bought it. Now, what I love about Versll is that it's showing you lots of potential options from.ai to something a bit more
classic like.net. These are all the ones
that are available, and you can make an
informed decision because the prices
are clear as day. Obviously, Chris Barry and.ai at 149 bucks is a bit
too expensive. So I'm going to go
for something else. Let's go with FYI, which actually means for
your information, FYI. That doesn't make a
whole lot of sense, but hey, it's $6, six bucks. So let's click on it and buy. As you can see, it's six
bucks and some change. Okay, that's per year. Okay, cool stuff. I'm going
to click here to buy it, and now I have to confirm by clicking again.
Okay, no worries. Now I'm going to have to add my credit card and my
billing information. This is going to take a while. But yeah, no worries. It's straightforward. I also have to double check
with my bank, of course, confirm the transaction, the
works. Nothing too major. It's like any other
purchase online. Now, here's the thing. It actually gave
me this message, which is not good.
But here's the thing. I saw the money was taken, but yeah, Versll
gave me this error. Now, in these cases,
you got to stay calm. These are serious businesses
and you shouldn't worry. So let's go back to domains. Then yeah, here's mine. Chris Barron FYI. All good. I'd like to remind you that Versll replaces your
hosting company. So there's no need to
buy a hosting plan, a VPS, a shared server,
or whatever else. Okay, now let's go back to it. Let's go back to our project by clicking here in
the top left side. I only have a dentist project,
so let's click on it. Okay, we're good to go. Now, let's click on Domains and we're back where we started. But this time around, we
won't buy one. We'll add one. So click here and choose the
one that you just bought. For me, that's Chris Barron FYI. There's one setting here that's recommended. Leave it checked. Okay, now I won't go into
it into what that means because that's going to
sidetrack us. Leave it checked. Okay, hit Add Domain, and you'll have to choose what version of the project
you want to publish. Of course, we're
going to keep it simple the current one
that's in production. Hit safe and now de have a
few instructions for us. Nothing major, but we will have to do
something on our own. So far, it's been easy sailing, but it's now on us to
add this C name record. Again, you don't have
to know what that is. Let me guide you through
it step by step. So what you need to
do is make a note of these three bits,
these three items. You can copy them in a
notepad or whatever. Now, the first line
is already set, so no worries about that. We only have to do
the second one. Now, in case you're
curious and you want to check the status
without doing anything, obviously, it's
not going to work. Invalid configuration,
of course. Clearly, it's not working
because we didn't set it up. So here's what you need to do. Go back to the domains page. Look at the navigation here. You should find it
without too much trouble. Then use the dots on the right
side of your domain name. Here, we want to configure
it. We want to set it up. Scroll down a bit,
and under DNS DNS, we have these fields to do which we can add those
details from before. To be honest, Verl could
have done this on its own, but, hey, that's fine. So put in WWW in
the first field. Then for the drop
down, select C name. And then finally for the value, add that text, but make sure
you add the dot at the end. The dot actually is needed. Okay, don't change
anything else. Instead, click on add and
believe it or not, that's it. You're going to get a success message in the
bottom right side, and you'll be able
to see that entry is now saved. Now,
here's the thing. You may be excited to go and visit your own
domain name, right? But it's not ready.
It's in the oven. This takes a while. Typically,
from 4 hours to 24 hours. That's the official guide. So don't be disappointed if
it's not working immediately. For me, it took about
ten to 15 minutes. But remember, you
got to be patient. Don't go changing stuff. Don't complain to Windsor for
versel that's not working. Take your time with
it. Stay calm. But yeah, here you go. Let me fast forward. Chris Barron is now live. The website looks good. We are golden.
Congratulations. You now have your own website from start to finish without knowing
how to code. Ah, one. You may refresh
like crazy, right, in the first few
seconds or few minutes. It takes a few minutes for
the SSL to get installed. So your anti virus may show you some warnings
again at the beginning, or you may get a
broken website if you constantly hit a
five if you refresh. But after the couple of minutes or maybe a couple of hours, it's going to work perfectly without any warnings
or whatever. This is totally normal. Any classic coder or any classic hosting company would work in the
exact same way. So there's no downsides. Okay, let's take a
moment and celebrate
25. Making changes to our live website: Come back. It doesn't
matter if you purchased your own domain name or if you're using the one that
Versll created for you, you can still continue
to improve the website. For me, there's an area with super light ray text
that's hard to read, so I got to fix that. So let me show you how easy it is once everything is set up. Again, this is
going to work with a custom domain or with a
basic one that Versll gave. So first of all,
I'm going to make a screenshot from Firefox. You can use any type
of browser plugin. It's really up to you. I know some people use
Safari, Chrome, brave Edge, and a whole lot more, so I won't get into plugins
that make a screenshot. Just make one screenshot
and that's that. Then drag it into windsurf into this field. It's going
to look like this. But just so it's
not underwhelming, let's make a big change, something that's going
to be really dramatic. So let's ask the model to change the color scheme
from blue to red. This should make a
huge difference. That's going to
be quite obvious. Okay, let's hit Enter, and we're off to the races. So the model analyzes the entire website and
it prepares everything. It's actually not as simple
as I thought it would be. So the model is changing
quite a few files. Now, to be honest,
do we really care? No, not really. It's doing everything on its own
with one single prompt. Though, to be fair,
after the while, we will have to
spend another credit because at this pace, it's actually going to
quite a lot of files. And yes, here it is. As a reminder, after
about 20 or so steps, Wind Surf asks you if
you want to continue. That will cost you
another credit. And yes, it will continue, and, yeah, it's doing a lot. But, yeah, I hope you can sense
how you could potentially break your website by
changing so many files. When you're working with so many files and changing stuff, that may be a bit dangerous. And here's the thing.
At a certain point, the model does take quite some
time. You can see it here. So I was actually worried
that it's stuck right now. But yeah, previously, the
terminal was the problem, and we just typed in any
letter, and it was fine. But in this case, it seems the model is thinking
for the while. But no, we're
lucky, we're lucky. It's all good. I guess the file was quite
big with something, and that's why it
took some time. Again, you have to be relaxed. Don't be nervous about
it. Don't get jumpy. Again, I'm honestly
surprised, though, at how many files it's changing for the
simple color code. This is likely related to the
text structure that we use. Here's where some coding
experience would come in handy. This is why developers have paid six figures per year or
they used to be, anyway. They know how to optimize stuff. They can build things faster
with fewer resources. But then, more importantly, they can build projects
that are easy to manage. So I've had projects
where I could edit one single colored
code in one line, and the whole website
would get updated. Here, it seems
like we're dealing with well over 15
files, maybe even more. Now, again, do we actually care? Does it impact us? No, not really. Would
the client care? No, of course, not, not really. It's a few extra minutes for us. Maybe a few extra prompts, but it's not actual real work, you know, we're not
actually working. We're just waiting. Okay, it seems we have to
continue once again. But I think we're fairly
close to the end, I think. Yeah, fast forward word. And yeah, let's push
everything to GitHub. Of course, it does that automatically, so
that's super cool. That's the power of setting
things up correctly. I can't stress that enough. I'm sure you weren't all
that excited to install all of those tools to set up
all those MCPs and whatever. But, yeah, it's paying off. And it looks like it's done. You could look at the
website and refresh, but obviously the
change is not going to be instant because
it's live on a server. It's live on the Internet. So let's go back to Versll
and see the bill status. Now, in general, after you
manage to deploy it correctly, there's a very good
chance it won't fail. It's highly likely that
it will always run as long as you don't make
any serious major changes. Now, it takes about
the same time to build 30 to 50 seconds. But yeah, overall, I think it's going to
get the green light. And yes, here it is. Let's check out the website. And yes, it's red. To be fair, it's not just red. It's shades of red. So I could potentially see
why it took so much time. But, yeah, one prompt, a few continues to be fair, and we've made a
significant change to our design. And
it's all live. To be fair, the great text, it seems it's still there. I'm not sure why the
model forgot about it. But yeah, let's take
another screenshot. But this time around, I'm
going to be more direct. I'm going to say the following. Make this text 22, two, and that's a very dark color
code that I know by heart. This guarantees a solid
result. Of course. Even if it's a small
change, here's the thing. We still have to push to Github. Versil has to do
another deployment. So ideally, you would make a lot more changes and
then push to GitHub. But yeah, for the moment, for testing purposes,
that's totally fine. So no worries. Overall, we
are flying. We are done. The text is now dark gray. It's easy to read, and we have a solid website
from start to finish. And of course, you can continue to update it in this fashion. When you're happy with it, push it to Github and that's that. You don't have to push after every single change,
it's really up to you. Yeah, let's take a quick break. Congratulations again. This is a solid win.
26. Swimming in an ocean: Welcome back. I want to
point out something. When I was learning
to vibe code, I tried using projects that my form of developers created. These guys were skilled developers with a
lot of knowledge, but they made one big mistake. They didn't leave any
notes whatsoever. Now, in GitHub in my own GitHub, I can access 30, 40 projects that they made, but here's the thing. I don't know
anything about them. So what I did was when
I first got started, I tried updating them
and making them run. They were made in 2018, 2019, so obviously quite old. And here's the thing. In short, I failed. I spent a lot of time,
a lot of credits, and it was very annoying. And then I tried to
make my first tap. So then I switched my
approach and I said, Okay, let's make my
first tap on my own. But I'm going to use an
existing code, right? So I'm going to use
something from Github. Remember, some
projects are public. That means you can copy them and you can build on
top of them, right? And I figured that would save me quite a lot of time
and hassle and, of course, wasted credits.
But here's the thing. I failed yet again. And it's not the failing
that's the problem, it's how I felt,
and that's what I want to share. Here's the thing. I was working with
open AI models, models that were free at
the time, four and 4.1. And I was constantly
squashing bugs, fixing parts, after
parts, after parts. Now, the issue was, I had
no idea if I was on BG five out of 50 or
five out of 50,000. I had no reference point. It was like swimming in the ocean with lots
of fog around me. I couldn't see the shore. I couldn't see the beach. I didn't know if I was swimming
in the right direction. Maybe I was a few paddles
away from the beach. Maybe I was miles away. And it was super tiring, using prompt after prompt, trying out various things. And that's the issue. I didn't know if
I got any closer, if I was closer to the end goal to actually
making the project run. I had no idea. And
here's the thing. If you get stuck and you
are not sure about it, you can always start
a new conversation. You can just click here. A fresh model is going to
be that much more helpful. For example, if I were to add the gallery section
to dentist website, I would start a new
conversation by clicking here. This is the recommended method. You break up the
project into parts. We now have a foundation.
We published it. Cool. Then we may want to
add whatever, a gallery, then Google analytics tracking, then maybe a more
complicated form. Okay, well, those things can be three different
conversations. Keep in mind, you're using
the same amount of credits. There's no downsides, but a fresh conversation
means a fresh model. It's not tired from
the previous prompts. But to come back to my point, if you feel like
you're swimming in an ocean and you have
no idea where you are, you need to take a
break and reassess. You need to change models or
start a new conversation. Me, so far, I tend to think that starting from
scratch is a lot better. Have the model, create everything
from zero on your own. But of course, you can
reference a project. Again, for inspiration,
use it as an inspiration, and the model will
take note of that. But don't import a code, and hopefully it's going to run. Hopefully you can
build on top of that. Usually, that's
not going to work, especially at the
beginning of your career. So my advice start with
small fun projects, then build your way up. Don't tire yourself by swimming into the unknown
for the way too much. Yes, have patience. But if you feel like you're
not making good progress, you should pause and look
for the another way.
27. What's next?: Welcome back. Congratulations.
You made it to the end, and that's a big deal. You didn't just build
a few websites. You actually built the
skills behind them. You learned how to guide
the AI with clear prompts, how to style with purpose, how to make things look
better and feel better. And that's without diving
into complex code, without any coding whatsoever. Most importantly, you practice
a little bit every time, a few prompts here and there, a few tweaks here and there. And that's how you get good. Not by watching
but by practicing. So what now? Well, you
got to keep going. You got to pick a
brand new idea. You can create a brand,
a personal project. You start a new folder,
and you simply work. You try out the prompt,
you paste it in, you polish it, you publish
it, you make it yours. Basically, you're ready to build stuff for real for yourself, then for clients, maybe
just for the fun of. But whatever you do, remember this, you
have to have faith. You have to have patience. And yeah, you don't really need a developer to build
beautiful things. You just need to know how
to talk to these tools. Thank you for spending
this time with me. Go create something
that you're proud of. As things change, I'm going to continue to
update the course. I'm going to add new projects, I'm going to add new
features, more exercises. But, yeah, for now, you got
to continue to practice. You've got this. This is Chris Barron signing
out. Thank you so much.