Cursor for Beginners (No Coding Experience!)

So, you want to build software, but you're not sure how to get started.

Well, in the next 30 minutes, I'm going to show you how to use Cursor to build your ideas and use AI to build a website in a web game. And it's okay if you don't have familiarity coding yet. And

you're just learning how to use AI.

We're going to cover things from the absolute basics for those who are just getting started on their creative coding journey. So, gather around. if you

journey. So, gather around. if you

haven't yet downloaded and installed Cursor. Go to cursor.com/d download and

Cursor. Go to cursor.com/d download and check it out. And we're going to walk through all of the basics. So, I have Cursor open on my application. And we're

going to start by making a new project.

Now, I've called this project 101 as our introduction here. You can click open

introduction here. You can click open project if you would like. And we're

going to open up this folder. This is a folder or a directory on our computer where we're going to have the different files that are going to be generated by cursor that we're going to use in our

application. And inside of here, it

application. And inside of here, it might look a little intimidating at first. And I can empathize with that. I

first. And I can empathize with that. I

can understand. When I was first learning how to code, I remember opening up a code editor and being a little confused, a little intimidated. The nice

thing is that we're going to talk through how this code editor works, how you can use code and learn code and not be intimidated by the code and build

software together. Now, what you can do

software together. Now, what you can do as you're getting started, if we don't want to focus on the code right now, is you can press command or control E and we can change into this mode that feels

a little bit closer to a chat GBT if you've used it, but it is a textbased way for you to build your ideas. Now,

for me personally, I found the best way to build my ideas and to get started, especially when I was learning, was to get something on the screen first, and then we're going to work backwards and talk through some of the foundations,

some of the things that you're going to need to know that I'm explaining along the way. So, right now, we have a code

the way. So, right now, we have a code editor. We're going to build a website

editor. We're going to build a website or a web application. So, we also need a browser. So, I'm going to click this

browser. So, I'm going to click this little icon here to open up a browser.

This can be kind of directly inside of cursor or it can be a separate environment if we would like. So you can open up Google Chrome for example and we're going to make a game. I find

making games a very fun way to learn the fundamentals. Everybody enjoys playing

fundamentals. Everybody enjoys playing games and it's a good way for us to talk through all the foundational things that you can then apply and bring back to whatever your job is or your hobby is.

Maybe you're a product manager and you're wanting to learn how to build prototypes. Maybe you're a designer

prototypes. Maybe you're a designer wanting to build your ambitious ideas.

Maybe you're an entrepreneur wanting to build your business. All these things potentially have been blocked by trying to hire a professional software engineer or find somebody to kind of help get

your ambition off the ground. We're

going to show how you can start building your skills and develop those skills to learn how to build software. So, when

you start out using Cursor, you're going to notice that there's this chat input.

And this chat input has a couple different options and selectors that you can pick. And one of them, the most

can pick. And one of them, the most prevalent one is the model that you're going to use. We're not going to worry about the model for now. We can come back to that. But what we're going to do, and the most important thing to get started is we're going to change into

plan mode. So there's different modes

plan mode. So there's different modes here. I'm going to change plan. And

here. I'm going to change plan. And

inside of plan mode, this is where we're going to describe to cursor what we want to build. So I want to build a game.

to build. So I want to build a game.

Let's build a Space Invaders game um w with basic web tech. And we're

going to see what this plan is. Now, as

you get more advanced, you might know specific technologies that you want to use, specific tools that you want to use. Here, we know that we want to build

use. Here, we know that we want to build a game and we want it to be accessible on the internet. So, even though I don't know about HTML, CSS, and JavaScript yet, which we're going to explain what

those are here in a minute, I know that I want to build this game. So, let's go ahead and see what this plan is. We're

going to make a game using HTML, CSS, and JavaScript. HTML is like the body of

and JavaScript. HTML is like the body of a website. CSS is how you make it look

a website. CSS is how you make it look nice, and JavaScript is how you make it actually do things. So, here's all the files it's suggesting that we need. Uh,

we need some features of the game and the enemies, the game mechanics, some ideas on the design, and then it also gives us some to-do items that we want to complete. And now that we have

this up in the top right, we can choose if we want to build this plan. And I'm

going to hit yes. So, we're going to go ahead and build this plan. Now, as this is building, it's a good time for us to talk about the first thing to know,

