Eyebrow

Presentation Template

Reusable Marp template for technical talks and training.

Gaurav Agarwal
CoderMana

Me

Gaurav Agarwal

Software Engineer & Product Developer

Director of Engineering & Founder @ https://codermana.com

ex-Tarka Labs, ex-BrowserStack, ex-ThoughtWorks

CoderMana

In-class Training

What we wanted

CoderMana

WFH

What we got

CoderMana

As an instructor

  • I promise to make this class as interactive as possible
  • I will use as many resources as available to keep you engaged
  • I will ensure everyone's questions are addressed
CoderMana

What I need from you

  • Be vocal
    • Let me know if there are any audio/video issues ASAP
    • Feel free to interrupt me and ask questions
  • Be punctual
  • Give feedback
  • Work on the exercises
  • Be on mute unless you are speaking
CoderMana

Class progression

Learning Curve

CoderMana

Here you are trying to learn something, while here your brain is doing you a favor by making sure the learning doesn't stick.

CoderMana

Some tips

  • Slow down: stop and think
    • Listen for the questions and answer
  • Do the exercises
    • They are not add-ons; they are not optional
  • There are no dumb questions
  • Drink water. Lots of it.
CoderMana

Some tips (continued)

  • Take notes
    • Try repetitive, spaced-out learning
  • Talk about it out loud
  • Listen to your brain
  • Experiment
CoderMana
Content > Time
CoderMana

Show of hands

Yay's in chat

CoderMana
Start Here

The shape of the talk

Use this deck as a working scaffold. Replace the examples with your content and keep the layout classes.

CoderMana

Agenda

  1. Why this topic matters
  2. The model or framing
  3. A concrete walkthrough
  4. Practice, discussion, or next steps

Keep agenda slides short. The value is in orientation, not detail.

CoderMana
Speaker

Gaurav Agarwal

Software Engineer & Product Developer

Director of Engineering & Founder @ https://codermana.com

ex-Tarka Labs, ex-BrowserStack, ex-ThoughtWorks

CoderMana
Section

A clear section break

Section slides should reset attention and name the next idea plainly.

CoderMana

Split layout

Use this when text needs a supporting visual.

  • Keep the left side textual
  • Put evidence on the right
  • Make one point per slide
CoderMana

Image-led slide

In-class training

Use images when they carry the point directly. Avoid decorative filler.

CoderMana

Three related ideas

Context Move Result
What the audience needs to know before the detail lands. The practical technique, decision, or shift you want to teach. The observable outcome or tradeoff that follows from the move.
CoderMana

Make the important thing impossible to miss.

Good quote slides create a pause. Use them sparingly.

CoderMana

Source-backed code sample

export function greeting(name) {
  return `Hello, ${name}!`;
}

The marker keeps this slide synchronized with the named source region whenever the deck is built.

CoderMana

Compact code sample

const audience = ["design", "engineering", "product"];

const plan = audience.map((group) => ({
  group,
  outcome: "leave with one concrete next step",
  format: group === "engineering" ? "live demo" : "worked example",
}));

console.table(plan);

Add code-tight only when a longer, discussion-worthy listing genuinely needs the extra room.

CoderMana

Mermaid diagram sample

Mermaid diagram

Keep diagrams as Mermaid source in the deck. The build creates matching SVGs for every export.

CoderMana

State the useful rule

Use the body of the slide for the normal case, recommendation, or primary
explanation.

Caveat: reserve this anchored note for a constraint or exception that materially changes how the audience should apply the advice.

CoderMana

Exercise

Work in pairs for 10 minutes.

  1. Identify the main tradeoff.
  2. Write down one concrete example.
  3. Share the decision you would make.
CoderMana

Takeaways

  • One idea the audience should remember
  • One habit they can practice immediately
  • One resource they can use after the session

* bullets reveal one click at a time. Use plain - for lists that should appear all at once.

CoderMana

Resources

Code

https://github.com/CoderMana/presentation-template-marp

Slides

https://template-marp.slides.algogrit.com

CoderMana

deck:title:start

deck:title:end

snippet: examples/snippets/greeting.js#greeting

deck:resources:start

deck:resources:end