Lists and Tables

By the end of this lesson you'll turn loose notes into tidy bullet lists, numbered steps, nested outlines, tick-box checklists, and clean aligned data tables — using nothing but a few keyboard characters.

1. Unordered (Bullet) Lists

An unordered list is a set of bullet points where order doesn't matter. Start each line with a -, *, or + followed by one space. All three characters produce identical bullets, so the choice is purely cosmetic — just pick one and stay consistent.

- Apples
- Bananas
- Cherries

2. Ordered (Numbered) Lists

When order does matter — steps in a recipe, a ranking — use a number, a period, and a space: 1. . Here's the surprise that trips everyone up: Markdown ignores the digits you type and numbers the list itself, in order. So you can write all 1. and still get 1, 2, 3. That's a feature — you can reorder steps without renumbering by hand.

1. Wake up
1. Drink coffee
1. Write code

3. Nested Lists (Indentation)

To put a list inside a list item, indent the child line. The reliable rule: indent each level by two spaces (some tools accept four). The indentation is what creates the hierarchy — get it wrong and the child either jumps to the top level or breaks the list entirely. You can mix types freely: bullets under a numbered step, numbers under a bullet, etc.

- Fruit
  - Apples
    - Granny Smith
  - Bananas
- Vegetables
  - Carrots

// 🎯 YOUR TURN #1 — build a nested shopping list.
// Replace every ___ then press "Run". This prints Markdown SOURCE;
// the comment shows how it RENDERS in a real Markdown viewer.

console.log("- Drinks");                 // top-level item (no indent)

// 1) Add a child of "Drinks". Children are indented 2 spaces.
console.log("___- Coffee");              // 👉 put TWO spaces where ___ is

// 2) Add a second child "Tea", also 2 spaces in.
console.log("___- Tea");                 // 👉 two space
...

4. Task / Checklist Lists

Task lists are bullet items with a clickable checkbox. Write a bullet, then [ ] for an empty box or [x] for a ticked one (a space inside the brackets means unchecked). They're hugely popular for to-do lists, pull-request checklists, and READMEs on GitHub, GitLab, and most modern viewers.

- [x] Buy ingredients
- [ ] Cook dinner
- [ ] Wash up

5. Tables

A table is three ingredients stacked as lines: a header row, a separator row of dashes, then one or more data rows. Columns are divided by the pipe character |. The separator row — at least three dashes --- per column — is what tells Markdown "this is a table". Leave it out and you just get a row of text with pipes in it.

| Name   | Language   | Stars |
|--------|------------|-------|
| React  | JavaScript | 220k  |
| Vue    | JavaScript | 207k  |

Good news: the cells don't need to line up in your raw text. The viewer ignores extra spaces, so | React | JavaScript | and a perfectly-padded version render identically. Aligning them by hand just makes the source nicer to read.

6. Column Alignment

Add a colon : to the dashes in the separator row to control how each column lines up. The colon shows which side the text "sticks" to: left colon = left, both = centre, right colon = right. Numbers usually look best right-aligned.

| Left  | Center | Right |
|:------|:------:|------:|
| a     |   b    |     c |
| dog   |  cat   |  mouse|

// 🎯 YOUR TURN #2 — build a 2-column table.
// A table is: header row, then a SEPARATOR row of dashes, then data.
// Replace every ___ then press "Run".

// 1) The header row. Wrap each title in pipes.
console.log("| Language | Year |");

// 2) The separator row makes it a table. It MUST be there,
//    and it needs one dashes-cell PER column.
console.log("|----------|------|");        // 👉 this line is required

// 3) Fill the data cells. Keep the SAME number of pipes (3 here).
console.log("|
...

// Markdown source printed as plain text.
// Paste any block below into a real editor to see it RENDER.

console.log("=== Unordered list (- / * / + all work) ===");
console.log("- Apples");
console.log("- Bananas");
console.log("- Cherries");
console.log("");

console.log("=== Ordered list (number + a period) ===");
console.log("1. Wake up");
console.log("2. Drink coffee");
console.log("3. Write code");
console.log("");

console.log("=== Auto-numbering: the DIGITS are ignored ===");
console.log(
...

// 🎯 MINI-CHALLENGE: a "Project README" snippet.
// No blanks this time — write the console.log lines yourself.
//
// 1. A task list (checkboxes) with 3 items, one ticked:
//      - [x] Set up repo
//      - [ ] Write tests
//      - [ ] Deploy
// 2. A right-aligned table of 2 files and their line counts:
//      header row: | File | Lines |
//      separator:  |:-----|------:|   (note the colon = alignment)
//      two data rows of your choice
//
// ✅ When pasted into a Markdown viewer you sho
...