which is AI and AI models. So for this we are using an AI model. It's called

composer which is the model that cursor has created. AI models you can ask them

has created. AI models you can ask them the same question a 100 times and you're not going to get back the same result or the same answer every single time. They

give random results based on how they've been trained and information that was available to them. So it's important to kind of build this mental model that you can't expect to get the same answer every time. Now, there are strategies we

every time. Now, there are strategies we can use to help us get more predictable, consistent results from AI models, but you need to be rooted in that understanding inside of this chat that

we're looking at here. You can think about this like the working memory of working with the AI model. And if I start a new chat or if I start a new agent, this is like wiping the memory clean and we're starting completely from

scratch. So, this model has amnesia.

scratch. So, this model has amnesia.

it's not going to remember things and we have to be explicit on what we're trying to build and the context which is a special keyword we're going to need to know that we're giving to the agent. Now

in the chat down here there's this little gauge and this gauge will tell you the percentage of the context window used. You can think about this again

used. You can think about this again like the working memory of working with a model. You don't want to get to a

a model. You don't want to get to a point where you've used up all of the memory of the model because the quality of the responses you get will go down.

So, it's worth keeping an eye on that little gauge and making sure that you're not going past there. Okay. So, we made a plan. We generated some code, but

a plan. We generated some code, but we're not yet really familiar with code.

So, how are we going to understand how this is working? Well, if we scroll up, we can see it completed some of our to-do items. Uh, and it says it it usually the model will give you a kind

of a recap of what happened. So, it made this HTML file, which is again the kind of the structure of the game. uh the

style.css.

So this is how to make it look nice. And

then game.js or JavaScript. These are

just files on my local machine that are kind of instructing how we actually orchestrate and run and make the game.

So now it says we can open this file in the browser to play the game. And we

have some controls as well. It gives us a list of the files that we've edited.

We can review all these files over here on the right. So you see this kind of funky syntax that looks kind of like English, but it's got some special characters. This language we're looking

characters. This language we're looking at, HTML, it reads kind of like English, so you can kind of start to get an understanding of what these different

tags mean. um and CSS it's even kind of

tags mean. um and CSS it's even kind of more interesting looking but these are a bunch of very specific keywords that allow us to add things like different

colors or different styles or different spacing and padding around elements so sizing things on the page in different positions. Uh and then finally we have

positions. Uh and then finally we have our game. So the actual JavaScript file

our game. So the actual JavaScript file and the logic for how it actually works.

So, you want the game to have lives and a score and to be able to play multiple games. So, we're going to say for now,

games. So, we're going to say for now, we're just going to keep all of these changes. Okay. And then we're going to

changes. Okay. And then we're going to ask like let's uh start the game in the and then I can type at and this at is

our context menu. And there's a bunch of different things that we can tag in to make this coding agent. agent meaning it is working with an AI model and it's

allowing it to take actions for you.

There are many things we can we can ask the agent or we can include to the agent here and one of those is the browser. So

let's start the game in the browser and cursor can go and control a web browser.

In this instance it is embedded inside of the product. So we have this over here on the right and we can actually preview the changes and it tells me again what the controls are for the

game. So, I can kind of move left and

game. So, I can kind of move left and right. I can shoot with spacebar. Um, I

right. I can shoot with spacebar. Um, I

can Okay, so looks like enemies are properly being uh killed when the Oh, man. I'm

losing. I'm losing so fast. They're

going to get me.

Uh, I do notice one thing. You know,

pressing left and right, there is this movement that's going back and forth, which I don't really want. Ideally, when

I press left and right, the the screen doesn't shake very much. Now, this is what you'll start to notice as you're building a product. Your only limitation here are your ideas and your ability to

express what you're trying to create.

So, I'm decently happy with the first version of this in terms of the style, in terms of the functionality. Like, the

game actually works. It looks like I can restart the game, but there's some little things that I want to fix. Like,

I I don't love that back and forth mechanic. So now is a good time to make

mechanic. So now is a good time to make a new chat, a new agent or a new conversation. Now if you remember, we

conversation. Now if you remember, we had this conversation going. This was

the kind of working memory and we used 10% of the context here. When I make a new agent and I start a new conversation, I've wiped the memory clean. So there's no additional memory

clean. So there's no additional memory included here. And I want to start a new

included here. And I want to start a new task. And inside of this task, I want to

