Vibe Coding Fundamentals In 33 minutes

I learned how to vibe code for you. So

here's the cliffnotes version to save

you the hundreds, actually probably at

this point thousands of hours I have

spent watching YouTube tutorials, taking

courses, but honestly, mostly just like

trial and error as I'm developing my own

applications through vibe coding. Vibe

coding is seriously a gamecher and has

fundamentally changed the way that I

code and develop apps. Which is why in

this video I'm going to be focusing on

the fundamentals, the frameworks and the

principles of good vibe coding. Then

I'll also teach you how to apply these

principles of vibe coding with any tool.

As per usual, it is not enough just to

listen to me talk about stuff. So

throughout this video, there'll be

little assessments. And if you can

answer these questions, then

congratulations. You would be educated

on vibe coding fundamentals. Now

without further ado, let's get going. A

portion of this video is sponsored by

Brilliant., All right,, here's, the, outline

of today's video. First, I'm going to

define, vibe, coding., Then, we're, going to

be talking about the principles of good

vibe coding. I'll then show you some

examples of vibe coding in action using

Replet Windsurf. Then finally, I'll end

with some very practical tips to help

you along your vibe coding journey and

to make sure that you don't end up as

one of these people from X and Reddit

who really up. I do not want that

for you. So, please pay attention until

the end. Let's now define vibe coding.

I'm sure many of you have heard the term

vibe coding a lot of times by now. And

this is a term that was coined by Andre

Kaparthy who among many of his

achievements is one of the founding

members of OpenAI. On February 3rd

2025, he made a post on X that says

"There's a new kind of coding I call

vibe coding where you fully give into

the vibes. Embrace exponentials and

forget that the code even exists." It's

possible, because, the, LMS's,, for example,

Cursor Composer with Sonnet are getting

too good. You basically just tell the LM

what it is that you want to build and it

would just go ahead and build it for you

and some people literally just speak to

it like talk to it. Also, I just talked

to Composer with super whispers. I

barely even touched the keyboard. For

example, you can just prompt it with

something like create a simple React web

app called Daily Vibes. Users can select

a mood from a list of emojis.

Optionally, write a short note and

submit it. Below, show a list of past

mood entries with the date and a note.

And yeah, that's it. Give it to the LM

and it generates the code for you. And

voila, that's what you get. Seems very

very simple. Crazy, right? You can see

how it fundamentally changes the way

that you code and and build things. But

with that being said though, it's not

like black magic and vibe coding will

magically just work for everything.

There are still principles and order in

this chaos in how it is you ask it to

build these things. So without further

ado, let's actually cover these

principles. The best course that I found

that covers the principles, the

fundamentals of vibe coding is a course

called Vibe Coding 101 with Replet. It's

a nice little free course that's created

by Replet, which is a platform for vibe

coding apps in collaboration with deep

learning AI. The course explains that

there are five fundamental skills in

vibe coding, which are thinking

frameworks checkpoints debugging and

context. You need to thoroughly think

through exactly what it is that you want

to build and then communicate that with

the AI. What we mean by think thoroughly

is actually four different levels of

thinking. Say, for example, you want to

program a computer to play competitive

chess. The first two levels of thinking

are probably really obvious and it's

just like very intuitive to you. Logical

thinking is just what is the game and in

this case the game is chess. The next

level analytical thinking is asking the

question how do I play this game? What

is the main objective the goal of the

game? Now the third level is

computational thinking. You need to

figure out how to fit the logic of this

game into a complicated set of problems

and configurations on the chessboard.

You also need to think about how do you

enforce these rules. And finally at the

top level of thinking is procedural

thinking. This is when you ask the

question how do I excel in this game?

Not only do you want to play this game

you want to play it well. So, you need

to think about what are some strategies

that you can use. What are the

boundaries that you can push so that

you're able to program your computer to

be able to do well at the game. Then, of

course, you need to translate this

natural language that we described and

