Optional Title

DOBROMIR HRISTOV

@d_m_hristov

PRESENTATION

HEADING OF

Who am I ?

John Doe

  • Lead Dish Washer @ Restaurant
  • Over 3 years of experience
  • Contributor to broken dishes
  • Clogged dish washer expert

Pages ​with more

text or explanation

I

I

Pages ​with more text or explanation

Page on left

Put your page/slide text here. The text should be no less than 160% scale to make sure it is readable.

 

Make sure paragraphs are short and concise to keep user attention.

 

This kind of page is mostly used for when you have a bit more text that you want to convey with some image on the side.

I

  1. List short one line features here.
  2. Be short and to the point.
  3. Use at least 160% text scale.
  4. If you have less bullets, increase line height a bit.
  5. Try to keep the width of the text box to max 80%.
  6. Don't go over 8 bullets.
  7. Use bold to emphasize were needed.

Centered Page

Pages ​with more text or explanation

I

Key Points Page

Pages ​with more text or explanation

  • Modern
  • Progressive
  • Composable
  • Core - View Only
  • Declarative
  • Reactive

I

Comparison Page

  • Used to compare things
  • Between Left and Right side
  • Keep up to 8 bullets per side
  • Is this how this works?
  • I dont know what to fill this with
  • This side's grass is greener!
  • But its lonelier here...
  • Has a better view though
  • Might as well stick around
  • Hey look a fly...

Pages ​with more text or explanation

Pages with

Coding Examples

II

II

Pages with Coding Examples

Code and Live Example

<div id="app">
  <div>
    {{ vueText }}
  </div>
  <input type="text" v-model="vueText">
</div>

Visual Connection

Use underlines to create visual connection between parts of code and visual representation

<form>
  <label>Recipe Name</label>
  <input v-model="form.name" type="text">
  <label>Portions</label>
  <input 
    v-model="form.portions" 
    type="number">
  <label>Vegan 
    <input 
      v-model="form.isVegan" 
      type="checkbox">
  </label>
  <label>Difficulity</label>
  <input 
    v-model="form.difficulity" 
    type="range">
</form>

II

Pages with Coding Examples

II

Pages with Coding Examples

Short Code Example

  • These are usually very short
  • And require just a word or two to explain

Add the most important note here

<button @click="counter++"> 
    Increment
</button>

Expression

Event Name

Special thanks to
My Mom

My

Bro

My

Mom

My

Dad

Find me at

john-doe

john-doe

john-doe

john-doe

John Doe

Free Reusable Vue Slides Deck

By Dobromir Hristov

Free Reusable Vue Slides Deck

A Vue.js inspired slides deck to help you build readable presentations.

  • 1,710
Loading comments...

More from Dobromir Hristov