task. And inside of this task, I want to say something like, and you know what, actually, we're just going to click on this voice icon, and I can just speak

into cursor. I'm going to say

into cursor. I'm going to say when using the left and right keys to

steer my invader or my ship, it's also moving the entire game left to right. I

want the game to not move left and right.

Now, because I am a little bit more familiar with web development, I there were some specific words I was thinking about using, but I was trying to not use

them. And because I wanted to see what

them. And because I wanted to see what the coding agent, what the AI would do.

And it says that arrow keys are for scrolling the page, preventing their behavior. Arrow keys for scrolling the

behavior. Arrow keys for scrolling the page. Great. Um, we can click review and

page. Great. Um, we can click review and this opens up the specific code changes and this backslashbacks slashline here, this is a code comment. So this is a way

of adding a line in the code that puts English to whatever this code is doing.

So even though I don't know that window, which is like a way of accessing the browser, uh, even though I don't know that this is adding an event listener, which is a way to listen for when you

press the key down event. So, I press the key and that key is a left arrow or a right arrow. And when you start to like when you start to squint at this

and ignore some of the squiggly braces and the all of the syntax, which we can get into as we learn coding more, what you're seeing here is what we call in

programming pseudo code. And pseudo code is like the English version of whatever we're looking at here. So the pseudo code for this in my brain would be uh if the user presses the left key or the

right key then I don't want to do the default behavior which is scroll the page. So let's see if this works. So we

page. So let's see if this works. So we

made that change. We go back here. We

can refresh the page. And now if I press left and right the page isn't moving back and forth. So that's very very good. Um,

good. Um, the point I want to make, the larger point I want to make, I started a new conversation and I started this new conversation because I didn't want to include all of the previous context from

the last conversation. Now, the AI model doesn't know about any of the previous things I've said. So, I need to be very intentional about what I'm including, even though this model can go and actually look at the code that's already

been generated and reference that. So

that's how the model knew, oh hey, there's this game file. It has all of this logic in it and I can go and make updates to that. So plus4 minus2 are the

actual lines changed in the file and then we can see a diff or the difference in making that edit there. Now if I go back to the other view with command E or

control E, um I can open up the full files. So this is the directory on my

files. So this is the directory on my machine and I can see all of the kind of raw source code from underneath and I can go in here and make edits directly.

So as I start to learn more about code or maybe I want to go in here and I see that you know this color it shows that it's a green color. Well I could change this value to be something else directly

in the editor if I wanted to. This value

is a hex hexadimal value. It's just a way of representing a specific color.

And so I can go in here and change this directly. I could change the structure

directly. I could change the structure of the page directly. For now, I think as long as you know that HTML is the structure, CSS is how you make it look nice, JavaScript is how you make it

function. The great thing about these

function. The great thing about these types of files, just like it could be a Word file or a PDF, is that your browser understands how to interpret them and do things with them. So when we have these

files, that's how the browser is able to just play this game without you having to do anything extra, which is really just the marvel of the web and the functionality that I think is just so

interesting about this. So, uh, now that we have this game, we might want to take this a little bit further. And I want to talk about a few other concepts that we've kind of so far glossed over, but I

think are important that you should know as you start building a game. If we're

happy with the structure right now, we might want to save the state that we're in. And in a text editor like Google

in. And in a text editor like Google Docs or in other things, you might want to, you know, go make a version of this V1 or V2 of my document. How do I do

that in code? Well, back in this other view, so again, I go back to this this view, there is this view right here,

which is a get panel. Git is a way for you to do

panel. Git is a way for you to do versioning of files on your machine. So

versioning, I want to have version one of my game, version two of my game. I'm

going to click initialize repository.

Repository meaning this is like my directory of code and I want to version these changes and then I can make checkpoints or save uh like save checkpoints of my application so far. So

this is like uh the start of the game and then I hit commit. Now what this commit does is it writes a snapshot of the changes in time into this memory and

at any point in time I can kind of go back and forth between the history of different states of my application. This

is important to know early on because if I make a mistake and I want to go back it's always nice to have this saved log of exactly how the code worked. Another

thing that I think is helpful to know is the way these models work is that they generate tokens. And this word token is

generate tokens. And this word token is kind of interesting. A token is not necessarily a specific character or a specific word, but it's it's some mixture of characters and spaces and