communicate that to the AI to build.

Now, for whatever it is that you're

trying to build, a game, a web app

whatever, you also need to go through

these four levels of thinking to truly

properly define what it is that you want

to build. Honestly, this is where most

vibe coders have the most opportunity

for improvement. Because oftent times

because you're using natural language

just to describe what you want to do

you don't really actually think through

what it is that you want to build, what

it is that you want your final product

to look like. And that's actually kind

of unfair because if you don't even

think through exactly what it is that

you want, how do you expect the AI to be

able to figure out what it is that you

want built? And actually, the best way

to make sure that you go through each of

these levels of thinking and communicate

it clearly to the AI is to create

something called a PRD, which is a

product requirements document. This is

an actual PRD that we defined with one

of our clients. It is an AI powered

personalized nutrition plan for

diabetes. Level one of thinking which is

logical thinking defining what it is

that we want to build. So this is as

part of the project overview. We wrote

that the goal of this project is to

develop an AI powered system that

creates personalized nutrition plans for

individuals with diabetes. The system

will take into account various health

related factors such as medical

analyses, weight, dietary habits

calorie consumption and more. The next

level of thinking, the analytical

thinking is encompassed by the skills

section. So this is where you list out

what it is that you need in order to

build the thing that you want to build.

In this case, we wrote Python

healthcare data processing, open AIS

API, image processing for visual plans

and UI development. You can you can also

go into more detail about this if you

want if you're very if you're more

particular about which specific packages

you want to use, which kind of front

end, which kind of backend that you want

to use, but this is good enough to

start. For computational thinking, I

like to express this by having a key

features section in the PRD. This is

where we can clearly define and have a

plan based upon what we want to show up

in the application. Here we have it

divided into milestone one and milestone

2. The first one is a generalized

personalized nutrition plan engine that

includes specific metrics like

individual health metrics and

socioeconomic factors. The level two is

where we want to give more contextual

customization specifically considering

people's literacy and education levels

and making the application adaptable um

and more accessible to different types

of people for example people with lower

literacy. Now for procedural thinking

the highest level of thinking thinking

about how do we make this application

the best that it can be this is

exemplified throughout the PRD just by

adding as much detail as possible. For

example, defining exactly which factors

like individual health metrics like

medical analyses and dietary intake data

and socioeconomic factors such as income

location and local food availability as

well as what types of contextual

customization. But the best way to think

about it is the more detail you can go

into thinking about your target

audience, who you want to be using your

application and that experience that

they should get and all the factors that

go into it to make it the best

experience possible. the clearer your

vision is and the clearer the PRD is and

the better results you will get from the

AI. Also, just by the way, you don't

need to come up with this PRD all by

yourself. Um, I'm actually going to put

like a prompt on screen right now. Feel

free to take a screenshot of this. This

prompt will work with you and ask you

the right questions for you to be able

to come up with a well-defined PRD to

build your app. I highly recommend that

you spend a significant amount of time

at this section. It is always so much

easier to have a clearer vision of what

you want as opposed to build something

figure out that it's not exactly what

you want, and then try to fix it

halfway. The next principle of vibe

coding is to know your frameworks

whatever it is that you want to build

chances are somebody has already built

something like it or something very

very similar to what it is that you're

trying to accomplish. And since AI is

trained on all the pre-existing

solutions that are already available, if

you're able to direct the AI towards the

correct framework for building what you

want to build, you're going to have much

better results than asking it to just

try its best to come up with something

from scratch. And the easiest way to do

this in vibe coding is just to list out

the frameworks or the packages that you

want the AI to use to implement the

solution that you want. You're kind of

just like pointing it in the right

direction. For example, for your web

app, you can specify that you wanted to

use a React backend and a CSS and HTML

JavaScript front end and specifically

maybe Tailwind CSS for the styling for

this specific type of application. Or

say that you want to be creating

animations, you can specifically say

please use 3.js which is a very popular

