AI-Generated Code Survival Notes (HTML + CSS +
JS)
These notes are designed for beginners with zero coding knowledge who are using AI-generated code.
You’ll learn how to read, understand, edit, and update your code step by step.
1. Understanding Code Structure
Every web project has 3 main parts:
1. HTML (Structure) → This is the skeleton of your website (what content appears).
2. Example: Headings, paragraphs, images, buttons.
3. Think of it as: What is shown?
4. CSS (Style) → This is the design (how it looks).
5. Example: Colors, fonts, spacing, alignment.
6. Think of it as: How is it shown?
7. JavaScript (Logic/Actions) → This is the brain (what happens when you click/do something).
8. Example: Button clicks, animations, forms, calculators.
9. Think of it as: What happens when you interact?
2. HTML Basics
• Written with tags like <h1> , <p> , <button> .
• Structure looks like:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" href="[Link]"> <!-- CSS link -->
</head>
<body>
1
<h1>Hello World</h1>
<p>This is my site.</p>
<button>Click Me</button>
<script src="[Link]"></script> <!-- JS link -->
</body>
</html>
🔑 Notes:
• <head> → Metadata, CSS, title.
• <body> → All visible content.
• <link> → Connects CSS.
• <script> → Connects JavaScript.
3. CSS Basics
• Written as selectors + styles:
h1 {
color: blue;
font-size: 24px;
}
button {
background: red;
color: white;
padding: 10px;
}
🔑 Notes:
• h1 { ... } → Targets all <h1> .
• color → Text color.
• background → Background color.
• padding → Inner space.
• margin → Outer space.
4. JavaScript Basics
• Written as functions and actions:
2
[Link]("button").addEventListener("click", function() {
alert("Button clicked!");
});
🔑 Notes:
• [Link]("button") → Finds the button.
• .addEventListener("click", ...) → Waits for a click.
• alert("...") → Shows a popup.
5. How to Comment Code (Documentation)
Always write notes inside code so you remember later:
• In HTML:
<!-- This is my main heading -->
<h1>Hello</h1>
• In CSS:
/* Style for heading */
h1 {
color: red;
}
• In JS:
// Button click alert
alert("Hi");
6. Adding/Updating Features
✅ Steps to follow when editing:
1. HTML → Add the element (e.g., a new button).
3
<button id="newBtn">New Action</button>
1. CSS → Style it.
#newBtn {
background: green;
color: white;
}
1. JS → Add logic.
[Link]("newBtn").addEventListener("click", function() { [Link]("New button
clicked"); });
---
## 7. Debugging & Testing
Use **Browser DevTools** (Right click → Inspect → Console):
- **Inspect Element** → See & edit HTML/CSS live.
- **Console** → Shows errors & logs from JS.
- **Responsive mode** → Test mobile view.
🔑 Debug Checklist:
- HTML → Did you close tags properly?
- CSS → Is the selector correct?
- JS → Any errors in console?
---
## 8. Masterkeys + Pro Tips
- Always keep **HTML → CSS → JS flow** in mind.
- Use `id="something"` for unique elements.
- Use `class="something"` for styling multiple items.
- Indent code properly for readability.
- Always save files before testing.
- Reload browser with **Ctrl + Shift + R** to avoid cache issues.
---
4
## 9. Example Flow (Add a Feature)
Feature: Add a button that changes page background color.
1. **HTML**:
```html
<button id="bgBtn">Change Background</button>
1. CSS:
#bgBtn {
background: purple;
color: white;
padding: 10px;
}
1. JS:
[Link]("bgBtn").addEventListener("click", function() {
[Link] = "lightblue";
});
10. Workflow for Editing AI-Generated Code
1. Read HTML → See what’s on the page.
2. Find CSS → Identify what styles are applied.
3. Locate JS → Check actions or interactivity.
4. Comment Code → Write your own notes.
5. Edit Safely → Change one thing at a time.
6. Test in Browser → Refresh & check.
7. Fix Errors → Look at console.
✅ With these notes, you can:
• Understand any AI-generated HTML/CSS/JS project.
• Add or remove features step by step.
• Debug issues without panic.
• Keep your code clean with comments.
✨ Basically, it’s your cheat sheet to survive and grow as a coder.