words and punctuation. And the reason why it's important is because when you're looking at this context window, uh it says that it's used 15,000 out of

200,000K context. What is that thousand

200,000K context. What is that thousand number? That's the number of tokens. So

number? That's the number of tokens. So

you can start to do a little math and you'll start to understand the ratio here. But when you have a conversation

here. But when you have a conversation with the agent, it's generating some amount of tokens. The models are generating tokens and that's using up some percentage of the working memory in

the context. So when you look at how

the context. So when you look at how tools like cursor and other similar tools uh charge for their product, it is usually based on the amount of tokens

consumed. So basically what that means

consumed. So basically what that means is the more you use it, there's usually a price with that. There's a fixed price of like a $20 a month and then you can pay for additional usage as you go. But

that's just I think helpful to understand in terms of how these products work under the hood. Now, uh

it's also helpful to mention that these models will not always give you the right answer. So, maybe let's try to do

right answer. So, maybe let's try to do something more ambitious. I don't know if anyone in the chat uh as since we're doing this live has suggestions of what we would like to build in our Space

Invaders app, but I'm open to some ideas. I feel like this is good, but I

ideas. I feel like this is good, but I want to get some powerups maybe when we get a certain score. So, inside of here, I'm going to do command N or control N

to make a new agent or new chat. And

let's say something like when we get over a score of 100, I want there to be a power up given to the ship

uh where the bullets do more damage and maybe there's a fun explosion animation.

As I was saying it, you're kind of only limited by the way that you can express your ideas and how you can work with these models to try to build interesting

things. Now, it is very likely that

things. Now, it is very likely that sometimes you will ask for something and maybe you're not specific enough. Maybe

you should have done more planning up front or maybe the model just hallucinates which is the which is basically the way of saying that even with the best intentions sometimes the

AI models just don't give you the results that you want. In the case that that happens, you need to know how to kind of spot when the model is doing something that is not good and then help get it back on track by giving it

additional instructions. So it says that

additional instructions. So it says that it added a powerup system. Uh it

increased the bullet's damage. It added

some explosion animations. It gives you visual feedback. Um, and we can go and

visual feedback. Um, and we can go and review the actual code here if we would like. And as you start to do this, even

like. And as you start to do this, even though again, you don't yet have familiarity with the code, you can start to piece together what some of these things mean because you're comparing the English representation of what it's

saying it's doing. And then these code changes over here on the right. So, if

there's a power up active, it starts to read a little bit like English. If

there's a power up active, we want to make this thing have a glow effect.

Okay, cool. So, I'm going to uh keep these changes and we're going to go back here and we're going to test this out and see how it works. So, I have to actually, you know, do pretty well here.

Let's see if I can get some. Okay, so

now I'm over 100.

We do more damage, but this is interesting, right? I don't see the

interesting, right? I don't see the changes. Maybe I need to reload uh the

changes. Maybe I need to reload uh the file. So, load in new.

file. So, load in new.

Okay, there we go. So, I reloaded the file because I needed to load the new code. And wow, this is this is wild. Uh

code. And wow, this is this is wild. Uh

those animations are actually really really good. I'm I love I actually

really good. I'm I love I actually really like this. Um

that's pretty cool. Except I think I'm going to lose. Also, am I are the lives actually working? I'm not really sure.

actually working? I'm not really sure.

Um, one thing I might want to do is give specific feedback on something that's on the screen. So, this ship, what I can do

the screen. So, this ship, what I can do is I can take these little elements up here. I can say select element and I can

here. I can say select element and I can go and pick specific things on the page.

Now, one thing you're going to notice here, this is kind of a specific thing to building a game, but there is an HTML element called a canvas. If you think of it like a paint canvas, you're literally

painting these things on the on the screen. So, I'm actually not selecting a

screen. So, I'm actually not selecting a specific element here. It's kind of drawing into the canvas, but this is a specific element. And uh it seems like

specific element. And uh it seems like down here is a specific element. So, if

I wanted to, I can select this element.

This might be helpful if you're building maybe a form for a, you know, contact me form and you want to click one specific element and send all of that information

to the chat to the agent and say like, make this larger or a different color or something. So, I just wanted to mention

something. So, I just wanted to mention you can do that. And another thing, as you start to get more advanced, you can also open up the um the developer tools

here. And then inside of here, this is a