package for creating animations. Okay

so the question you might be thinking

right now is like Tina, but what if I

don't know what is the best way of

implementing this thing? No problem. You

can actually ask AI to help you figure

it out first. For example, if you want

to implement a drag and drop UI, which

is a very common thing to implement, you

could say, could you help me come up

with some React frameworks to implement

drag and drop into this application and

then implement it. What is actually the

key thing here is to be open to learning

about these different frameworks and how

all of these components fit together.

With vibe coding, it's not necessary for

you to exactly know how to implement

each of these things yourself, but it's

still really important to have an

understanding of the structure of what

it is that you're trying to build. Like

if you're making a web application, at

the very minimum, you should be aware of

what a front end is, what a backend is

how the front end and backend

communicate with each other, and what

are certain frameworks that are very

popular or commonly used for the front

end and the back end. Think about it as

building and developing and learning

with the AI at the same time. This will

make you a much better vibe coder in the

long run. The next principle of vibe

coding is to always have checkpoints and

version control. Things will break. That

is a fact. You do not want to end up

like, this, guy,, for example,, who, lost, all

of his work because he did not know

about version control. It is a

cautionary tale. He posted on X, "Today

was the worst day ever. The project I

had been working on for the last 2 weeks

got corrupted and everything was lost.

Just like that, my SAS was gone. Two

weeks of hard work completely ruined.

But I mean he is trying to stay positive

here. He started from scratch. Blah blah

blah. He's going to rebuild everything

from, cursor., So, you, know, at least, he's

remaining positive. But anyways the

point being that please always have

version control. There are some software

like, replet, for example, that, has, pretty

decent version control that's already

built in. But for the majority of

software and it's just like generally

best practice is to learn how to use git

and github which I'm actually going to

give you a crash course on right now. If

you already know how to use git and

github consider this a quick little

refresh. So first of all git is the

version control software itself. While

GitHub is a website that allows you to

store your code, your repositories on

the cloud so that you're able to have

it, you know, saved somewhere else and

also so that you can share it with other

people. So, first you need to install

git and you can do this by either

downloading it from the website or you

can go through your terminal/comand line

or honestly you can just ask your AI

code editor software whether that be

like

replic whatever and just directly say

like please download git for me. Now

assuming that you want to start a new

project from scratch and you're in that

current folder the command that you want

to use is get init which is initializing

git. Now let's say you start adding some

things you might want to add a readme

where you know you just start like vibe

coding and now you have a bunch of files

that are there. And if you use this

command get status it will show that you

have a lot of files that are unttracked.

So in order to track these files you use

the command git add. You can do get add

like readme.md or whatever files that

you want to start tracking. Or you can

just do get add with a dot. The dot

means just track everything. But you're

not done with just adding these files

and tracking these files. When you

actually want to save a certain version

of it, you use the command git commit.

This is where you would explicitly

commit the changes that you made to the

files. And you can also type a message

that explains what you changed in the

codebase or otherwise known as the

repository., For example,, your, first

commit could be git commit-m with

initial commit as the comment. And

that's it. Actually, if you just do

this, you would be tracking your

changes, saving your changes by

committing it. And you just keep on

doing that. And if you ever want to look

at the changes that you made, you can

use a command called get log. And if you

want to roll back a commit, then it's

git reset. Okay. So after you made a

bunch of changes, did all your things

and maybe you want to share your code

now on GitHub. You can go to github.com

create a new repository, and initiate

it. Copy the remote URL, then use the

command get remote at origin, and then

the URL. This will link your local repo

that's being saved on your computer to

GitHub. Then you might want to rename

your branch, which is the current

repository version that you're working

with and call it main. So you can do git

branch- m main. Then finally, you can

push everything from your local

repository onto GitHub with the command

git push- origin main. There are

obviously like a lot of other little

nuances and commands and like things

like that um specifics that you can go

into a lot more detail about, but just

