DEV Community: Khawaja Khurram (MAK)

JavaScript Closures Explained (Without the Academic Jargon)

Khawaja Khurram (MAK) — Mon, 09 Nov 2026 14:00:19 +0000

The loop bug, the private counter, and why your React useEffect is stale. A practical guide to closures for developers who just want to ship.

Most explanations of closures start with "a closure is a function that captures its lexical scope." That's true. It's also useless if you're debugging a React component at 11 PM.

Let's look at the three places closures actually matter: the loop bug, the private counter, and the stale useEffect.

But first, the core idea. In 60 seconds.

The Core Idea

A closure is a function that remembers the variables from where it was defined — even after that scope has finished running.

Here's the whole concept in one snippet:

function createGreeter(name) {
  const greeting = "Hello";

  return function () {
    return greeting + ", " + name;
  };
}

const greetAlice = createGreeter("Alice");
console.log(greetAlice()); // "Hello, Alice"

createGreeter has finished running. Its local variables (name, greeting) should be gone. But the returned function still has them.

That's a closure.

The mental model: When you define a function inside another function, the inner function carries a backpack. Every time it's called, it reaches into the backpack for name and greeting.

Bug #1: The Loop (The One That Gets Everyone)
This is the most common closure bug in JavaScript. If you've been coding for more than a year, you've probably hit it.

javascript

for (var i = 0; i < 3; i++) {
  setTimeout(function () {
    console.log(i);
  }, 100);
}

What you expect: 0, 1, 2
What you get: 3, 3, 3

Why?
var is function-scoped, not block-scoped. There is only one i for the entire loop. All three callbacks close over that same i. By the time the setTimeouts fire, the loop has finished, and i is 3.

The Fix
javascript

for (let i = 0; i < 3; i++) {
  setTimeout(function () {
    console.log(i);
  }, 100);
}

What you expect: 0, 1, 2
What you get: 0, 1, 2

let is block-scoped. Each iteration creates a new i. Each callback gets its own backpack with its own i.

The takeaway: If you see a loop with a setTimeout and a var, it's probably a bug. Use let.

Bug #2: The Private Counter (The Pattern You Already Use)

You've probably used this pattern without knowing its name. It's the module pattern. It's how JavaScript implements private state before #privateFields.

javascript

function createCounter() {
  let count = 0;

  return {
    increment() { count++; },
    decrement() { count--; },
    value() { return count; },
  };
}

const counter = createCounter();

counter.increment();
counter.increment();
counter.increment();
console.log(counter.value()); // 3

What you can't do:

counter.count = 100 — doesn't affect the internal count.
delete counter.count — no effect.
console.log(counter.count) — undefined.

There is no count _ property on _counter. The only way to touch it is through the three methods.

Why This Works

All three methods close over the same count. They share a backpack.

counter.increment() ────┐
counter.decrement() ────┼──→ [ count: 3 ]
counter.value() ────┘

Every call to createCounter() creates a new count and a new backpack.

javascript

const c1 = createCounter();
const c2 = createCounter();

c1.increment();
c1.increment();
c2.increment();

console.log(c1.value()); // 2
console.log(c2.value()); // 1

Two counters. Two backpacks. Zero shared state.

The takeaway: If you need state that no other code can touch, a closure is the tool. It's the reason Redux, Zustand, and every other state library uses this pattern internally.

Bug #3: The Stale Closure (The React One)

This is the version that bit me last week. It's the reason _useEffect _ dependency arrays exist.

jsx

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const id = setInterval(() => {
      console.log("Interval sees count:", count);
    }, 1000);

    return () => clearInterval(id);
  }, []); // ⚠️ Empty deps array

  return <button onClick={() => setCount(c => c + 1)}>+1</button>;
}

What you expect: The interval logs the current _count _ (0, then 1, then 2, ...).

What actually happens: It logs 0 forever.

Why?

The callback inside setInterval closes over count from the first render. It's a snapshot. When count updates, the interval still sees the old value — the backpack never changed.

The Fixes

Fix 1: Add count to the dependency array

jsx

useEffect(() => {
  const id = setInterval(() => {
    console.log("Interval sees count:", count);
  }, 1000);
  return () => clearInterval(id);
}, [count]); // ✅ Re-creates the interval when count changes

Now every time count changes, the effect re-runs with a fresh backpack.

Fix 2: Use the functional updater

If you're using count inside setCount, you don't need count in the closure at all:

jsx

useEffect(() => {
  const id = setInterval(() => {
    setCount(c => c + 1); // ✅ Reads fresh value from React
  }, 1000);
  return () => clearInterval(id);
}, []); // ✅ Empty array is correct here

This is the fix I use most. It's cleaner and avoids the re-render churn.

The takeaway: If your useEffect callback uses a variable that changes, either add it to the deps array or use a functional updater. If the callback only uses setState or refs, the empty array is safe.

The Rule of Thumb

A closure captures the variable, not the value.

If the variable is var, all closures share it.
If the variable is let, each closure gets its own.
If you mutate the variable after creating the closure, the closure sees the new value.
If you rebind the variable (x = newThing), the closure still sees the old one unless it 's in a scope that saw the rebind.

That's it. That's the whole language feature.

When to Use Closures

Private state. The counter pattern. No global variables.
Callbacks. setTimeout, event handlers, Promise.then — they all rely on closures to remember the variables they need.
Factory functions. createGreeter("Alice") returns a function. The "Alice" is baked in.
Module pattern. Wrap a module in an IIFE. Everything inside is private, except what you export.

When Not to Use Closures

When you need to break early. A closure can't break a loop from outside.
When the closure would capture a huge object. Every captured variable stays in memory.
When a plain function would do. If you don't need the outer scope, don't create a closure.

The 30-Second Summary

A closure is a function that remembers its outer variables.
var in loops shares the variable. let gives each iteration its own.
Closures are how JavaScript implements private state.
If your React useEffect sees stale values, add them to the deps array or use a functional updater.

That's everything I wish someone had told me when I was learning.

If you want the full breakdown — with the memory diagram, the interactive demo, and the "Why does this break when I pass a method as a callback?" follow-up — it's on my site:

👉 JavaScript Closures — The Full Guide

If this helped, consider sharing it with someone who's stuck on the loop bug. It's the one that keeps giving.

Python Slicing Explained

Khawaja Khurram (MAK) — Sat, 07 Nov 2026 17:38:52 +0000

📚 This article was originally published on MAK Studio. Check out the full interactive lesson with live demos and code examples.

Home ›
Courses ›
Python ›
Problems ›
Slicing

🐍 Concept · 4 min read

Python slicing. Indices point between elements.

The a[start:stop:step] syntax is elegant once you understand the mental model. The key insight: indices point between elements, not at them. The start index is the boundary before the first element you want; the stop index is the boundary after the last. That's why a[1:4] is three elements, not four. Once you see the boundaries, 90% of slicing confusion disappears.

Short answer: a[start:stop:step] — start inclusive, stop exclusive, step defaults to 1. a[1:4] is elements 1, 2, 3. a[:] copies. a[-3:] is the last 3. a[::2] takes every other. a[::-1] reverses. Slicing returns a new sequence — it doesn't modify the original. Negative indices count from the end. Missing values default to the ends (or to 1 for step). Slice assignment (a[1:3] = [...]) mutates in place, but that's a different operation.

✅ The mental model

Indices are boundaries, not elements.

mental-model.py
Copy

Python
Explanation

a = ['A', 'B', 'C', 'D', 'E']
# 0 1 2 3 4 ← element indices
# -5 -4 -3 -2 -1 ← negative indices

# ↑ ↑ ↑ ↑ ↑ ↑
# 0 1 2 3 4 5 ← boundary indices
# -5 -4 -3 -2 -1 ← negative boundaries

# The slice a[start:stop] selects elements between
# boundary `start` and boundary `stop`.

a[1:4] # ['B', 'C', 'D'] — boundaries 1 to 4
a[0:3] # ['A', 'B', 'C'] — boundaries 0 to 3
a[2:2] # [] — empty (boundaries coincide)
a[1:5] # ['B', 'C', 'D', 'E'] — from boundary 1 to end

# The full list is boundaries 0 to 5:
a[0:5] # ['A', 'B', 'C', 'D', 'E']

# That's why len(a) is a valid stop — it's the
# boundary after the last element.
a[0:len(a)] # same as a[:]

# Negative boundaries:
a[-3:] # ['C', 'D', 'E'] — from boundary -3 to end
a[:-2] # ['A', 'B', 'C'] — from start to boundary -2
a[-3:-1] # ['C', 'D'] — from -3 to -1

# Defaults:
# start = 0 (or -len(a) for negative step)
# stop = len(a) (or -1 for negative step)
# step = 1

a[:] # all — defaults for both
a[2:] # from 2 to end
a[:3] # from start to 3
a[:] # all

The key insight: boundaries vs elements

 Elements: ['A', 'B', 'C', 'D', 'E']
 Indices: 0 1 2 3 4

 Boundaries: 0 1 2 3 4 5
 | | | | | |
 [ A ][ B ][ C ][ D ][ E ]

 A slice a[i:j] takes everything between
 boundary i and boundary j.

 a[1:4] takes elements between boundary 1
 and boundary 4 → B, C, D (3 elements).

 a[0:5] takes everything → A, B, C, D, E.

 a[2:2] takes nothing (empty slice).

Why this matters:

 1. len(a) is a valid stop.
 a[0:len(a)] == a[:] == whole list.
 If indices pointed at elements, len(a)
 would be out of range.

 2. Slices compose cleanly.
 a[0:3] + a[3:6] == a[0:6].
 If stop were inclusive, a[3:6] would
 start at element 3, but a[0:3] already
 ended at element 3 — overlap!

 3. Empty slices are natural.
 a[i:i] is always empty.
 Useful for insertion:
 a[2:2] = [x, y] # insert before index 2

 4. Zero-based indexing is consistent.
 a[0] is the first element (between 0 and 1).
 a[0:1] is the first element (between 0 and 1).

The off-by-one bug:

 ❌ for i in range(len(a)):
 a[i:i+3] # misses some elements
 ✅ for i in range(0, len(a), 3):
 a[i:i+3] # chunks of 3

 ❌ a[1:4] == 4 elements? # no, 3
 ✅ a[1:4] == 3 elements (1, 2, 3)

Once you see boundaries, the rest follows.