here. And then inside of here, this is a little bit advanced at first, but you can use this to click on specific elements as well. You can see all of the code just like in the other way. And you

can do some other fancy things in here.

You might not need that at the start, but it's still just helpful to know that it exists. Now, I see a suggestion in

it exists. Now, I see a suggestion in the chat. Maybe make it hold down the

the chat. Maybe make it hold down the space bar. So, right now it's space to

space bar. So, right now it's space to shoot. Oh, actually, I can hold down the

shoot. Oh, actually, I can hold down the space bar. That's kind of nice.

space bar. That's kind of nice.

It was It was thinking ahead for me here. So, this is actually pretty good.

here. So, this is actually pretty good.

Maybe if you're in the powerup state, you should be able to move left and right faster. Let's see what that looks

right faster. Let's see what that looks like. So, again, I'm going to make a new

like. So, again, I'm going to make a new chat. I'm kind of done with this

chat. I'm kind of done with this conversation. Um, and I'm going to say

conversation. Um, and I'm going to say when the powerup is active, I want to move the ship horizontally faster.

Great. Now, as this is going, um, we can see how it works. And please, if you're watching in the chat and you have suggestions on things you would like to know as a beginner learning how to code

with AI, I would love to hear what you think. Um, let's see if this works. Now

think. Um, let's see if this works. Now

we've updated the code. So the ship moves horizontally twice as fast when the power up is active. And this

calculates the current speed based on the power up state. Okay, let's review these changes.

And again, this starts to read like English. It's making sense. So there's

English. It's making sense. So there's

an update function. And you can tell it's a function in JavaScript because of this syntax where you have this open uh open brace and left closing brace or

parenthesy. And this update is like a it

parenthesy. And this update is like a it is a function that you can call. It is

like a button that you can press. And

when I press the update button, this code is getting executed. So this code that's getting executed is we want to move faster when the powerup state is

active. Um so let's accept this change

active. Um so let's accept this change and try this again and see what we got. I'm dodging all the

bullets. I'm getting better at this.

bullets. I'm getting better at this.

Okay. I feel like I could go even faster. It's pretty good. But no, I want

faster. It's pretty good. But no, I want to go make the uh horizontal movement even faster. So,

you can then follow up and give additional conversation in the chat if you don't feel like the uh the the model or the result was hap if you were happy with that at the time. Uh, another

suggestion here, we need the shooter and the whole thing to move like it's actually in space. So, the whole back layer must move in motion. Yeah. Now,

that's like an advanced gameplay feature we could do here that I think would be pretty interesting. Um, now we've

pretty interesting. Um, now we've already covered a lot of ground. We've

talked about using git, which is a good time to actually go back. So, go back to our other view with our git view. And

I'm going to save these changes. And if

I don't want to type out it myself, I can click this sparkle icon and it can tell me exactly what changed. So, we

added power mechanics, explosion effects, and a health system. And I can commit this change. So, now we've kind of saved this snapshot, which I think is very nice and helpful. Um, we talked

about creating plans, so our initial plan to create our game. We used git. We

talked about tokens, which is what AI models generate. We talked about how

models generate. We talked about how models can hallucinate and it can get things wrong and it's kind of our job to pay attention to that and then steer the model back when things go wrong. We

talked about context. So you can open up the context menu and give additional context to the models uh as well as the context window. So we've used 10% here

context window. So we've used 10% here in this chat. We've talked about different models briefly and I think we could probably also talk about this a little bit more. So, as I mentioned,

there's um you can use auto if you want to just use the default feature and not think about models. But as you start to get more advanced, you might want to pick specific models. And I I tend to think about this in two different ways.

You have models where you want to work very fast as you're making changes like we are here and in the kind of in the foreground in a very synchronous way.

And composer is a very great model for this. It's very fast and smart and

this. It's very fast and smart and allows you to quickly try things. Uh

sometimes you want to run very complicated tasks in the background that may take a lot more work as your application as your game gets bigger as

more code is being wrote then you want to maybe use a model like sonnet or GPT5 codecs. These are from anthropic and

codecs. These are from anthropic and openi respectively. These models are

openi respectively. These models are going to be the most intelligent models in the world and they're going to allow you to solve even more tricky difficult problems. And one thing that cursor does

is it allows you to choose between all of these different tools with the same kind of friendly interface. So the same interface you can get started with and build games, you know, and try and build