knowing what I explained to you that

entire workflow, that should be enough

for you to have a good understanding of

what version control is supposed to look

like and what the flow is supposed to

look like. And even though I did cover

the exact commands that you should be

inputting using an AI code editor, you

actually don't need to know these exact

commands. Like as long as you know what

that structure is, you can just directly

ask the AI using natural language. like

you can just say um use git to commit

these changes, push it to GitHub on this

branch, roll back the previous version

merge everything together. I hope that

makes sense. Overall, I hope you can

also see that the key to vibe coding is

to understand these like highle

structures, these highle components and

the flows of things so that you're able

to direct the AI in the implementation.

Implementation is where AI excels at.

The next important skill of vibe coding

is debugging. Whatever it is that you're

building is going to go wrong. It's just

a matter of when it's going to go wrong

and how it's going to go wrong. Which is

why debugging and fixing the thing is

just as important as the actual building

itself. This is a skill that is drilled

into engineers with many many years of

training. But for many vibe coders

though, especially those who don't have

an engineering or coding background

debugging might be something that they

don't actually have a lot of experience

in. And it's very important to learn

this skill. The best type of debugging

is very methodical and thorough. First

you need to identify where the problem

is and what the problem is. then you

need to apply different solutions to try

to fix the problem. Sounds super simple

right? But do not underestimate the art

of debugging. In the case of vibe

coding, when you realize that something

doesn't work, um I actually find that

the best way is to just point it out to

the AI and then let the AI come up with

the solutions to fix it itself. For

example, I recently did this live stream

where I was building this application

and then it kept on coming up with an

error. I basically just copy pasted the

error message and went like there is an

error and the AI responded with like oh

let me try to fix it. and then it comes

up with like different solutions to try

to fix the problem. And really all you

have to do often times is just to accept

the changes and if it still doesn't work

it might just go through like a lot of

cycles of this. Just got to be patient

and just you know keep pointing it out

letting it do its thing and often times

it resolves itself but in the off chance

that it doesn't resolve itself easily.

It is really really helpful to have a

basic understanding of what you're

building., Like, for example,, I, kept, on

getting the same error over and over

again. But since I understand file

structures and how the files are working

with each other, I was able to point out

which file was probably causing the

problem and which section was probably

causing the problem and the AI was able

to go and fix it. Another example was

when I got this overlapping UI component

which I didn't like. I was like this

thing is overlapping. I sent it to the

AI and then it like made some weird

changes and the whole thing just

disappeared. And then I was very patient

and was more specific about exactly what

it is that I wanted. And looking at the

code, I could tell that it was just

statically trying to input like a

certain dimension so that depending on

the orientation of the website

sometimes it would overlap and sometimes

it wouldn't. And then I just pointed out

that I needed to be dynamic so that it's

not overlapping at any point. And then

fortunately, it was then able to fix it.

And finally, the last principle of vibe

coding is to provide context. The

general rule of thumb is that the more

context, as in the more information and

detail that you can provide to your AI

to your LM, the better the results are

going to be. And context can come in a

lot of different forms. It could be that

the original prompt or the PRD that

you're inputting has a lot of details in

it. You can even provide it with like

mockups of what exactly you want it to

look like. Or you can be providing it

with examples or extra data that can

help it build the application. Details

about your app, your environment, your

preferences, as well as errors. Instead

of just saying this thing doesn't work

you can actually copy paste the full

error message and a screenshot of what

exactly doesn't work and provide that to

the AI. Okay, so here's a little

pneummonic that can help you potentially

remember these principles of vibe coding

better. The friendly cat dances

constantly thinking frameworks

checkpoints, debugging, and context

which immediately comes in handy for you

now because here's also your little

assessment, which I'm going to put on

screen right now. Please answer these

questions and put them in the comments

to make sure that you're following along

with the things I am talking about. I'm

now going to show you some examples of

vibe coding starting with Replet. Replet