Common slicing patterns:

 a[:] — copy (all)
 a[1:] — all except first
 a[:5] — first 5
 a[-5:] — last 5
 a[2:5] — indices 2, 3, 4
 a[::2] — every other (0, 2, 4, ...)
 a[1::2] — every other starting at 1 (1, 3, 5, ...)
 a[::-1] — reversed
 a[-1] — last element
 a[-2:] — last 2
 a[:-2] — all but last 2
 a[1:-1] — all but first and last

The boundaries model explains all of these
without special cases.

⚠️ Slicing out of range:

 a[10:20] returns [] (empty), not an error.
 a[0:1000] returns the whole list (clamps to len).

 Out-of-range indices in slices don't raise —
 they're clamped. This is different from a[10]
 (single element access), which raises IndexError.

 Why the difference:
 Slicing is a range operation — it can
 gracefully return fewer items than requested.
 Indexing is a specific element access —
 out-of-range means the element doesn't exist.

 This is by design, and it's a feature:
 a[:1000] is "up to 1000 items" — works if
 the list is shorter.
 a[1000] is "the 1000th item" — fails if
 the list is shorter.

✅ Every slice variant

The patterns you'll actually use.

slices.py
Copy

Python
Output

a = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

# Basic slices
a[2:5] # [2, 3, 4]
a[:3] # [0, 1, 2] first 3
a[7:] # [7, 8, 9] last 3
a[-3:] # [7, 8, 9] last 3 (same)
a[:-3] # [0, 1, ..., 6] all but last 3
a[2:-2] # [2, 3, 4, 5, 6, 7]

# Step
a[::2] # [0, 2, 4, 6, 8] every other
a[1::2] # [1, 3, 5, 7, 9] every other starting at 1
a[::3] # [0, 3, 6, 9] every third
a[2::3] # [2, 5, 8]

# Reverse
a[::-1] # [9, 8, 7, 6, 5, 4, 3, 2, 1, 0]
a[5:2:-1] # [5, 4, 3] from 5 down to 3
a[5::-1] # [5, 4, 3, 2, 1, 0] from 5 to start, reversed
a[:2:-1] # [9, 8, 7, 6, 5, 4, 3] from end to 3, reversed

# Reverse without slicing
list(reversed(a)) # [9, 8, 7, ..., 0]

# Strings (same syntax, returns str)
s = "Hello, World!"
s[0:5] # 'Hello'
s[-6:] # 'World!'
s[::-1] # '!dlroW ,olleH'
s[::2] # 'Hlo ol!'

# Tuples (same syntax, returns tuple)
t = (1, 2, 3, 4, 5)
t[1:4] # (2, 3, 4)
t[::-1] # (5, 4, 3, 2, 1)

# Slicing is a copy
a = [1, 2, 3, 4, 5]
b = a[1:4] # [2, 3, 4]
b[0] = 99
print(a) # [1, 2, 3, 4, 5] — unchanged
print(b) # [99, 3, 4]

# Slice assignment (mutates)
a = [1, 2, 3, 4, 5]
a[1:4] = [10, 20, 30]
print(a) # [1, 10, 20, 30, 5]

# Slice deletion
a = [1, 2, 3, 4, 5]
del a[1:3]
print(a) # [1, 4, 5]

# Slice insertion (assign a longer slice)
a = [1, 2, 3]
a[1:1] = [10, 20] # insert before index 1
print(a) # [1, 10, 20, 2, 3]

# Slice replacement (assign a shorter slice)
a = [1, 2, 3, 4, 5]
a[1:4] = ['X'] # replace 3 elements with 1
print(a) # [1, 'X', 5]

The slice object:

 a[1:4] is equivalent to a[slice(1, 4)]
 a[::2] is equivalent to a[slice(None, None, 2)]
 a[::-1] is equivalent to a[slice(None, None, -1)]

 slice(start, stop, step) is a built-in class.
 It's immutable and hashable.

 You can create slices and reuse them:
 first_three = slice(0, 3)
 a[first_three] # same as a[0:3]
 b[first_three] # same on a different sequence

 Rarely needed, but useful for parameterized code.

Common slice patterns by use case:

 Copy a list:
 b = a[:] or b = a.copy() or b = list(a)

 Last n items:
 a[-n:]

 All but last n:
 a[:-n]

 First n:
 a[:n]

 All but first n:
 a[n:]

 Every other:
 a[::2]

 Reverse:
 a[::-1]

 Strip first and last:
 a[1:-1]

 Every nth starting at k:
 a[k::n]

 Delete a range:
 del a[1:4]

 Replace a range:
 a[1:4] = [new_items]

 Insert before index k:
 a[k:k] = [new_items]

 Extract sub-sequences:
 a[i:j] for arbitrary i, j

Strings — the same syntax, returns str:

 s[0:5] # first 5 chars
 s[-5:] # last 5 chars
 s[::2] # every other char
 s[::-1] # reversed string

 String slicing is extremely common:
 s[:3] == 'abc' if s starts with 'abc' # prefix check
 s[-4:] == '.txt' # extension check
 s[1:-1] # strip quotes

Tuples — same syntax, returns tuple:

 t[1:4] # sub-tuple
 t[::-1] # reversed tuple

 Tuples are immutable, so slice assignment
 doesn't apply (t[1:4] = [...] raises TypeError).

Byte arrays — same syntax, returns bytearray:

 b = bytearray(b'hello')
 b[1:4] # bytearray(b'ell')

 Slice assignment works on bytearray (mutable).

memoryview — slicing doesn't copy:

 mv = memoryview(data)
 mv[1:4] # a memoryview, not a copy

 For binary protocols, memoryview avoids copies.
 Slicing a memoryview is O(1) — it shares the
 underlying buffer.

The copy vs view distinction:

 ✅ Slicing a list → new list (copy)
 ✅ Slicing a tuple → new tuple (copy)
 ✅ Slicing a str → same string (immutable, no copy)
 ✅ Slicing a bytearray → new bytearray (copy)
 ✅ Slicing a memoryview → new memoryview (view)

 The rule: slicing mutable sequences creates
 a copy; slicing immutable sequences returns
 the same object (or a new one, but no
 meaningful copy).

⚠️ Slice assignment changes length:

 a = [1, 2, 3, 4, 5]
 a[1:3] = [10] # replace 2 with 1
 # [1, 10, 4, 5]

 a[1:3] = [10, 20, 30] # replace 2 with 3
 # [1, 10, 20, 30, 4, 5]

 a[1:1] = [99] # insert (replace 0 with 1)
 # [1, 99, 2, 3, 4, 5]

 a[1:4] = [] # delete range
 # [1, 4, 5]

 This is unique to slice assignment.
 Single-element assignment (a[1] = x) doesn't
 change length — it replaces one element.

 The length of the assignment can differ from
 the length of the slice being replaced.
 The list adjusts. This is powerful but
 surprising the first time.

✅ The off-by-one patterns

What the boundaries model fixes.

off-by-one.py
Copy

Python
Output

# The classic: "last n elements"
a = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

# ❌ Wrong (if you think stop is inclusive)
a[7:10] # [7, 8, 9] — actually works, but confusing
a[7:9] # [7, 8] — misses 9

# ✅ Right
a[-3:] # [7, 8, 9]
a[7:] # [7, 8, 9]

# The rule: a[-n:] gives the last n
# It works because -n is the boundary n from the end.

# "all but first and last"
a[1:-1] # [1, 2, 3, 4, 5, 6, 7, 8]

# "chunks of 3"
for i in range(0, len(a), 3):
 chunk = a[i:i+3]
 print(chunk)
# [0, 1, 2]
# [3, 4, 5]
# [6, 7, 8]
# [9]
# No off-by-one — the slice handles it.

# "split in half"
mid = len(a) // 2
first_half = a[:mid]
second_half = a[mid:]
print(first_half) # [0, 1, 2, 3, 4]
print(second_half) # [5, 6, 7, 8, 9]

# "pair consecutive"
pairs = list(zip(a[::2], a[1::2]))
print(pairs)
# [(0, 1), (2, 3), (4, 5), (6, 7), (8, 9)]
# a[::2] is the evens, a[1::2] is the odds.
# zip pairs them. No off-by-one.

# "trim N from both ends"
n = 2
trimmed = a[n:-n]
print(trimmed) # [2, 3, 4, 5, 6, 7]

# "the middle five"
start = (len(a) - 5) // 2
middle = a[start:start + 5]
print(middle) # [2, 3, 4, 5, 6]

# "every third from index 1"
a[1::3] # [1, 4, 7]

# "is it a palindrome?"
s = 'racecar'
is_palindrome = s == s[::-1] # True

The off-by-one fix — three rules:

1. For "first n":
 a[:n]

 The boundary n is after the nth element.
 If n == len(a), a[:len(a)] is the whole
 list. No error, no special case.

2. For "last n":
 a[-n:]

 The boundary -n is n from the end.
 Works for any n <= len(a).
 a[-len(a):] is the whole list.

3. For "between n and m":
 a[n:m]

 From boundary n to boundary m.
 Number of elements: m - n.

 a[2:5] → 5 - 2 = 3 elements (indices 2, 3, 4)
 a[0:len(a)] → len(a) elements (whole list)
 a[2:2] → 0 elements (empty slice)

The mental model in one sentence:

 A slice selects elements between two boundaries.
 Boundaries are between elements, so boundary i
 is the position before element i and after
 element i-1.

The "number of elements" formula:

 elements in a[i:j] = j - i (for i <= j)

 elements in a[i:j:k] = ceil((j - i) / k)
 (for k > 0)

 This is what makes slices predictable.
 You can calculate the length without
 constructing the slice.

Common mistakes and fixes:

❌ "I want the last 3" → a[len(a)-3:len(a)]
✅ a[-3:]

❌ "I want the first 5" → a[0:5] (correct)
 But confusing if you think 5 is inclusive.
✅ a[:5]

❌ "I want elements 2 through 5 inclusive"
 → a[2:6] (add 1 to the stop)
✅ a[2:6] — 6 is the boundary after element 5.
 Or use a[2:5+1] to make the intent clear.

❌ "I want to iterate from the end"
 → for i in range(len(a)-1, -1, -1): a[i]
✅ for x in reversed(a):
 or for x in a[::-1]:
 or for x in a[::-1] (slice creates a copy)

 For iteration only, reversed(a) is efficient
 (returns an iterator, no copy).