your ideas. Maybe this is just something

your ideas. Maybe this is just something to learn coding uh and actually start to learn how these things work. Maybe it's

a prototype you're building for work or something else. Uh this same thing can

something else. Uh this same thing can then evolve to a tool that professional developers use to code with every single day. I use this to code and all of the

day. I use this to code and all of the team building cursor use the same product to code. So it's uh it's nice to know that the same thing can be used for that. Another thing you can use it for

that. Another thing you can use it for um is you can say let's start a new chat and I'm going to say explain

uh how this app works to me like I'm a beginner and I saw somebody mention that you can use the ask mode. Uh ask is just saying I don't want it to write me code.

I just want to ask questions. Um, so I'm going to say explain how this app works like a beginner. So you see at the top, I can actually scroll back up. It

explores files. So this agent can go and read files in our codebase. It goes and read these files and it says, "Okay, this is a space invaders game. Now

instead of you having to read the code from scratch, you can ask it to kind of progressively teach you and explain you the concepts. So now we see, and this

the concepts. So now we see, and this kind of aligns with how I described it, the index.html is the structure. Um, it

draws it into a canvas. The CSS is the visual styling. And then the game is how

visual styling. And then the game is how where the logic is at. And then it even tells you again in like a more English forward way. We have this player class.

forward way. We have this player class.

That's the triangle at the bottom.

Here's how you can move. You have the enemy class. And as I'm doing this, I

enemy class. And as I'm doing this, I might, for example, want to open up this game. JavaScript and try to compare

game. JavaScript and try to compare these two things and get an understanding of this as I'm going. So I

see enemy grid or I see bullet class. So

player bullets go up and they're green.

Enemy bullets go down and they're red.

So I look at this class and this class is a way of defining u a a type of entity inside of our our game. So one of those entities is a bullet. The

constructor is a way of kind of setting up the initial state of this class. And

when we're saying this, we're kind of referring to itself. So we're on a bullet for a given bullet in our application. We have x and y positions.

application. We have x and y positions.

We have the width, the height, the speed, and then we're able to reference these values at other places inside of this class with these functions. A

function like draw. So it's like a literal button the game can click. I'm

going to click the draw button metaphorically and actually do something. I can execute some code. The

something. I can execute some code. The

whole reason I'm explaining this is that you can demystify what's happening behind the scenes and start to learn what this code does in a way that's very visual first. The type of, you know, the

visual first. The type of, you know, the way my brain works is I love to learn by actually getting something working and then asking questions about how it was built and kind of pushing up against the

limits of my knowledge as I continue to iterate and try to make this better. Um,

so I would highly recommend doing this and then asking, you could even ask it to like um, help quiz me on understanding how the game js logic

works. You know, you can use this as

works. You know, you can use this as your tutor, as your uh, friend to help you understand how the code works. Not

just blindly accept it, but really learn how to code and how to take this and evolve it over time. So when the game loop function or what does the game loop function do and why does it call request

animation frame? You might think I have

animation frame? You might think I have no idea what request animation frame is.

Let's ask another question into the chat. What is request animation frame

chat. What is request animation frame and why do we need that? So a

long-winded way of saying you can use these tools to really level up your own knowledge. The only limiter is your

knowledge. The only limiter is your ability to ask questions. I see there is a question here. Uh do you have to select keep in order to keep the changes or does it keep them regardless? So, for

example, here uh there's undo, keep, and review. And when I'm reviewing the

review. And when I'm reviewing the changes, by default, what this is doing is it's going and modifying the files on my machine. And that's why you see the

my machine. And that's why you see the plus one plus minus. So, I don't have to explicitly hit keep. It's going to do that by default. But I can hit undo if I want to undo those changes and kind of

go back to what I had before. Now, I see a question in the chat, which is a good question, which is uh about rules files.

So, I'm gonna start a new chat and I'm going to say um help me create a rule to um

remind the agent to always make the visuals

like uh make the visuals retro and green colored.

The idea of rules is basically a way of you encoding text that you want to be included in every single conversation. Every single

conversation. So what it did is it created this rule and it says always make the visuals retro and green colored. Here are the kind of visual

colored. Here are the kind of visual style guidelines, a color palette you can use, the retro aesthetics that you can use, uh some examples that you can use. And if I save this and if I