is a platform where you can use AI to

vibe code different applications and

deploy them really really quickly all on

the cloud. It is super beginner

friendly. All you have to do is log on

to Replet and they have some free

credits that you can get started with.

Let's start off with the PRD for a very

simple app that displays SEO metatags

for any website that is inputed. Okay

so to get started, the first thing I'm

going to do is actually use chatgbt to

help me really think about what I want

this application to look like and

generate a PRD for it. And I'm going to

use this prompt over here, which is a

variation of the prompt that I showed

you guys earlier. And I'll also link an

example PRD for chatt. So it just says

help me to make a PRD for an MVP app.

I'm looking to vibe code. So, an

interactive app that displays the SEO

metatags for any website in an

interactive visual way to check that

they're properly implemented. The app

should fetch the HTML for a site, then

provide feedback and SEO tags in

accordance with best practices for SEO

optimization. The app should give Google

and social media previews. And then

thinking through these questions, what

is this app? How do I use the app? What

are the patterns behind the app? And how

do I make the app the most useful for

the target audience? And including a PRD

example here. And it helps us generate

this. So, SEO tag, visual inspector

MVP, PRD, project overview, and it shows

all of the key features that are here.

So, input URL field, HTML fetching and

parsing, SEO tag extraction, and visual

feedback previews. And there's also a

nice to have section. All of this looks

pretty good. I do want to have a key

feature of actually displaying the total

score out of 100. I also do want to get

rid, of, these, nice, to, have haves, over

here cuz it's always best to start off

with the very very key features and then

add on to that. So I'm going to ask it

to refine it with for key features.

Could you include a total score out of

100? Also remove nice to haves. Great.

So visual feedback is over here.

Awesome. So this looks pretty good to

me. So, I'm going to write is could you

make this into a prompt uh to build an

app using replet? So, that's what we're

going to use. Great. Wonderful. And on

top of this, I'm going to say generate a

image mockup or inspo. I'm going to

download this. Here is a replet. And

what I'm going to do is just copy paste

the prompt from chatbt and also link the

inspo and click start building. All

right, it's going to be called SEO Tag

Scout and it's asking me if I want these

like additional things that are here and

I'm just going to say no because we can

add these additional features later. So

we can approve and get started. As it's

generating, you can see that it's

literally designing the visuals and it's

also populating the files over here as

well. So, for Replet, it already does

have pretty good um version control. You

can roll back pretty easily here.

Although for best practices, you still

really do want to be using Git at some

point. While it's finishing up building

everything over here, what I really

recommend that you do is you can go over

here and actually add an assistant and

use the assistant and ask, could you

explain to me the file structure in this

project? You don't have to do this, but

it's one of those things where if you're

learning about the frameworks that are

being used while you're vibe coding

this is going to significantly improve

your skills as a vibe coder because

you're going to be able to understand

what's actually happening and how the

files are going to be interacting with

each other. We can see over here on the

client side under client, you have the

main React application code in the

source. So, client source and you can

see where the UI components are as well.

And on the server side, it tells you

where the main service entry points are

like index.ts. And here's the code for

that. And then roots and things like

that as well. Just understanding the

files over here and how they're

interacting with each other to produce

this completed app is already going to

give you a huge leg up. And if you

really want to dig into like some of the

actual code, you can always rightclick

over here and then you can say like

explain with assistant for example. This

is very very optional, but it is a

really really great way for you to learn

um what the code is actually doing if

you're, interested., All right,, it, looks

like our app is now finished. Let's

actually test this out. So, let's try

ww.lonely

octopus.com. Check. Uhoh, that didn't

work. So, what I'm going to do

is there is an error like a true vibe

coder. We're going to hope that it fixes

itself. Okay, let's try testing it out

again. Lonely

octopus.com. And cool, it seems to be

showing something. the title, shorter

than recommended, meta description, blah

blah blah, all of these things. And we

can see that here's the Google preview

