Understanding Code Basics (With AI Help)

What You'll Learn

You don't need to become a programmer to use AI coding tools. But understanding a few basic concepts will make you dramatically more effective. This lesson covers the minimum you need to know — think of it as learning enough of a language to order food, not to write poetry.

By the end, you'll understand:

• What HTML, CSS, and JavaScript each do
• How to read code well enough to spot obvious problems
• Basic concepts: variables, functions, and conditions
• How files and folders organize a project

Time needed: About 30 minutes.

The Three Languages of the Web

Almost every web page is built with three languages, each with a specific job:

HTML — The Structure

HTML (HyperText Markup Language) defines what's on the page. Think of it as the skeleton:

<h1>Welcome to My Site</h1>
<p>This is a paragraph of text.</p>
<button>Click me</button>

HTML uses tags — words wrapped in angle brackets like <h1> and </h1>. Tags come in pairs: an opening tag and a closing tag (with a /). Everything between them is the content.

Common tags you'll see:

• <h1> to <h6> — Headings (h1 is biggest, h6 is smallest)
• <p> — Paragraph
• <div> — A generic container (like a box)
• <a href="url"> — A link
• <img src="image.jpg"> — An image
• <ul> and <li> — Unordered list and list items
• <button> — A clickable button
• <input> — A text field or form input

You don't need to memorize these. You just need to recognize them when the AI generates code. If you see <h1>Welcome</h1>, you know it's a heading that says "Welcome."

CSS — The Style

CSS (Cascading Style Sheets) defines how things look. Colors, sizes, spacing, layout:

h1 {
  color: blue;
  font-size: 32px;
}

button {
  background-color: #E94560;
  padding: 10px 20px;
  border-radius: 8px;
}

CSS follows a pattern: select something, then set properties. The h1 { } part says "for all h1 elements, apply these styles." Each line inside sets a property: color: blue; means "make the text blue."

Common CSS properties:

• color — Text color
• background-color — Background color
• font-size — Text size (in px, rem, or em)
• padding — Space inside an element
• margin — Space outside an element
• display: flex — Flexible layout (you'll see this a lot)
• border-radius — Rounded corners

JavaScript — The Behavior

JavaScript makes things interactive. When you click a button and something happens — that's JavaScript:

let count = 0;

function incrementCounter() {
  count = count + 1;
  document.getElementById("counter").textContent = count;
}

JavaScript is the most complex of the three, and it's also where the AI helps you the most. You'll rarely need to write JavaScript from scratch — the AI is very good at generating it.

The Four Concepts You Need

You don't need to learn programming. But these four concepts appear in almost every piece of code the AI generates:

1. Variables — Storing Information

A variable is a named box that holds a value:

let userName = "Alex";
let age = 28;
let isLoggedIn = true;

When you see let, const, or var in JavaScript, it's creating a variable. The name is on the left, the value is on the right.

Why this matters: When the AI generates code with variables, you can change the values to customize the result. If you see let maxItems = 10, you know you can change 10 to whatever number you want.

2. Functions — Reusable Actions

A function is a named set of instructions:

function greetUser(name) {
  return "Hello, " + name + "!";
}

Functions are defined with function (or sometimes as arrow functions: const greet = (name) => ...). They take inputs (called parameters, like name above) and produce outputs.

Why this matters: When the AI creates a function, the function name usually tells you what it does. calculateTotal(), sendEmail(), formatDate() — you can read the name to understand the code's purpose.

3. Conditions — Making Decisions

Code can do different things based on conditions:

if (age >= 18) {
  showContent();
} else {
  showAgeRestriction();
}

if checks a condition. If it's true, the first block runs. Otherwise, the else block runs.

Why this matters: When the AI adds conditional logic, you can check if the conditions make sense. "If age is 18 or more, show content" — does that match what you wanted?

4. Loops — Repeating Actions

Loops repeat an action for each item in a list:

const colors = ["red", "blue", "green"];

for (let color of colors) {
  console.log(color);
}

This prints each color. You'll also see .map(), .forEach(), and .filter() — these are all ways to process lists.

Why this matters: When the AI generates code to display a list of items (products, blog posts, users), it uses loops. Understanding this helps you modify the output.

How Projects Are Organized

Code lives in files, and files live in folders. Here's a typical structure:

my-project/
├── index.html       ← The main page
├── style.css        ← Styling
├── script.js        ← JavaScript behavior
└── images/
    ├── logo.png
    └── hero.jpg

For more complex projects (like those built with React), the structure looks different:

my-app/
├── src/
│   ├── App.js         ← Main component
│   ├── index.js       ← Entry point
│   └── components/
│       ├── Header.js
│       ├── Footer.js
│       └── Button.js
├── public/
│   └── index.html
├── package.json       ← Project dependencies
└── README.md          ← Project description

The important things to notice:

• .html files are HTML, .css files are CSS, .js files are JavaScript
• package.json lists what external libraries the project uses
• The src/ folder is where the main code lives
• The public/ folder is for static files (images, icons)

You don't need to memorize this. Just know that code is organized into files with specific roles, and the AI will create the right file structure for you.

Exercise: Reading AI-Generated Code

Let's practice reading code without writing any. Ask your AI assistant:

Create a simple to-do list app with HTML, CSS, and JavaScript in a single file. Include the ability to add items, mark them as complete (strikethrough), and delete them.

When the AI generates the code, try to identify:

1. The HTML section: Find the <input> where you type, the <button> to add items, and the <ul> where items appear
2. The CSS section: Find where colors, fonts, and layout are defined
3. The JavaScript section: Find the functions — there should be ones for adding, completing, and deleting items. Can you tell what each function does from its name?

You don't need to understand every line. Just try to see the overall structure: HTML creates the elements, CSS styles them, JavaScript makes them interactive.

Quick Reference: Reading Code Like a Map

When looking at AI-generated code, focus on:

What to Look For	What It Tells You
HTML tags like <div>, <h1>, <button>	What elements are on the page
CSS properties like color, background, padding	How things look
Function names like handleClick, submitForm	What actions are available
Variable names like userName, itemList, isVisible	What data is being tracked
Comments starting with // or /* */	Explanations the AI wrote for you

Checkpoint

Before moving on, make sure you can:

• Look at an HTML tag and guess what it displays (heading, paragraph, button, etc.)
• Look at CSS and identify color and size changes
• Recognize a function in JavaScript (looks like function name() { })
• Understand the basic file structure of a web project

Remember: You don't need to memorize syntax. The AI writes the code — you just need to understand enough to direct it and verify its work. Think of yourself as the architect, not the bricklayer.

What's Next

Now that you can read code at a basic level, we'll put this knowledge to use. In the next lesson, you'll build your first real webpage — a personal portfolio — with the AI doing the heavy lifting while you make the creative decisions.