` | Container | `

Group of elements

` | | `` | *** ## CSS: The Style CSS (Cascading Style Sheets) controls how HTML elements look. ### Adding Styles ```html theme={null} ``` ### CSS Selectors ```css theme={null} /* Select by element */ h1 { color: blue; } /* Select by class */ .card { background: white; } /* Select by ID */ #header { height: 60px; } ``` **Beginner Tip**: Use **classes** (`.classname`) for styles you'll reuse. Use **IDs** (`#idname`) for unique elements. ### The Box Model Every HTML element is a box with **4 layers**. Think of it like a package: ```mermaid theme={null} graph LR subgraph Box["📦 The Box Model"] direction LR M["Margin"] --> B["Border"] --> P["Padding"] --> C["Content"] end style M fill:#fef3c7,stroke:#f59e0b,color:#000 style B fill:#dbeafe,stroke:#3b82f6,color:#000 style P fill:#dcfce7,stroke:#22c55e,color:#000 style C fill:#fce7f3,stroke:#ec4899,color:#000 ``` The CSS Box Model

| Layer | What it is | CSS Example | | -------------- | ------------------------ | ------------------------- | | 📝 **Content** | Your text, images, etc. | `width: 200px` | | 🧸 **Padding** | Space inside the border | `padding: 20px` | | 🖼️ **Border** | The visible edge | `border: 2px solid black` | | 📦 **Margin** | Space outside the border | `margin: 10px` | **Real-world analogy:** * 📝 **Content** = The gift inside the box * 🧸 **Padding** = Bubble wrap protecting the gift * 🖼️ **Border** = The cardboard box itself * 📦 **Margin** = Space between boxes on the shelf *** ## JavaScript: The Behavior JavaScript makes websites interactive. ### Your First Script ```html theme={null} ``` ### JavaScript Basics ```javascript theme={null} // Variables let name = 'Alice'; const age = 20; // Functions function greet(person) { return `Hello, ${person}!`; } // Calling a function console.log(greet(name)); // "Hello, Alice!" ``` **Beginner Tip**: Use `const` for values that don't change, and `let` for values that might change. Avoid using `var`. ### DOM Manipulation JavaScript can change HTML elements: ```javascript theme={null} // Find an element const heading = document.querySelector('h1'); // Change its content heading.textContent = 'New Title!'; // Change its style heading.style.color = 'red'; ``` *** ## Putting It All Together ```html theme={null} My Interactive Page

Welcome!

Click the button below.

``` *** ## Key Takeaways Defines what content appears on the page Controls how content looks Makes content interactive *** ## Learn More W3Schools HTML Guide W3Schools CSS Guide W3Schools JS Guide *** **Next up**: [Tailwind CSS →](/learn/workshops/nextjs-workshop/02-tailwind-css)

Hello, World!

` to `

` | Headings | `

Title

Welcome!