here's the social media preview, Twitter

card previews, and raw data tags. Okay

so I just want to make sure that the

like number actually changes depending

on the website. So let's try something

else like the website called the useless

website.com. Okay, so it's also still

showing 86. What about this other

website?, Okay., All right., So, the, number

is changing depending on what it is.

It's like this is not visually

appealing. Make it colorful. Yeah, make

it colorful. I also don't like how the

raw data tags are here, but it's not

specifically specifying like what the

title is sort of the recommend like what

is the actual title. Like I want that to

be, showcased, and, I'm, going to, do, that, in

the next round of edits here. Another

key thing to remember is that it's best

to when you're pointing something out

like something that you want to be

changed, doing it one at a time as

opposed to like a laundry list of things

that you want to change cuz that could

potentially confuse the AI. Oh, cool. I

guess it did that already without me

saying anything. Oh, and it's like

showing little icons. So, that's nice.

Okay, let's try this again. lonely

octopus.com. Okay, I like that. This is

much much better. Another thing that you

can do over here is that you can

actually click here and then there is a

dev URL that you can directly look at

from other devices as well. So all you

have to do is scan the QR code. So you

can actually see what it's like on other

devices too. So if I were to type lonely

octopus.com, you can see what that

experience looks like on mobile as well.

So this is a example of what it would

look like to be web coding using Replet.

And once you're done, you can take this

and deploy it when you want to. But if

you do want to create something that is

more complex and that's also more

scalable, you will at some point want to

migrate to a AI code editor, something

like Windsor for cursor. So I'm actually

just going to show you what that is like

um using Windinserve for example. First

of all, regardless of which of these

tools that you're using, the principles

that we just talked about for vibe

coding, like the skill set itself is

pretty much the same. So don't worry

about that. It's more the fact that

after you get through the beginner

stages, most people will want to switch

over to AI coding editor like cursor and

windsurf because it's more robust, has

more functionalities, and also allows

for greater scalability. Of course, with

these types of things, there's always a

trade-off. Like with Replet, it is a lot

faster, really easy to use. Everything

is based on the cloud. So, you don't

really have to deal with setting up your

environment and the deployment process.

While for cursor and windsurf, there are

a lot more functionalities that are

available. These code editors are built

for like full scale development. So

you're pretty much able to do any type

of development and be able to tweak

things and fine-tune things to the exact

way that you want it to look. Of course

the downside is that there is a higher

learning curve. You need to learn how to

set up your environments properly, how

to debug issues with your environment. A

lot of, issues, come, because, of, not

setting up your environment correctly.

You also need to learn how to deploy

things, how to monitor things over time.

So this is the wind surf environment and

over here is cascade where you can type

in what you want the app to build. In

this case we're using cloud 3.7 sonnet

as the model. So I'm actually going to

put in the exact same prompt and then

also the image as well on winds. This is

going to be a local development

environment. So it's going to start off

by setting up a bunch of things locally.

You can see that the files are

populating themselves over here as well.

All right., So, this, is, running, a, terminal

command and we can accept this. It's you

can disable and the asking and you can

just let it auto run but I have trust

issues cuz it's on my local environment

instead of like rep play where it's in

its like own isolated thing on the web.

So I do like want to make sure that I am

accepting things and not doing random

things to my local environment. So I'm

just, going to, click, accept, to, all, of

these. You can see that it also takes a

little bit longer cuz it's setting up

all these environments and selling all

these packages and stuff. Um, all things

that don't need to be done if you're

using Replet. Okay, cool. It looks like

it has something done. It says, "Feel

free to try it on the browser preview

I've opened for you." Open the browser

preview. I don't see the browser

preview. Could you open it for me? Okay.

Open preview.

Cool. We see that it has some of these

very similar elements here. www.lonely

Lonely

octopus.com for example check. Oops.

Need to adding an

https. Okay, this actually looks way

better than replet's first version. I

got to say it actually looks really