use. And if I save this and if I actually use these changes, what's going to do is in follow-up chats, we're going to use this rule and it's going to apply

this rule to have retro green visuals.

So there's this way it's like if you see the model get something wrong and you want to correct it and make sure that it doesn't get it wrong in the future, you can ask it to write these rules which I find really helpful. Now you have to

remember every single time that I start a new chat, a new conversation, this rule is being included in that context. So when I make a new chat here,

context. So when I make a new chat here, it's aware of the changes that I've made. Um, which I think is very very

made. Um, which I think is very very important to know and to address someone's point in the chat. This

context window is something that you're needing to monitor. So when you're going back on here and you see this kind of context gauge, you really want to make sure that you don't let that get all the

way full. Because if you let it get all

way full. Because if you let it get all the way full, what it ends up doing is it automatically summarizes all of your changes. And you might find that that

changes. And you might find that that does not give you the highest quality then of your output when you're asking additional questions. So I generally try

additional questions. So I generally try to recommend keep your conversations and your chats as concise as possible so that you can really be very specific on

the changes you're trying to make. Now,

a a question I see very often from beginners is, okay, I had a really long chat and then I wanted to start a new conversation. How do I keep that context

conversation. How do I keep that context between many different conversations?

And I'll tell you what I would recommend doing, which is I'm going to make a new chat. I'm gonna say create uh a design

chat. I'm gonna say create uh a design markdown file that describes how this system

works uh and is relatively concise which we can update over time. Now this game is is pretty basic. I think in the state it's at right now the

models can understand based on the code and they won't really get confused. But

what you can ask it to do is turn your code into English into natural language.

Create a file. Maybe it's spec.md. Maybe

it's read design. MD means markdown. It

is just a way of using text and stylizing it with bold, italics, headings, and other things. And what

this means is that you now have a literal English representation. So not

even a, you know, quasi English with HTML or JavaScript or CSS. you have an English document that describes how your application works and as you're making additional changes in the future you can

say for example uh I'm going to make a new chat you can say review our uh design and you can tag this into the context

now what this means is that in this chat in the working memory of working with this model you can tell it everything you've done so far and this becomes helpful as you start to build larger and larger things again for the size of our

application right now with like three files. You don't necessarily need to do

files. You don't necessarily need to do this, but this also isn't, you know, necessarily a bad thing for yourself as well, just to kind of retain how this thing works in a very English first way,

especially if as you're just starting to learn how to code, you can use this to uh augment your knowledge. Um, can you set a threshold for summary creation?

There was a question uh in the chat. Um,

you cannot currently set a threshold. It

is when you get close to 100%. Maybe in

the future we could do something where it allows you to say actually at 75%.

But generally I would recommend trying to do this as early as possible. Like

you really want a chat for each individual feature. And if you find

individual feature. And if you find yourself trying to retain this context across many different chats I would highly recommend making this like shared file that has a state of kind of how

your application works.

Uh there was another comment here. rules

are gold to minimize the amount of chats, too. Yeah, I definitely agree.

chats, too. Yeah, I definitely agree.

Um, this kind of overview of the game could also be summarized into a rule where the rule is always going to be included in every single conversation. I

would be cautious though, you don't want to have a 2,000line rule. That's a lot of stuff that you're really trying to dump into every single conversation. So,

you do want to keep that very minimal and concise. Um, this I think is

and concise. Um, this I think is everything that you need to know to get started coding with AI, building software, and making your ideas real.

Even if you don't have coding experience yet, even if you're just getting started building websites, web applications, learning HTML, JavaScript, CSS, there's so much you can do here when you start to view code as an asset that you can

learn and you can take advantage of and not as something that's very scary or you've kind of been intimidated by coding editors and maybe what it looked like in the past. I know again I was intimidated by this at first when I was

learning as well, but new tools are making this so much more accessible for people to prototype, try out ideas, you know, build something they've always wanted to build in a way where they don't have to ask other people for

permission. You can talk into these

permission. You can talk into these tools, literally talk into these tools and build all of your ideas. So, I hope this was helpful. If you want to see me do more content that's introductory and

teaching the basics, you know, basics of programming, the basics of web development, the basics of using AI, my hope is that we can make this more accessible to a larger group of people, including those kind of adjacent

engineering roles like product managers and designers, but also those who are just entrepreneurs and are wanting to build their build their ideas and create something amazing in the world. So thank

you.