Learn Web Development& AI From Scratch

<div> is a block-level element that takes up the full width available and starts on a new line. <span> is an inline element that only takes up as much width as necessary and doesn't break the line. Use <div> for larger sections and <span> for small pieces of content within text.

<div>I take full width</div>
<span>I'm inline</span><span>Next to me</span>

Flexbox is designed for one-dimensional layouts (either a row OR a column). CSS Grid is for two-dimensional layouts (rows AND columns simultaneously). Use Flexbox for aligning items in a single direction, and Grid for complex page layouts with both rows and columns.

/* Flexbox - one direction */
.flex-container { display: flex; }

/* Grid - two directions */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

A closure is a function that has access to variables from its outer (enclosing) scope, even after the outer function has returned. Closures 'remember' the environment in which they were created. They're commonly used for data privacy, callbacks, and creating function factories.

function createCounter() {
  let count = 0; // private variable
  return function() {
    count++;
    return count;
  };
}
const counter = createCounter();
counter(); // 1
counter(); // 2

useState triggers a re-render when its value changes and is used for data that affects the UI. useRef persists values between renders WITHOUT causing re-renders, making it ideal for storing mutable values like DOM references, timers, or previous values that don't need to update the UI.

// Triggers re-render on change
const [count, setCount] = useState(0);

// Does NOT trigger re-render
const inputRef = useRef(null);
const renderCount = useRef(0);

Both can define object shapes, but interfaces can be extended and merged (declaration merging), while types are more flexible for unions, intersections, and primitives. Use interfaces for object shapes that may need extension, and types for complex type compositions or when you need unions.

// Interface - can be extended
interface User { name: string; }
interface Admin extends User { role: string; }

// Type - more flexible
type ID = string | number;
type UserWithID = User & { id: ID };

The Event Loop is Node.js's mechanism for handling asynchronous operations despite being single-threaded. It continuously checks for pending callbacks and executes them when their operations complete. This allows Node.js to handle thousands of concurrent connections without blocking.

console.log('1: Start');

setTimeout(() => {
  console.log('3: Timeout');
}, 0);

console.log('2: End');
// Output: 1, 2, 3 (async!)

Server Components render on the server, reducing JavaScript sent to the client and allowing direct database access. Client Components run in the browser and handle interactivity (useState, onClick, etc.). By default, Next.js 13+ components are Server Components. Add 'use client' for interactivity.

// Server Component (default)
async function Posts() {
  const data = await db.posts.findMany();
  return <List data={data} />;
}

// Client Component
'use client'
function Counter() {
  const [count, setCount] = useState(0);
}

Big O notation describes how an algorithm's time or space requirements grow as input size increases. O(1) is constant time (best), O(n) is linear, O(n²) is quadratic (slower). It helps you choose efficient algorithms—the difference between O(n) and O(n²) can mean seconds vs hours for large datasets.

// O(1) - Constant
arr[0];

// O(n) - Linear
arr.find(x => x === target);

// O(n²) - Quadratic
for (i) { for (j) { } }