really similar to the inspo that we

provided. It like here's the inspo that

we provided and here's the actual thing.

It looks really similar, right? Looks

pretty good. So SEO tag analysis. Yeah

this looks pretty good to me. Let's try

something else.

maze.toys/mazes/min/aily. It's just like

a random website. Okay. SEO tag is 25.

So the numbers are actually different um

between Replet and Windfs. So that's

interesting. Something I probably want

to dig into asking like how it's

calculating these SEO tags. But overall

it looks like it's working pretty well.

And I quite like this. So I'm going to

ask it to change though. To improve on

this a little bit, I'm going to say edit

a screenshot here and be like make it so

that you don't need to type

https before the URL. Also, copy paste

is not enabled. Let's open a preview

again. So, try this again.

www.lonely

octopus.com. We also do need to center

this later. And it still doesn't work.

So, I'm just going to write still

doesn't work. Let's try again. lonely

octopus.com. Okay, cool. So, that works

now. Um, obviously there's like other

things that we want to fiddle around

with a little bit like things that are

not centered. Might want to change these

colors a little bit, but I hope this

gives you a good idea for how it is that

you can start building using windsurf as

the experience. And so, in this case

you also definitely do want to start

using git and github as well. So what

you can do is be like initiate git for

version control and just type that in.

Accepting everything here and then git

is going to be initialized. Everything

here turned green which means that it's

unttracked. It asked do you want to get

add everything? We can accept get add

everything and it's asking us if we want

to commit as well as our initial commit.

So we can accept we can get commit to.

So great now everything is being tracked

as version control. And when you're

ready, you can also get push and you can

actually see everything now on GitHub.

But regardless of what you use, remember

the principles that we went through for

vibe coding. Do keep those in mind and

apply them regardless of what kind of

tools that you're using. I'm going to

put on screen now a little quiz. So

please type the answers in the comment

section. And now let's go on to our

final section where I'm going to give

you some more tips and tricks and

frameworks and mindsets that will help

you along your Vibe coding journey. The

first one is very much a mindset. If

you're already an engineer, you know

you probably already think this way. But

if you're someone who maybe doesn't come

from more of a technical background

always think about starting small and

working your way up. In other words

whatever it is that you're creating

always think about it as the minimal

viable product, which is what are the

minimum amount of features that you can

put into your application for it to

function. After you get the thing to

actually work, then you can iterate and

put on like additional features and

functionalities on top of that. This is

the correct vibe coding mindset as

opposed to you coming up with like the

most lavish, you know, thing with all

the details that you can possibly think

of and like a million different

features. No, no, no, no. I can already

think of all the errors and issues that

you're going to get from that and then

just you like ripping out your hair

because you can't figure out what's

going wrong. Always start with the

minimal viable product and then iterate

on top of it. Get the thing to work

first. Next up is a framework that's

also from the vibe coding 101 course

which I think is really, really helpful.

It shows that when you're developing or

building an app, when you're vibe

coding, there's really only two modes

that you're in. You're either

implementing a new feature or you're

debugging errors. When you're

implementing a new feature, what you

want to remember is to provide context

relevant to the new features. Mention

frameworks, provide documentations with

explicit details, etc., and then making

incremental changes and doing the

checkpoints and and version control

etc. And when you're in debugging errors

mode, what you want to keep in mind is

firstly figuring out how things work. Do

you have a good understanding of the

structure of your project itself? if you

don't, you know, ask AI and and actually

figure, that, out, because, it's, going to, be

very helpful to figure out what is

actually going wrong in your

application. And when you figure out

what's wrong, think about how to get

that information to the LM to get

unstuck. And this is where the final

principle, context, is helpful. Just try

to provide as much context and

information as possible to guide your

LLM to fix to fix the problem. Give it

like screenshots of what's wrong. Give

it the error message, point it towards

the right file to be looking into. I

really love this framework. So take a

screenshot or something and whenever

