World map

 

BM

World 5: Teamwork

Tables, task lists, alerts, Mermaid

You will learn: how to add tick boxes, tables, warning boxes and diagrams to Markdown.

The problem

Practice repo — not a real website
kelab-kod / club-site
PLAN.md · 24 lines

Open Day plan

Warning

The site must be live by Friday!

Jobs

JobWhoDone?
Home pageAinaYes
Events pageMeiNo

To do

  • Pick a date
  • Print posters
  • Test on phones

How work flows

Diagram code (Mermaid). Real sites draw it as a picture.
flowchart LR
  A[Idea] --> B[Issue] --> C[Pull request]

The club’s plan has a warning box, a table, tick boxes and a diagram. Every bit is plain text! Let’s learn each trick.

Try it

A task list: A Markdown list with tick boxes: - [ ] to do, - [x] done. has tick boxes. - [ ] means not done. - [x] means done. Tick “Pick a date”. Leave “Print posters” open.

Turn both lines into tick boxes. Only Pick a date is done.

Preview

To do

  • Pick a date
  • Print posters

0 of 2 goals done

Try it

A table puts pipes | between cells. One special line sits under the top row. Tap that line.

Tap the line that makes the top row a header.

0 of 1 found

Try it

An alert: A coloured Markdown box for a note, tip or warning, like > [!WARNING]. is a coloured box. Put > [!WARNING] on its own line, above the quote. The others are NOTE, TIP, IMPORTANT and CAUTION.

Turn this quote into a warning box.

Preview

Back up your work first.

0 of 1 goals done

Predict

A code block marked mermaid becomes a diagram. What does GitHub show for this one?

flowchart LR
  A[Idea] --> B[Issue] --> C[Pull request]

Check

Which trick is which? Sort each line.

Drag a card into a box. Or tap the card, then tap the box.

        You did it!

        You can now add tick boxes, tables, alert boxes and diagrams to Markdown.

        Go deeper (optional)

        Colons in the dash line align a column: :--- left, :---: centre, ---: right. NOTE is for useful extras. WARNING is for urgent things. CAUTION warns about risky results. Mermaid can also draw sequence diagrams and pie charts. GitHub can draw maps (geojson) and 3D models (stl) too.