❌ "I want every second element"
 → a[0], a[2], a[4], ...
✅ a[::2]

❌ "I want the second half"
 → a[len(a)//2:len(a)]
✅ a[len(a)//2:]

Slices and strings:

 s = "hello world"
 s[:5] # 'hello'
 s[-5:] # 'world'
 s[::2] # 'hlowrd'
 s[::-1] # 'dlrow olleh'

 String slicing is the same model.
 Boundaries work the same.
 Common uses:
 if s.startswith('hello'): # or s[:5] == 'hello'
 if s.endswith('.txt'): # or s[-4:] == '.txt'
 s[1:-1] # strip quotes
 s[::-1] # reverse (palindrome check)

The chain of boundaries:

 a = [10, 20, 30, 40, 50]
 # 0 1 2 3 4 element index
 # -5 -4 -3 -2 -1 negative index
 # | | | | | |
 # 0 1 2 3 4 5 boundary index
 # | | | | | |
 # [10 ][20 ][30 ][40 ][50]

 Boundary 0: before element 0
 Boundary 1: after element 0, before element 1
 ...
 Boundary 5: after element 4 (end of list)

 Negative boundaries:
 -1 = 5 (end)
 -2 = 4 (before last element)
 -3 = 3
 ...
 -5 = 0 (start)
 -6 = -1 (before start, invalid for slicing)

 a[i:j] takes elements between boundary i
 and boundary j.

 This is the whole model.
 Once you internalize it, slices become
 intuitive.

Don't confuse slicing with indexing. a[2] returns the element at index 2. a[2:3] returns a list containing that element. a[2:3] is [element], not element. This matters for two reasons. (1) Type: a[2] is whatever type the element is; a[2:3] is always a list. (2) Error behavior: a[10] raises IndexError if the list has fewer than 11 elements; a[10:11] returns [] (no error). Knowing which to use is important — for a single element, use a[i]; for a sub-sequence, use a[i:j]. The common bug: result = a[i:i+1] when you wanted result = a[i]. The slice returns a list of one; the index returns the element.

⚠️ Common mistakes

The slicing mistakes that cost real time.

a[i:j] thinking stop is inclusive

Gives j - i elements. Fix: add 1 to stop for inclusive.

a[i:i+1] when you want a[i]

Returns a list, not an element. Fix: a[i] for one element.

a[:] expecting a deep copy

It's shallow. Fix: copy.deepcopy(a).

Slice assignment thinking it replaces

It can change length. Fix: a[i:j] = list resizes.

Negative step without matching start/stop

a[1:5:-1] is empty. Fix: a[5:1:-1].

Slicing a dict

TypeError — dicts aren't sequences. Fix: list(d)[i:j].

Using a[::-1] for iteration

Creates a copy. Fix: reversed(a) for iteration.

Slicing a generator

TypeError — no __getitem__. Fix: list(gen)[i:j] or itertools.islice.

❓ Frequently asked

How does Python slicing work?

The syntax is a[start:stop:step]. It returns a new sequence from index start (inclusive) to stop (exclusive), with the given step. Example: [0, 1, 2, 3, 4][1:4] gives [1, 2, 3] — starts at index 1, stops before index 4. The key insight: indices point between elements, not at them.

What does a[:] do?

a[:] returns a shallow copy of the entire sequence. It's equivalent to a[0:len(a)]. It's a common idiom for copying a list: b = a[:] creates a new list with the same items. For strings and tuples (immutable), a[:] returns the same object (no copy is needed).

What do negative indices mean in slices?

Negative indices count from the end. a[-1] is the last element, a[-2] is the second-to-last. In slices, a[-3:] gives the last three elements, a[:-3] gives everything except the last three. The two can be combined: a[-3:-1] gives elements from third-to-last up to (not including) last — two elements.

What does the step parameter do?

The third value in a[start:stop:step] is the step — how many indices to advance per element. Default is 1. a[::2] takes every other element. a[::3] takes every third. a[::-1] reverses the sequence. The step can be negative, which iterates backwards.

Does slicing modify the original list?

No — slicing returns a new sequence. a[1:3] returns a new list with the elements from index 1 to 2; the original a is unchanged. To modify the original, use slice assignment: a[1:3] = [10, 20] replaces the elements at indices 1 and 2 with the new values.

Why is a[1:4] three elements, not four?

Because the stop index is exclusive — it points to the boundary AFTER the last element you want. a[1:4] selects elements at positions 1, 2, 3 — three elements. The 4 is the boundary after position 3. This makes slices composable: a[0:3] + a[3:6] == a[0:6].

🔗 Continue learning

[🗺️ Python learning path

The full roadmap from install to first project — every concept in order](https://makuistudio.com/courses/python/index.html)

Next in this series:

[📚 How to flatten a list of lists

itertools.chain.from_iterable and the three methods that actually win](https://makuistudio.com/courses/python/problems/flatten-list.html)

Problem solved · Python

🚀 Want more free lessons?

This is part of a free 30+ lesson curriculum on HTML, Python, AI, and JavaScript. No sign-up. No ads. Just code.

👉 Start learning for free

Learn React Free

Khawaja Khurram (MAK) — Tue, 03 Nov 2026 13:48:03 +0000

📚 This article was originally published on MAK Studio. Check out the full interactive lesson with live demos and code examples.

Home ›
Courses ›
React

⚛️ Learning Path · 2026

Learn React. The most-used frontend library.

React is how modern web apps are built. Every major company — Meta, Netflix, Airbnb, Uber, Shopify — uses it. Components, state, hooks, and the mental model that makes UIs predictable. This track teaches all of it, with real code and working examples. Every lesson assumes you already know JavaScript — if you don't, complete that track first.

~6 weeks, 1 hr/day
Intermediate
React 19 · modern

The Path
5 Concepts
Live demo
Mistakes
Projects
FAQ

Prerequisite: JavaScript. React is JavaScript. If you don't understand functions, arrays, objects, arrow functions, closures, and the DOM, learning React becomes memorization. Spend 2-3 months on the JavaScript track first. Every React tutorial assumes this foundation, and skipping it is the #1 reason beginners give up.

What you'll learn: components, JSX, props, state, hooks (useState, useEffect, useRef, useContext), routing, forms, and the mental model that makes React apps predictable. Every example has working code you can preview.

Why React

Every interactive website needs to update its UI when data changes. In vanilla JavaScript, you manipulate the DOM manually — querySelector, createElement, appendChild. As apps grow, this becomes unwieldy. React's insight was that the UI should be a function of state: when state changes, React computes what changed and updates only what's necessary. No more manual DOM tracking.

That's why it won. React didn't win because it's fast (Vue and Svelte are faster). It won because it made large apps tractable. When your app has 100 components, 20 shared states, and 50 user interactions, React's mental model — state flows down, events flow up — is what makes the codebase possible to reason about. The syntax is learnable in a week; the mental model is what you spend months mastering.

The payoff is real. React is the most-in-demand frontend skill in job listings. It's the foundation of React Native (mobile apps), Next.js (full-stack apps), and Remix. Learning React isn't just learning a library — it's learning the way modern frontend works.

🗺️ The 6-week path

Follow these in order. Each phase builds on the one before it.

Setup & first component

Week 1 · ~3 hours

Install Vite, create a project, write your first component. Understand JSX — how HTML-like syntax compiles to JavaScript. See how React renders a component to the DOM. This is the entire setup — modern tooling makes it 3 commands.

ViteJSXComponentsRender

→ Your first component

Props & composition

Week 2 · ~4 hours

Props pass data from parent to child. Children compose — a component can contain other components. This is how you build UIs: small pieces, combined into bigger pieces. The mental model: data flows down, functions flow up (as callbacks).

PropsChildrenCompositionProp types

→ Props & composition

State with useState

Week 3 · ~5 hours

State is data that changes over time. useState gives function components local state. When state changes, React re-renders. This is the core of React — understanding when and why re-renders happen is the skill.

useStateRe-rendersBatchingLifting state

→ State & useState

Events & forms

Week 4 · ~4 hours

React events look like HTML but work like JavaScript. Forms need controlled inputs — state that mirrors input value. Submit handlers, validation, and the difference between controlled and uncontrolled inputs. This is where most real apps spend their complexity.

onClickonChangeControlled inputsForm submit

→ Events & forms

useEffect & side effects

Week 4-5 · ~5 hours

useEffect runs code after render — data fetching, subscriptions, timers. The dependency array controls when it runs. This is the hook most beginners misuse, so we'll make it clear. Once you understand useEffect, you understand most of React.

useEffectDependenciesCleanupData fetching

→ useEffect

Lists & keys

Week 5 · ~3 hours

Rendering arrays of items is the most common React pattern. Keys tell React which item is which when the list changes. Getting keys right is the difference between smooth updates and mysterious bugs.

.map()KeysFilteringSorting

→ Lists & keys

Build something

Week 6 · ~6 hours

Pick a project from the list below. Build it. Break it. Rebuild it. The project is where the mental model clicks — everything before this is preparation. Two weeks of building will teach you more than two months of tutorials.

PlanBuildDebugShip

→ Project list

🎯 The 5 concepts that matter most

If you only truly understand five things about React, make it these.

1. UI is a function of state

You don't tell React what to change — you tell it what state is, and it figures out the DOM updates. This is declarative vs imperative. Once you stop trying to "update the DOM" and start "changing state," React becomes simple.

2. Props flow down, events flow up

Parent passes data to child via props. Child communicates back by calling functions the parent passed down. That's the entire data flow. No two-way binding, no global state in the component tree.

3. State lives at the closest common ancestor

If two components need the same state, put it in their nearest common parent. Pass it down via props. This is "lifting state up" — and it's the standard pattern for shared state.

4. Every render is a snapshot

When React re-renders, it's not "updating" — it's calling your component function again with current state and comparing the result. Understanding this makes effects, closures, and stale state make sense.

5. Effects are for external sync

useEffect runs after render to sync with things outside React — APIs, subscriptions, the DOM. If you're updating state in useEffect, you probably want a derived value or event handler instead.

🎬 See it in action

The classic counter — the simplest React component. State, event, render.

Counter.jsx

import { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0);

return (

# {count}

 setCount(count - 1)}
style={{ padding: '0.5rem 1rem', marginRight: '0.5rem' }}
>
−1

 setCount(count + 1)}
style={{ padding: '0.5rem 1rem' }}
>
+1

);
}

export default Counter;

Three things are happening in this component. (1) useState(0) creates a state variable count initialized to 0. (2) The render function uses count to display the value. (3) The buttons call setCount to change state, which triggers a re-render. That's React: state, render, update. Every component you'll ever write follows this pattern.

⚠️ Common mistakes (from real beginners)

Each of these will cost you hours if you don't know it.

Learning React before JavaScript

The #1 reason beginners fail. If you don't understand arrow functions, destructuring, map/filter, and closures, every React tutorial becomes memorization. Complete the JavaScript track first.

Mutating state directly

items.push(x) or user.name = 'Bob' doesn't trigger re-renders — React compares state by reference. Fix: use setters that return new values: setItems([...items, x]).

Forgetting keys in lists

Rendering an array without keys produces console warnings and buggy updates. Fix: {items.map(item => )}. Use stable IDs, not array indices.

Using array indices as keys

If items reorder, delete, or insert, index keys cause wrong components to keep wrong state. Fix: use a stable unique ID from your data. Generate one with crypto.randomUUID() if needed.

useEffect dependency mistakes

Missing dependencies cause stale closures. Extra dependencies cause infinite loops. Fix: install the eslint-plugin-react-hooks plugin — it catches both automatically.

useEffect for derived state

If you compute values in useEffect and store them in state, you have a bug waiting to happen. Fix: compute derived values in the render function directly. useEffect is for external sync, not for computing.

Prop drilling 5 levels deep

Passing props through 5 components that don't use them is a smell. Fix: use Context or component composition (pass children, not props).

Calling hooks conditionally

if (x) { useState(...) } breaks React — hooks must be called in the same order every render. Fix: call hooks at the top of the component, unconditionally.

🔨 Projects by difficulty

Build these in order. Each one uses only concepts from the phases before it.

Beginner

Counter

Increment, decrement, reset. Uses useState + events. The hello world of React.

Beginner

To-do list

Add, complete, delete items. Uses state + lists + keys. The classic first real project.

Beginner

Color picker

Pick a color, see it applied. Uses controlled inputs + state. First form.

Intermediate

Weather app

Fetch from an API, show current weather. Uses useEffect + async/await + loading states. First data-fetching app.

Intermediate

Movie search

Search box with debouncing, results grid, loading + error states. Uses everything so far. Looks like a real app.

Advanced

Full blog

Multi-page with routing, forms, CRUD against localStorage. Uses React Router + forms + all hooks. Ship-ready.

❓ Frequently asked questions

Do I need to know JavaScript before React?

Yes — absolutely. React is a JavaScript library. If you don't understand functions, arrays, objects, arrow functions, and closures, learning React becomes memorization instead of understanding. Spend 2-3 months on JavaScript first. Complete the JavaScript track on this site, then come back to React.

What is React?

React is a JavaScript library for building user interfaces. Instead of manipulating the DOM directly, you describe what the UI should look like as a function of state, and React updates the DOM efficiently when state changes.

What is JSX?

JSX is a syntax extension that lets you write HTML-like code inside JavaScript. Instead of createElement('div', ...), you write

...

. JSX is not valid JavaScript — it's compiled by a build tool (Babel, Vite) into React.createElement calls.

What is the difference between props and state?

Props are data passed from a parent component to a child — they're read-only. State is data that a component owns and can change over time. When state changes, the component re-renders. The mental model: props flow down, state lives inside a component.

What is a hook in React?

A hook is a function that lets a component 'hook into' React features. useState adds state to a function component. useEffect runs side effects after render. useContext reads context. useRef holds a mutable value across renders. Hooks were introduced in React 16.8 (2019) and replaced class components as the standard way to write React.

What is the difference between a class component and a function component?

Function components are the modern standard. They're just JavaScript functions that return JSX. Class components use ES6 classes and lifecycle methods. Function components with hooks are shorter, easier to test, and align with functional programming.

Do I need a build tool to use React?

Not strictly. You can use React via CDN with Babel in the browser. But for real projects, use Vite (the modern standard) or Next.js (for server-rendered apps). Vite is the easiest starting point — three commands and you're running.

What should I build after this course?

A to-do list (learn state + events), a weather app (learn API fetching + loading states), a movie search (learn debouncing + rendering lists), a full blog (learn routing + forms), a dashboard (learn complex state + layouts). Each project teaches a specific skill. Build at least three before calling yourself a React developer.

🔗 Continue your React path

[⚛️ Lesson 1: First component

Setup Vite, write JSX, render](https://makuistudio.com/courses/react/lessons/intro.html)
[🟨 JavaScript track

The prerequisite for everything here](https://makuistudio.com/courses/javascript/index.html)
[⚡ Async & fetch

You'll need this for data fetching](https://makuistudio.com/courses/javascript/lessons/async.html)
[📚 All courses

Back to the hub](https://makuistudio.com/courses/index.html)
[🔧 React problem solvers

20 real answers to real queries](https://makuistudio.com/courses/react/problems/index.html)

🌐 External resources

You're in the React track

🚀 Want more free lessons?

This is part of a free 30+ lesson curriculum on HTML, Python, AI, and JavaScript. No sign-up. No ads. Just code.

👉 Start learning for free

How to Install VS Code (Windows, Mac, Linux)

Khawaja Khurram (MAK) — Fri, 30 Oct 2026 17:03:01 +0000

📚 This article was originally published on MAK Studio. Check out the full interactive lesson with live demos and code examples.

How-To Guide

How to Install VS Code

Visual Studio Code (VS Code) is the most popular free code editor. Here's how to install it in under 5 minutes on any operating system.

📋 What You'll Need

A computer running Windows, macOS, or Linux
An internet connection
About 100 MB of free disk space
5 minutes of your time

✅ VS Code is completely free. No credit card, no signup, no trial period.

Download VS Code

Go to the official website:

👉 code.visualstudio.com

The website automatically detects your operating system and shows a big blue Download button. Click it.

If it doesn't detect your OS correctly, use one of these direct links:

Windows: "Windows" → "User Installer" (recommended)
Mac: "macOS" → choose Intel or Apple Silicon chip
Linux: .deb (Ubuntu/Debian) or .rpm (Fedora/Red Hat)

Run the Installer

Windows:

Open the downloaded .exe file
Click "Yes" when asked for permission
Accept the license agreement
Keep the default install location
On "Select Additional Tasks", check "Add to PATH" and "Create a desktop icon"
Click "Install" → "Finish"

Mac:

Open the downloaded .zip file
Drag Visual Studio Code into your Applications folder
Open it from Applications (or Spotlight: ⌘+Space)

Linux (Ubuntu/Debian):

sudo dpkg -i code_*.deb
sudo apt-get install -f

Launch VS Code

Open VS Code from your Start menu (Windows), Applications folder (Mac), or terminal (Linux: run code).

You'll see the Welcome screen with options to:

Choose a theme (Dark+ is the default — keep it)
Create a new file
Open a folder

Install Recommended Extensions

Extensions supercharge VS Code. Open the Extensions panel (click the blocks icon on the left sidebar, or press Ctrl+Shift+X).

Search for and install these three:

Live Server — auto-reload HTML changes in the browser
Python (by Microsoft) — Python support, debugging, and IntelliSense
Prettier — automatically formats your code

💡 Tip: Don't install 50 extensions on day one. Start with these three — they cover 90% of beginner needs.

✅ Verify It Works

Test your installation:

Open VS Code
Press Ctrl+N (Windows/Linux) or ⌘+N (Mac) to create a new file
Type: <h1>Hello, World!</h1>
Save as test.html
Right-click → "Open with Live Server"
Your browser should open with a big "Hello, World!" headline 🎉

🔧 Troubleshooting

"code" command not found (Mac)

Open the Command Palette (⌘+Shift+P), type "install code command", and select it.

Installation blocked on Windows

Right-click the .exe → "Run as administrator". Some antivirus software may flag it — VS Code is safe.

VS Code is slow on older machines

Disable extensions you're not using, and turn off telemetry in Settings.

🎯 What's Next?

Now that you have VS Code, you're ready to start coding:

[🐍 Install Python

Set up Python on your machine.](https://makuistudio.com/how-to/install-python.html)
[🟢 How ot Install Node.js

Set up Node.js and npm to run JavaScript outside the browser.](https://makuistudio.com/how-to/install-nodejs.html)
[🌐 Start the HTML Course

Free 10-lesson beginner course.](https://makuistudio.com/courses/html/index.html)
[🐍 Start the Python Course

Free 10-lesson beginner course.](https://makuistudio.com/courses/python/index.html)

📚 Related Guides

More getting-started guides from MAK Studio.

[📖 All How-To Guides

Browse the full setup series.](https://makuistudio.com/how-to/index.html)
[❓ FAQ

Common coding questions answered.](https://makuistudio.com/questions.html)

🚀 Want more free lessons?

This is part of a free 30+ lesson curriculum on HTML, Python, AI, and JavaScript. No sign-up. No ads. Just code.

👉 Start learning for free

Learn JavaScript Free

Khawaja Khurram (MAK) — Thu, 29 Oct 2026 03:46:07 +0000

📚 This article was originally published on MAK Studio. Check out the full interactive lesson with live demos and code examples.

Home ›
Courses ›
JavaScript

🟨 Learning Path · 2026

Learn JavaScript. Make pages do things.

JavaScript is the language of the browser — the only thing that runs natively in every tab on every device. Learn it, and every page you build becomes interactive. This page is the map: what to learn, in what order, how long each phase takes, and the exact projects to build. Follow it in order and you'll be dangerous in 8 weeks.

~8 weeks, 1 hr/day
Beginner → Intermediate
ES2024 · browser

The Path
5 Concepts
Mistakes
Projects
FAQ

Learning JavaScript free in 2026 means three things: (1) start with the language before any framework, (2) build something visible after every phase — the browser gives you instant feedback, use it, and (3) 1 hour a day for 8 weeks. Syntax takes 2 weeks. DOM and events take 2 more. The final 4 weeks are projects — and that's where the language actually clicks.

Skip this page if: you already know another language and just need syntax. Read this page if: you're starting from zero and want to know exactly what comes next instead of guessing.

Why JavaScript

Every page on the web runs JavaScript. Every interactive form, every dropdown menu, every animation, every real-time chat — all JavaScript. It's the only language that runs natively in browsers, which means the only one you can use to make a page actually respond to a user without a server round-trip. If you want to build things people can use, you need JavaScript.

It's also the language of every modern frontend framework. React, Vue, Svelte, Angular — they all compile to JavaScript. Learning the framework without the language is exactly as hard as it sounds. People who learn JavaScript first pick up React in weeks; people who skip to React spend months confused.

The tradeoff: JavaScript has more moving parts than Python. The DOM, async, closures, and a history of weird decisions. But it gives you something Python can't — immediate visual feedback. Change a line, save, refresh, see the result. That feedback loop accelerates learning faster than any tutorial.

The 8-week path

Follow these in order. Do not skip ahead — each phase depends on the one before it.

Setup and first script

Week 1 · ~2 hours

No install. No Node. Just an HTML file and a browser. Write your first console.log(), open DevTools, and see the output. Then link a .js file to an HTML page. That's the entire setup — free, instant, zero configuration.

DevToolsconsole.logscript tagComments

Your first script

Variables and types

Week 2 · ~4 hours

let, const, and why never to use var. Strings, numbers, booleans, arrays, objects. Template literals (backticks). Type coercion — the weird thing JavaScript does that no other language does. Learn it now so it doesn't confuse you later.

let / constTemplate literalsArraysObjects

Variables and types

Functions

Week 3 · ~4 hours

Function declarations, expressions, and arrow functions. Why arrow functions don't have their own this. Default parameters. Closures — the concept that separates intermediate developers from beginners. Learn them early; everything else in JS depends on them.

functionarrowScopeClosures

Functions and closures

The DOM

Week 4 · ~5 hours

The Document Object Model — JavaScript's interface to the page. querySelector, createElement, textContent, classList. This phase is where JavaScript becomes visual. The first time you change text on a page with code, everything clicks.

querySelectorcreateElementclassList

DOM manipulation

Events

Week 5 · ~4 hours

Responding to clicks, keypresses, form submissions, and mouse movement. addEventListener, event objects, event delegation. Now your code responds to users. This is the phase that turns pages into apps.

addEventListenerevent.targetpreventDefault

Events and handlers

Async and fetch

Week 6 · ~4 hours

JavaScript's superpower and its biggest source of confusion. Callbacks, Promises, async/await, fetch. Once this clicks, you can build real apps that talk to APIs — the exact skill every frontend job requires.

Promiseasync / awaitfetch

Async and fetch

Build a real project

Week 7 · ~6 hours

Pick one project from the list below. Build it. Break it. Rebuild it. This is the phase that separates people who learned JavaScript from people who can actually write JavaScript.

PlanBuildDebug

Project list

What comes next

Week 8+ · ongoing

After 8 weeks you have enough JavaScript to build anything the browser can do. The next step is a framework — React or Vue — plus tooling (npm, Vite). Those come after the language, never before.

ReactVueNode.js

Compare with Python

The 5 concepts that matter most

If you only truly understand five things in JavaScript, make it these.

1. Arrays and objects are everywhere

JavaScript data is almost always an array of objects. Master map, filter, and reduce — those three methods cover 90% of data manipulation.

2. Functions are first-class values

You can store functions in variables, pass them as arguments, and return them from other functions. This is what makes callbacks, promises, and array methods possible. It's also what makes React work.

3. The DOM is how you touch the page

Every HTML element is a JavaScript object. querySelector gets one, textContent changes text, addEventListener reacts to users. This is what JavaScript means in 90% of job descriptions.

4. Async is how you don't block the page

Network requests take time. async/await lets you wait for results without freezing the interface. Every real app talks to a server — this is the concept that separates toys from apps.

5. Use triple-equals for equality

Double-equals does type coercion (0 == "0" is true). Triple-equals doesn't (0 === "0" is false). The second one matches what you expect. Use it everywhere.

Common mistakes (from real beginners)

Each of these will cost you hours if you don't know it.

Using == instead of ===

0 == "" is true. null == undefined is true. "5" == 5 is true. The == operator does type coercion and produces surprises. Use === (strict equality) everywhere.

Using var instead of let/const

var has function-scope (not block-scope), hoists to the top of the function, and can be redeclared. It's a source of bugs that most modern code doesn't have. Use const by default, let when you reassign, never var.

Modifying the array while looping over it

Same trap as Python. Pushing to an array inside a for-of loop over that array creates infinite loops. Use map, filter, or iterate over a copy with the spread operator.

Forgetting to return in a map callback

[1,2,3].map(x => { x * 2 }) returns [undefined, undefined, undefined]. The curly braces make it a block, not an expression. Fix: .map(x => x * 2) or .map(x => { return x * 2; }). This one trips up everyone.

Assuming this is the object

In a regular function, this depends on how the function is called. In an arrow function, this is inherited from the enclosing scope. Rule: in class methods, use regular functions. Everywhere else, prefer arrow functions.

Async without await

const data = fetch("/api") gives you a Promise, not the data. Fix: const data = await fetch("/api"). But you can only use await inside an async function.

Not checking for null

document.querySelector(".missing").addEventListener() throws "Cannot read property of null". The element might not exist. Fix: check first with an if statement, or use optional chaining (el?.addEventListener).

Jumping to React too early

If you're in week 3, React will confuse you. Learn vanilla JavaScript for 2–3 months first. Then React makes sense because you understand what it's abstracting.

Projects by difficulty

Build these in order. Each one uses only concepts from the phases before it.

Beginner

To-do list

Input field, add button, list of items with delete buttons. Uses phases 1-5. Save to localStorage for persistence.

Beginner

Calculator

Buttons, display, and math. Uses events and functions. First project that feels like a real tool.

Beginner

Quiz app

Array of questions, one at a time, track score. Uses arrays, objects, state management, events.

Intermediate

Weather app

Fetch data from a public API, display current weather. Uses async/await, fetch, DOM, error handling.

Intermediate

Tic-Tac-Toe

Game board, win detection, reset. Uses arrays, game state, event delegation. First project with real logic.

Advanced

Movie search app

Search box, debounced input, API results, cards. Uses async/await, debouncing, rendering lists, error states.

Frequently asked questions

How long does it take to learn JavaScript?

For basic syntax: 2-4 weeks at 1 hour a day. To build interactive pages independently: 2-3 months. To be job-ready for a junior frontend role: 6-12 months of consistent practice with real projects.

Do I need to install anything to learn JavaScript?

No. JavaScript runs natively in every browser. You can start with a text editor, an .html file, and a browser tab. Install Node.js only when you need to run JavaScript outside the browser.

What should I learn first in JavaScript?

Variables (let, const), data types, arrays, objects, functions, then DOM manipulation and events. Do not start with frameworks like React or Vue.

Is JavaScript harder than Python?

Yes and no. Similar syntax complexity, but harder ecosystem: the DOM, async, closures, and 1000 frameworks. But JavaScript gives immediate visual feedback in the browser.

Should I learn JavaScript before React?

Absolutely. React is built on JavaScript. Spend 2-3 months on vanilla JavaScript first. You'll learn React 5x faster.

What is the difference between let, const, and var?

const for values that don't change, let for values that do. var is the old way with weird scoping — never use it in new code.

What projects should a beginner build in JavaScript?

A to-do list, a weather app, a calculator, a quiz app, and a simple game. Each teaches a specific concept. Build all five before touching a framework.

Why does JavaScript have so many frameworks?

Because it's been the only browser language for 25 years. React, Vue, Angular, Svelte are different answers to the same problem. As a beginner, ignore them all.

Continue your JavaScript path

[Lesson 1: Your first script

DevTools, console.log, and your first .js file](https://makuistudio.com/courses/javascript/lessons/intro.html)
[Python track

Compare with another language](https://makuistudio.com/courses/python/index.html)
[CSS snippets

UI components to pair with your JS](https://makuistudio.com/code/css/index.html)
[All courses

Back to the hub](https://makuistudio.com/courses/index.html)

External resources

🚀 Want more free lessons?

This is part of a free 30+ lesson curriculum on HTML, Python, AI, and JavaScript. No sign-up. No ads. Just code.

👉 Start learning for free

TypeScript Problem Solvers

Khawaja Khurram (MAK) — Thu, 29 Oct 2026 03:35:30 +0000

📚 This article was originally published on MAK Studio. Check out the full interactive lesson with live demos and code examples.

Home ›
Courses ›
TypeScript ›
Problem Solvers

🔷 Problem Solvers · 20 answers

TypeScript problems. Solved in 5 minutes each.

Every page here answers one specific question — the exact thing you typed into Google. No filler, no "in this article we will explore." Just the answer, working code, the reason it works, and the mistakes to avoid. This is what you need at 2 AM when the compiler won't stop complaining.

~5 min per page
All levels
TypeScript 5 · React 19

TypeScript path
Types & interfaces
Generics
Error messages
React + TS
All problems

How to use this page. Find your problem in the list below. Click it. The answer is the first thing on the page — no scrolling required. Every page has a "Short answer" box at the top, followed by the working code, then the explanation. If you're looking for a structured learning path instead, the 8-lesson TypeScript track covers every concept from scratch.

🧱 Types & interfaces

Shape definitions, optional/required fields, and choosing between interface and type.

[#### How to type an object with dynamic keys

Record, index signatures, and why { [key: string]: T } isn't always enough.](https://makuistudio.com/courses/typescript/problems/dynamic-keys.html)
[#### interface vs type — when to use each

The one real difference (declaration merging) and the decision rule that follows.](https://makuistudio.com/courses/typescript/problems/interface-vs-type.html)
[#### How to make all properties optional

Partial, deep partial, and when optional isn't what you actually want.](https://makuistudio.com/courses/typescript/problems/partial.html)
[#### How to extend an interface

extends, intersections (&), and the difference between extending and composing.](https://makuistudio.com/courses/typescript/problems/extend-interface.html)
[#### How to use Record in TypeScript

Typed dictionaries, constraining keys, and why Record beats index signatures.](https://makuistudio.com/courses/typescript/problems/record-type.html)
[#### Pick vs Omit in TypeScript

Whitelist vs blacklist, and the pattern that scales when your type grows.](https://makuistudio.com/courses/typescript/problems/pick-omit.html)

🧬 Generics

Reusable type-safe code. Constraints, defaults, and when generics actually help.

[#### How to constrain a generic type

, keyof constraints, and accessing properties on T.](https://makuistudio.com/courses/typescript/problems/constrain-generic.html)
[#### When to use generics vs any

Why any throws away information and how preserves it.](https://makuistudio.com/courses/typescript/problems/generic-vs-any.html)
[#### How to use keyof in TypeScript

Key unions, indexed access with T[K], and the get pattern.](https://makuistudio.com/courses/typescript/problems/type-keyof.html)
[#### When to use the satisfies operator

Type checking without widening — the operator that fixed config objects.](https://makuistudio.com/courses/typescript/problems/satisfies-operator.html)

⚠️ Error messages

The compiler messages that stop you cold. What they mean, how to fix them.

[#### "Property does not exist on type"

When the compiler doesn't know your shape. Interfaces, type guards, and the fixes.](https://makuistudio.com/courses/typescript/problems/property-does-not-exist.html)
[#### "Object is possibly null"

Narrowing with early returns, optional chaining, and the non-null assertion's real cost.](https://makuistudio.com/courses/typescript/problems/object-possibly-null.html)
[#### unknown vs any

The safe alternative to any — and how to narrow unknown correctly.](https://makuistudio.com/courses/typescript/problems/unknown-vs-any.html)
[#### Enum vs union type

Why modern TS prefers string literal unions over enum — and when enums still win.](https://makuistudio.com/courses/typescript/problems/enum-vs-union.html)
[#### How to narrow a union type

typeof, in, instanceof, discriminated unions, and exhaustive checking with never.](https://makuistudio.com/courses/typescript/problems/narrow-union.html)
[#### How to use discriminated unions

The pattern that models state machines — impossible states unrepresentable.](https://makuistudio.com/courses/typescript/problems/discriminated-union.html)

⚛️ React + TypeScript

Props, state, events, refs, and the patterns every React + TS codebase uses.

[#### How to type useState with an object

Nullable state, partial updates, and the generic annotation that fixes it.](https://makuistudio.com/courses/typescript/problems/usestate-object.html)
[#### How to type an event handler

ChangeEvent, MouseEvent, FormEvent — the cheat sheet for every React event.](https://makuistudio.com/courses/typescript/problems/type-event-handler.html)
[#### Type guard for array of objects

Validating API responses at the boundary — isUserArray built from scratch.](https://makuistudio.com/courses/typescript/problems/type-guard-array.html)
[#### How to type a generic function

The signature that preserves type information through a transformation.](https://makuistudio.com/courses/typescript/problems/generic-vs-any.html)

📋 All 20 problems

Sorted by category. Click any to jump straight to the answer.

Types & interfaces

6 problems

Dynamic keysinterface vs typePartial
ExtendingRecordPick/Omit

Dynamic keys →
interface vs type →
Partial →
Extending →
Record →
Pick/Omit →

Generics

4 problems

ConstraintsGeneric vs any
keyofsatisfies

Constrain generic →
Generic vs any →
keyof →
satisfies →

Error messages

6 problems

Property does not existPossibly nullunknown vs any
Enum vs unionNarrowingDiscriminated unions

Property not found →
Possibly null →
unknown vs any →
Enum vs union →
Narrow union →
Discriminated →

React + TS

4 problems

useStateEvent handlersType guardsGenerics

useState with object →
Event handler →
Type guard array →
Generic function →

🔗 Continue your TypeScript path

[🗺️ TypeScript learning path

8 lessons from setup to React](https://makuistudio.com/courses/typescript/index.html)
[🔷 Lesson 1: Setup & first types

Start from zero](https://makuistudio.com/courses/typescript/lessons/intro.html)
[⚛️ React track

Where TS pays off the most](https://makuistudio.com/courses/react/index.html)
[🟨 JavaScript track

The prerequisite for everything TS](https://makuistudio.com/courses/javascript/index.html)

TypeScript Problem Solvers · 20 answers

🚀 Want more free lessons?

This is part of a free 30+ lesson curriculum on HTML, Python, AI, and JavaScript. No sign-up. No ads. Just code.

👉 Start learning for free

WordPress Fixes

Khawaja Khurram (MAK) — Sat, 17 Oct 2026 06:54:36 +0000

📚 This article was originally published on MAK Studio. Check out the full interactive lesson with live demos and code examples.

Home ›
Fix Errors ›
WordPress

Platform · WordPress

WordPress Fixes

Copy-paste fixes for the WordPress problems that stop you mid-project. Written for developers who need the solution now — not a 3,000-word "what is WordPress" intro.

Why these pages exist: Big WordPress sites give you 2,000 words and 40 screenshots before the answer. We give you the 30-second fix first, then the root cause, then how to prevent it. Same pattern as every other fix page on makuistudio.com.

🚨 Fix Pages

Something broke. Here's how to make it work again.

[Site broke after installing a plugin

Fix: WordPress Plugin Conflict

Two plugins fighting over the same hook, or a plugin that doesn't play well with your setup. Bisect the problem in 5 minutes.

WordPress
Fix it →](https://makuistudio.com/fix/wordpress/plugin-conflict.html)
[Plugin update broke the site

Fix: Plugin Update Broke Site

A plugin updated itself overnight and now nothing works. Roll back to the previous version without losing data.

WordPress
Fix it →](https://makuistudio.com/fix/wordpress/plugin-broke-after-update.html)
[Custom CSS isn't showing up

Fix: Theme CSS Not Applying

You edited the CSS, saved, refreshed, and nothing changed. It's almost always caching, specificity, or the wrong file.

WordPress
Fix it →](https://makuistudio.com/fix/wordpress/theme-css-not-applying.html)
[Child theme changes ignored

Fix: Child Theme Not Overriding

You built a proper child theme and the parent is still winning. Usually one of five specific causes — all listed inside.

WordPress
Fix it →](https://makuistudio.com/fix/wordpress/child-theme-not-working.html)
[Site got slow after adding plugins

Fix: Plugin Slowing Down Site

Every plugin runs on every page load. Find the ones actually costing you seconds — not the ones that look heavy.

WordPress
Fix it →](https://makuistudio.com/fix/wordpress/plugin-slowing-site.html)
[Unsure what's safe to delete

Fix: Remove Plugins Safely

Deleting a plugin can leave orphaned database rows and broken shortcodes. Here's the safe removal order.

WordPress
Fix it →](https://makuistudio.com/fix/wordpress/remove-plugins-safely.html)

📘 How-to Guides

Workflows that prevent the problems in the first place.

[Systematic debugging

How to Diagnose a Plugin Conflict

The full workflow: WP_DEBUG, error logs, hook tracing, and the bisect method. Works even on live sites.

How-to
Read guide →](https://makuistudio.com/how-to/wordpress/diagnose-plugin-conflict.html)
[Recovery workflow

How to Roll Back a Plugin Update

Manual rollback, WP Rollback plugin, and the WP-CLI approach. Includes how to prevent auto-updates from surprising you.

How-to
Read guide →](https://makuistudio.com/how-to/wordpress/rollback-plugin-update.html)
[Testing workflow

How to Test a Theme Before Going Live

Staging setup, safe theme switching, and what to check before you flip the production switch.

How-to
Read guide →](https://makuistudio.com/how-to/wordpress/test-theme-before-live.html)
[Decision framework

How to Choose a Theme for Speed

Not "best themes" — the criteria developers use to evaluate a theme's performance before committing to it.

How-to
Read guide →](https://makuistudio.com/how-to/wordpress/choose-theme-for-speed.html)

🚧 More Coming

Same pattern, growing section. Here's what's next.

White screen of death

Fix: WordPress White Screen

Fatal PHP error, memory limit, or plugin crash. Recover without losing data.

WordPress
Coming soon

Database connection error

Fix: Error Establishing Database

Credentials, host, port, or corrupted tables. Diagnose in order of likelihood.

WordPress
Coming soon

Uploads failing

Fix: Media Upload Fails

Permissions, memory, or server limits. The exact settings to check.

WordPress
Coming soon

404 on all pages except home

Fix: WordPress Permalinks 404

.htaccess rules, mod_rewrite, or Nginx config. One-line fix in most cases.

WordPress
Coming soon

Admin login broken

Fix: Can't Access WordPress Admin

Redirect loop, cookie issue, or plugin lockout. Multiple recovery paths.

WordPress
Coming soon

Scheduled posts fail

Fix: Missed Schedule Error

Cron, timezone, or server config. The three causes and how to test each.

WordPress
Coming soon

📖 How to use these pages

Match the symptom, not the cause

You don't need to know what's wrong. Find the page that matches what you're seeing — "site broke," "CSS not applying," "slow site."

Read the 30-second fix

Every fix page opens with the fastest safe answer. Copy it, apply it, verify.

Follow up with the how-to guide

Each fix links to the deeper workflow. If the fix worked, the how-to prevents it recurring.

Request a fix

Stuck on something not listed? Contact us with the exact symptom. WordPress fixes are added weekly.

❓ Frequently asked questions

Are these fixes safe to run on a live site?

Every fix lists the risk level. The "deactivate plugins" approach is always safe. Fixes that touch the database are marked and include a backup step first. If a fix would take down a live site, we say so upfront.

Do these work with WordPress multisite?

Most do. Fixes that differ on multisite are marked with a "Multisite" note. Network-activated plugins work differently from site-activated plugins — the fix pages call this out.

What about classic themes vs block themes?

Where the fix differs, we cover both. Theme CSS issues are common to both; child theme fixes have block-theme-specific notes when they matter. Block themes don't use style.css the same way, and the fix pages explain this.

Do you cover page builders like Elementor, Divi, Bricks?

Only when the fix is builder-agnostic. Page-builder-specific issues are their own ecosystem and there are already good resources for those. We focus on the WordPress core problems underneath.

Why not just use WP-CLI for everything?

WP-CLI is great when you have it. But most developers don't have shell access on shared hosting. Every fix page includes both the WP-CLI command (when applicable) and the file-manager/admin alternative.

Is this a replacement for WordPress support?

No. For plugin-specific bugs, the plugin author's support forum is still the right place. These pages help you identify which plugin is at fault and how to work around it while waiting for the developer.

📚 Related

[🚨 All Error Fixes

JavaScript, Python, WordPress, and more.](https://makuistudio.com/fix/index.html)
[🛠️ All How-to Guides

Setup, workflows, publishing.](https://makuistudio.com/how-to/index.html)
[🌐 Learn Web Development

The full roadmap including WordPress.](https://makuistudio.com/learn/web-development.html)
[🏗️ Build Projects

Complete build-along tutorials.](https://makuistudio.com/build/index.html)

🚀 Want more free lessons?

This is part of a free 30+ lesson curriculum on HTML, Python, AI, and JavaScript. No sign-up. No ads. Just code.

👉 Start learning for free

How to Learn Python in 2026

Khawaja Khurram (MAK) — Sat, 17 Oct 2026 06:52:46 +0000

📚 This article was originally published on MAK Studio. Check out the full interactive lesson with live demos and code examples.

Home ›
Guides ›
Python

Beginner Roadmap

How to Learn Python in 2026

An 8-step roadmap for total beginners. What to learn, in what order, how long it takes, and the first project to build.

Last updated: October 2026 • Reading time: ~12 minutes

Python is a beginner-friendly language used for AI, data science, web development, and automation. Most beginners reach basic proficiency in 6–10 weeks with 1–2 hours of daily practice. No prior programming experience required.

The 8-step order: install Python → variables → control flow → functions → lists/dicts → files & errors → modules → first project.

Who this roadmap is for

🌱

Absolute beginners

Never written code before. Start here.

🔄

Career switchers

Coming from a non-tech background. This gets you productive fast.

⚡

Experienced devs

Skip to steps 2–7 as a syntax refresher. Step 8 is where the value is.

📍 Your 8-Step Python Roadmap

1Install Python & set up an editor

2Variables & basic types (str, int, float, bool)

3Control flow — if/else, for, while

4Functions — def, arguments, returns

5Lists, tuples, sets, dicts

6Files & error handling (try/except)

7Modules & the standard library

8Build your first project

~6–10 weeks at 1–2 hrs/day
Zero prerequisites

Install Python & set up an editor

Download Python 3.13+ from python.org. On Windows, check "Add Python to PATH" during install. On macOS, use Homebrew: brew install python. On Linux, it's usually pre-installed.

For an editor, use VS Code with the Python extension. It's free, works on all platforms, and has excellent autocomplete. Avoid starting with PyCharm or Jupyter — they add complexity you don't need yet.

# Verify your install
python --version
# Python 3.13.x

# Your first line of Python
python -c "print('Hello, World!')"

Pro tip: Learn one command-line tool at a time. You only need python and pip for now.

→ Related on MAK UI: print() reference

Variables & basic types

Python has four basic types you'll use constantly: strings (text), integers (whole numbers), floats (decimals), and booleans (True/False). Variables are just labels pointing to values.

name = "Alice" # string
age = 30 # integer
price = 19.99 # float
is_member = True # boolean

# Type conversion
age_str = str(age)
price_int = int(price) # 19

Pro tip: Python is dynamically typed — you don't declare types. But use type hints for clarity: age: int = 30.

→ Related: len() reference

Control flow — if/else, for, while

Control flow is where your programs start making decisions and repeating work.

# if / elif / else
score = 85
if score >= 90:
 grade = "A"
elif score >= 80:
 grade = "B"
else:
 grade = "C"

# for loops — iterate over a sequence
for i in range(5):
 print(i)

# while loops — repeat until a condition changes
count = 0
while count < 3:
 print(count)
 count += 1

Watch out: range(5) generates 0, 1, 2, 3, 4 — the stop value is exclusive.

→ Related: range() reference

Functions — def, arguments, returns

Functions let you package logic into reusable blocks. Every Python program of any size is built from functions.

def greet(name, greeting="Hello"):
 """Return a greeting for the given name."""
 return f"{greeting}, {name}!"

print(greet("Alice")) # Hello, Alice!
print(greet("Bob", "Hi")) # Hi, Bob!

Pro tip: Name functions as verbs (calculate_total, not total). This one habit will keep your code readable forever.

Lists, tuples, sets, dicts

Four built-in collections cover 95% of real code:

# list — ordered, mutable
fruits = ["apple", "banana"]
fruits.append("cherry")

# tuple — ordered, immutable
coords = (10, 20)

# set — unordered, unique
tags = {"python", "coding", "python"} # {'python', 'coding'}

# dict — key-value pairs
user = {"name": "Alice", "age": 30}
user["email"] = "alice@example.com"

Pro tip: Use a dict when you need named fields. Use a list when order and duplicates matter.

→ Related: append() · keys() · items()

Files & error handling

Real programs read input from files and handle things going wrong. Two concepts unlock this: with open() and try/except.

# Read a file
with open("data.txt", "r") as f:
 content = f.read()

# Write a file
with open("output.txt", "w") as f:
 f.write("Hello\n")

# Handle errors
try:
 age = int(input("Age: "))
except ValueError:
 print("That's not a number!")

Pro tip: Always use with when opening files. It auto-closes them, even if your code errors.

Modules & the standard library

Python ships with a "standard library" — hundreds of modules ready to use. Import what you need, don't reinvent.

import os
import json
import random
from datetime import datetime

print(random.randint(1, 10))
print(datetime.now().year)

# Install external packages
# pip install requests

Learn to use pip — Python's package manager. Every library on PyPI installs with pip install package_name.

Pro tip: Before installing a package, check if the standard library already does it. json, pathlib, and itertools cover a huge amount of real work.

Build your first project

This is where learning sticks. Pick one of these three projects. Don't skip this step — building beats watching tutorials every time.

🥇 To-Do List CLI

Add, list, complete, and delete tasks. Save them to a JSON file. Uses: lists, dicts, functions, files, error handling.

🥈 Quiz Game

Ask questions from a JSON file, track the score, show a final result. Uses: loops, conditionals, dicts, files, input.

🥉 Weather CLI

Fetch weather from a free API, display results. Uses: requests, JSON, error handling, f-strings.

Pro tip: Push your project to GitHub even if it's small. Recruiters care more about a small finished project than a large incomplete one.

⚠️ Common mistakes beginners make

Tutorial hell. Watching 20 hours of videos without writing code. Fix: for every 30 minutes of video, spend 60 minutes coding.
Memorizing syntax. You'll forget it anyway. Fix: learn the concepts, look up syntax as needed.
Skipping functions too long. Writing everything at the top level gets messy fast. Fix: move logic into functions by week 2.
Not using an IDE. Typing into a text file loses autocomplete, debugging, and linting. Fix: use VS Code from day one.
Ignoring errors. Reading tracebacks is a core skill. Fix: when something breaks, read the last line of the error first.
Jumping into frameworks too early. Don't start Django or pandas until you're comfortable with vanilla Python.
Not reading other people's code. Fix: browse GitHub. Pick one small repo per week.
Quitting after week 2. Week 2 is the hardest. Push through — it gets easier.

⏱️ Realistic timeline

Phase	Steps	Time (1–2 hrs/day)
Setup & basics	Steps 1–2	3–5 days
Control & functions	Steps 3–4	1–2 weeks
Collections	Step 5	1 week
Files & modules	Steps 6–7	1 week
First project	Step 8	2–3 weeks

Total: ~6–10 weeks to basic proficiency. Reaching job-ready Python takes 6–12 months depending on the specialization (web, data, AI).

🎯 What to learn after Python basics

After step 8, pick a specialization based on what you want to build:

[🌐

Web development

Django or Flask. Build APIs and web apps.](#)
[📊

Data analysis

pandas, NumPy, matplotlib. Work with spreadsheets at scale.](#)
[🤖

Machine learning

scikit-learn, PyTorch. Build predictive models.](#)
[⚙️

Automation & DevOps

Scripting, cloud tools, CI/CD pipelines.](#)

❓ Frequently asked questions

How long does it take to learn Python?

For basic proficiency, most beginners need 6 to 10 weeks of consistent practice (1-2 hours per day). Reaching job-ready Python skills typically takes 6-12 months depending on the specialization (web, data, AI).

Do I need prior programming experience to learn Python?

No. Python is one of the most beginner-friendly languages. You don't need any prior coding experience to start with this roadmap.

Should I learn Python 2 or Python 3?

Always learn Python 3. Python 2 reached end-of-life in January 2020 and is no longer supported. All new code should use Python 3.13 or later.

Is Python enough to get a job?

Python alone is a strong foundation, but most jobs require a specialization: web development (Django, Flask), data analysis (pandas, NumPy), machine learning (scikit-learn, PyTorch), or automation/DevOps.

What should I build first in Python?

Start with a command-line tool like a to-do list, a quiz game, or a simple calculator. These projects teach input, output, logic, and file handling without overwhelming you with frameworks.

Can I learn Python for free?

Yes. Python itself is free, and there are excellent free resources including the official Python documentation, makuistudio.com lessons, and community tutorials. All you need is a computer and internet access.

What is the best way to practice Python?

Write code every day, even for 20 minutes. Build small projects, solve coding challenges on sites like Codewars or LeetCode, and read other people's code on GitHub.

Do I need math to learn Python?

Basic arithmetic is enough for general programming. Advanced math is only needed if you specialize in machine learning, data science, or scientific computing.

🎯 What's Next?

[⚡

Learn JavaScript

If you want to build websites, JS is essential.](https://makuistudio.com/learn/javascript.html)
[🌐

Learn Web Development

HTML + CSS + JS together.](https://makuistudio.com/learn/web-development.html)
[🐍

Python Hub

Lessons and reference pages.](https://makuistudio.com/code/python/index.html)
[📖

Python Reference

Every method, with examples.](https://makuistudio.com/code/python/reference/index.html)

🚀 Want more free lessons?

This is part of a free 30+ lesson curriculum on HTML, Python, AI, and JavaScript. No sign-up. No ads. Just code.

👉 Start learning for free

How to Install Node.js on Windows, Mac and Linux (Complete Guide)

Khawaja Khurram (MAK) — Fri, 02 Oct 2026 17:46:03 +0000

I spent a weekend debugging a "node: command not found" error because I'd skipped a step in the Node.js install. So I wrote down everything I wish I'd known.

If you want the version with OS-detection tabs and troubleshooting, here's the full guide:
👉 How to Install Node.js on Windows, Mac, and Linux

Here's the short version.

Which version should you install?

Always install LTS (Long Term Support). It's stable, tested, and supported for years. Skip "Current" unless you need bleeding-edge features.

Windows

The fastest method: go to nodejs.org, download the LTS .msi, double-click, click Next through the wizard.

Verify:
$ node -v
v22.11.0
$ npm -v
10.9.0

If you get "'node' is not recognized" — close and reopen your terminal. That fixes 90% of cases.

macOS

If you have Homebrew:

brew install node

That's it. Homebrew handles updates too.

Linux

Use nvm — it avoids permission headaches and lets you switch versions per project:

bash

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
source ~/.bashrc
nvm install --lts
nvm use --lts

The classic mistake

Don't install Node.js from your Linux distro's default repos. The version is often 2–3 years old, and you'll hit "this feature isn't supported" errors on modern packages. Use nvm.

What you actually get

Installing Node.js installs two things:

· node — the runtime
· npm — the package manager (bundled automatically)

You don't install npm separately. Ever.

Quick test

Create hello.js:

js
console.log("Node version:", process.version);

Run it:

$ node hello.js
Node version: v22.11.0

Working.

The full guide covers three methods per OS, plus troubleshooting for permission errors, EACCES issues, and version-switching with nvm:

👉 How to Install Node.js (Full Guide)

I also built a small collection of free browser-based dev tools (JSON formatter, regex tester, Base64 encoder, Unix timestamp converter) — no signup, no ads, everything runs locally:

👉 makuistudio.com/tools

If you spot anything wrong or outdated in the guide, comment below — I'll fix it.

📊 How to Calculate Percentage Increase

Khawaja Khurram (MAK) — Thu, 01 Oct 2026 13:19:31 +0000

I wrote a guide on How to Calculate Percentage Increase. Here's the formula, 3 examples and a free calculator https://makuistudio.com/tools/percentage-calculator.html

To calculate percentage increase, subtract the original value from the new value, divide by the original value, then multiply by 100. For example, going from 50 to 75 is a 50% increase because ((75 − 50) ÷ 50) × 100 = 50.

This guide walks through the formula with three worked examples, shows the most common mistakes, and gives you a free calculator to skip the manual math.

The Percentage Increase Formula
The Formula
% Increase = ((New − Original) ÷ Original) × 100

That's it. Three steps:

Subtract: New value − Original value = the difference.
Divide: Difference ÷ Original value = the decimal change.
Multiply: Decimal change × 100 = the percentage.

If the result is positive, it's an increase. If it's negative, it's a decrease.

**Example 1: A Simple Price Increase
**A product cost $40 last year and costs $52 this year. What's the percentage increase?

Worked Example Step 1: 52 − 40 = 12 Step 2: 12 ÷ 40 = 0.30 Step 3: 0.30 × 100 = 30% → 30% increase

The price went up 30%. That means the new price is 130% of the original price (100% + 30%).

Example 2: A Salary Raise

Your salary went from $3,200/month to $3,600/month. What percentage increase is that?

Worked Example Step 1: 3600 − 3200 = 400 Step 2: 400 ÷ 3200 = 0.125 Step 3: 0.125 × 100 = 12.5% → 12.5% increase

I Analyzed 100 Pages of My Own Site - Here's What I Learned About SEO for Developers

Khawaja Khurram (MAK) — Mon, 28 Sep 2026 13:57:06 +0000

Six months ago I launched a free coding platform with zero SEO knowledge.

I built 100+ pages, submitted a sitemap, and waited.

Nothing happened.

So I did what any developer would do: I wrote a Python script to audit every page on my site and find out exactly what was wrong.

Here's what I found — and it might surprise you.

The Problem With 90% of Beginner Sites

When I ran my first audit, I found:

· 42 pages had canonical URLs pointing to the wrong domain
· Every single page was missing structured data
· 26 pages had titles over 60 characters
· 50 pages had zero internal links
· 8 pages had thin content (under 300 words)

Every one of these is invisible to you but critical to Google.

Let me break down the ones that mattered most.

Canonical URLs (The Silent Killer)

If you've ever moved a site from username.github.io to a custom domain — you probably broke your SEO.

Every page needs this tag:

If it points to the wrong URL — even to an old .github.io address — Google treats the wrong version as the real page.

Your site will never rank. Google is indexing a different URL.

I had 42 pages with this problem. Fixing it took a 20-line Python script.

Structured Data (Free Rich Snippets)

Google shows enhanced search results for pages with JSON-LD structured data:

· Star ratings
· FAQ dropdowns
· Step-by-step guides
· Course carousels
· Product prices

Adding this to a How-To page:

{ "@context": "https://schema.org", "@type": "HowTo", "name": "How to Install Python", "step": [ { "@type": "HowToStep", "name": "Download the installer", "text": "Go to python.org/downloads" } ] }

Google can then show your 5 steps directly in the search results — no click required.

I had zero pages with structured data. Now every page has it.

Internal Linking (The Free Ranking Boost)

Internal links — links between pages on your own site — are the most underused SEO tool.

Google uses them to:

· Discover new pages
· Pass authority from popular pages to new ones
· Understand your site's structure

If a page has zero internal links, Google treats it as an orphan.

My lesson pages had zero. My How-To guides had zero. My snippets had zero.

I added a "Related Resources" section to every page with 4 relevant links each. That's 400+ new internal links across the site.

This one change matters more than any backlink.

Title Length (Affects CTR, Not Rankings)

Google truncates titles longer than 60 characters:

Free Programming Courses – Learn HTML, Python, AI | UI Studio

becomes

Free Programming Courses – Learn HTML, Python, AI | UI...

Ugly. Fix: keep titles between 40-60 characters. Put the important words first.

Thin Content (Google Won't Rank It)

Pages under 300 words rarely rank, unless they're answering a very specific question.

My lesson pages averaged 250 words. Not terrible — but not enough to compete.

The fix wasn't to pad them. It was to add genuine value:

· A "common mistakes" section
· A "pro tips" section
· Related resources
· Interactive demos

Every lesson now averages 400+ words of useful content.

The Python Script That Did All the Work

I wrote scripts to audit and fix every issue automatically. Here's the general approach:

from bs4 import BeautifulSoup
import requests

def audit_page(url):
    r = requests.get(url)
    soup = BeautifulSoup(r.text, "html.parser")
    issues = []

    # Check title length
    title = soup.title.string if soup.title else ""
    if len(title) > 60:
        issues.append(f"Title too long: {len(title)} chars")

    # Check canonical
    canonical = soup.find("link", attrs={"rel": "canonical"})
    if not canonical or "github.io" in canonical.get("href", ""):
        issues.append("Wrong or missing canonical")

    # Check structured data
    if not soup.find("script", attrs={"type": "application/ld+json"}):
        issues.append("Missing JSON-LD")

    # Check internal links
    internal = sum(1 for a in soup.find_all("a", href=True)
                   if a["href"].startswith("/"))
    if internal < 3:
        issues.append(f"Few internal links: {internal}")

    return issues

Run it across your sitemap, get a CSV of every issue, fix them in priority order.

What Changed in 30 Days

Metric Before After
Pages with correct canonicals 22 100
Pages with JSON-LD 0 100
Avg internal links per page 0.4 5.2
Pages with proper titles 74 100
Average word count 280 420

Google is now crawling roughly 5x more pages per week than before.

What I Learned

SEO is 20% technical, 80% consistency.
The technical fixes take a weekend. Getting Google to trust you takes 6 months.

Don't optimize for rankings — optimize for clicks.
A page can rank #3 and still get zero clicks if the title and description don't entice.

Internal links matter more than backlinks (for beginners).
You can build 100 internal links in an afternoon. Getting 1 real backlink takes weeks.

Every fix compounds.
The 42 canonical fixes I made in month 2 helped the 20 new lessons I added in month 3 rank faster.

The Full Guide

I turned everything I learned into a 13-part guide for developers who want to skip the guessing:

How to Make Your Website SEO-Friendly

It covers canonical tags, structured data, sitemaps, internal linking, and everything else I learned the hard way.

If you're building a side project, learn from my mistakes. Save yourself 6 months.

I write about free coding education and building in public. Find everything at makuistudio.com.

Why I made 30 Coding Lessons Free When Everyone Else Charges $500

Khawaja Khurram (MAK) — Sun, 27 Sep 2026 09:29:16 +0000

Originally published at MAK Studio. Browse the full library: makuistudio.com/courses

Every "learn to code" resource follows the same formula:

Free intro tutorial
"Enjoyed this? Sign up for the full course"
$497 one-time payment

I've watched dozens of beginners start this loop, get frustrated, and quit. So I built the opposite.

What I Did

I spent the last 6 months building makuistudio.com — a completely free coding platform with:

30+ lessons across HTML, Python, AI, and JavaScript
Interactive browser demos (TensorFlow.js runs in your browser — no setup)
15+ copy-paste UI snippets
Complete "How-To" setup guides — from installing VS Code to publishing your first website

No signup. No ads. No paywall. Ever.

The Uncomfortable Truth About Free Content

Everyone says "free content doesn't make money."

True. But here's what I've noticed:

Free content does something better — it earns trust.

When a beginner finishes my Python course and their first script runs, they remember who helped them. When they publish their first website with my GitHub Pages guide, they tell their friends.

That's worth more than $497.

What's Inside

The Setup Series (13 guides)

Install VS Code, Python, Node.js, Git
Command line basics
Write your first HTML page
Publish a website for free
Get a free domain name
Deploy with Netlify
Add Google Analytics
Make your site SEO-friendly

The Courses

HTML & CSS — 10 lessons, ends with a personal bio page project
Python — 10 lessons, ends with a calculator project
AI — 10 lessons, TensorFlow.js demos in every lesson
JavaScript — Quest 1 live now

The Snippets

Animated cards, dropdown menus, OTP verification, download buttons, loaders, dark mode toggle, sentiment analyser — 15+ components.

Every one is copy-paste ready. No frameworks. No build step.

What I Learned Building This

1. Setup tutorials are more valuable than coding tutorials.
"How to install Python" gets 100K+ searches/month. "How to write a for loop" gets far less. Beginners need setup help first.

2. Interactive demos change everything.
A lesson where you can train a neural network in the browser beats a static article with code screenshots — every time.

3. Consistency beats perfection.
One lesson per week for 6 months = 30 lessons. That's it.

4. Google takes 3-6 months to trust new sites.
Month 1: nothing. Month 3: a few visitors. Month 6: real traffic starts.

5. Backlinks > content.
You can write 100 great lessons. Without backlinks, Google won't rank them. That's why this article exists.

Try It

If you're learning to code — or know someone who is:

👉 makuistudio.com

No signup. No email. Just open a lesson and start.

If it helps, share it with one person. That's all I ask.

I write about free coding education and building side projects in public. Follow me here on Dev.to for more.