you're getting frustrated or not know

what you're supposed to do, just try to

remember which mode that you're in and

what you should be doing in which mode.

Final tip that is a little bit more

advanced and these are writing rules or

documentation. This is kind of like a

system prompt that you're giving to your

coding agent. And this is where you can

list out like certain things that you

wanted to do or to not do. For example

some of the best practices that you

probably want to put in your rules

include limit code changes to the

minimum when implementing a new feature

or fixing something. This is because AI

sometimes has this tendency of like

changing a lot of different files um

unnecessarily to fix like a very small

thing and then it could potentially

break other issues. Rate limit all API

endpoints. This is just to make sure

that you're not like calling an API and

incurring like multiple times and

incurring a lot of cost. Enable capture

on all authors and signup pages. So for

security reasons and yeah there are a

lot of other rules that you can put into

this file. You can also find online like

people have written these rules that are

specific to like certain types of apps

or certain languages that you're using

as well that you can put into your rule

file as well. And you can take this rule

file and give it to replet where cursor

ruins surf too. Especially if you're

someone who doesn't come from an

engineering background or like a

development background, I really

recommend that you actually look into

the rules that are specific for ensuring

like safety and security in your apps.

Like putting it in your at least like

learn things about like API keys and why

it is that you shouldn't be exposing

your API keys. And while you're learning

these, also put your rules into your

rules file so you're reminding your AI

to be abiding by best security practices

as well so you don't get hacked. All

right, there is honestly like a lot more

that I can go into detail about. Like

for example,, like, having, styling

documents that you can reference, how

you should be refactoring your code

using something like MCP servers. if

you're building something like AI agents

and you want to give your AI agents like

more tools and functionalities. There's

just like a lot which I don't have time

to cover in this video right now. But

please do let me know in the comments if

you want me to make a follow-up video

where I will go more in detail about

exactly how it is that you should be vi

coding and giving you more specific

advanced examples for AI code editors

like windsurf or cursor as well. But for

now we have come to the end of this

video. I really hope this vibe coding

fundamentals video is helpful for you to

get started um doing it correctly like

vibe coding with best practices in mind.

And as promised, here is the final

little assessment which do answer these

questions and put in the comments to

make sure that you retain the

information that I just covered. If

you're watching this video and

interested in vibe coding, chances are

you're probably also interested in

learning STEM subjects. So, if you are

interested in learning STEM subjects, I

highly recommend that you check out

Brilliant, the sponsor of this portion

of the video. Brilliant is a STEM

learning platform that helps you get

smarter every day with thousands of

interactive lessons in math, science

programming, data analysis, and AI. What

I love about Brilliant is that it helps

you build critical thinking skills and

deep understanding of subjects instead

of just memorizing things. Brilliant

incorporates little quizzes, analogies

and just little dopamine hits that

really help a lot when you're getting

bored or discouraged. It's shown to be

six times more effective than just

watching video content. They also have a

great mobile app so you can actually dig

into a quick little session and learn

something new when you have a couple

minutes instead of just mindless

scrolling. Brilliance programming

courses are some of my favorite courses.

They help you build a foundation of

coding and teaches you how to think like

an engineer, a skill that is still

crucial in the age of AI and the age of

vibe coding. Speaking of which, they

also have great AI courses, too, that

can help you gain a deep understanding

of how AI models work and their

applications. Brilliant courses are

super high quality and taught by

award-winning teams of teachers

researchers, and professionals from

Stanford MIT Caltech Microsoft

Google, and more. To try everything that

Brilliant has to offer for free, you can

visit

brilliant.org/tina or just scan the QR

code on screen. Or you can also just

click the link in the description. If

you use my link, you also get a 20% off

the annual subscription. Thank you so

much, Brilliant, for sponsoring this

portion of the video. Now, back to the

video. Thank you so much for watching

this video and happy vibe coding. I'll

see you guys in the next video. We're

live stream.