Practicable Measurable
Notetaking

Flotes is a free note taking app enhanced with flashcard features. Create, import, and share notes that can be practiced, measured, and leverage spaced repetition to maximize retention and efficiency.

Get Started Try the Demo

Session

4

Easy

+2

Session

2

Hard

-1

Total Notes

26

+7 more

Total Time

4:06M

+36 seconds

Cloze Deletion

Accuracy

75%

+12%

How it works

Create, Study, Repeat

Users create and organize notes into Notebooks.

A Notebook is a collection of notes written in Markdown.

Notebooks will notify you the optimal time to study, and record stats based on your feedback and metrics.

Sharable

Invite friends to collaborate on a notebook together or share as read-only

Practicable

Practice sessions organize study into a measurable actionable activity

Statistics

Feedback from practice and other metrics are used to provide insight

Spacing

Optimizes session spacing for maximum challenge, retention, efficiency

Flotes Demo

My Notebooks

Tailwind

Astro

Svelte

Marketing

UX Design

tRPC Starter

Prisma Basics

Shared Notebooks

Second Brain

D&D Guide

SEO Tips

Wes CS-150

Invites

Tailwind

Advanced Tailwind CSS

Spaced Repetition:

Optimal

Notes

Writing Notes

Markdown Editor

Markdown is a common syntax for writing well-formatted notes. Import or export your notes, no data lock-in or proprietary format.

Features such as images, videos, tables, syntax highlighting, flow charts. Extended to create fill in the blanks for interactive study sessions.

# Tailwind Grid

### Grid Classes

Tailwind grid classes correlate to **css grid properties**. Match the *resulting css* to it's *tailwind class*.

`grid-auto-flow: column`

?- grid-flow-col -?

`grid-auto-columns: max-content`

?- auto-cols-max -?

### Example

```html

<div class="grid grid-flow-col auto-cols-max">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

```

Tailwind Grid

Grid Classes

Tailwind grid classes correlate to css grid properties. Match the resulting css to it's tailwind class.

grid-auto-flow: column

grid-auto-columns: max-content

Example

<div class="grid grid-flow-col auto-cols-max">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

Why Flotes

Get More Out of Studying

Retention

Flotes is structured to emphasize long term retention and efficiency.

Remember what you learn. No illusion of confidence.

Efficient

Builds statistics from your self-evaluation.

Figure out what works and what doesn't.

Archive what you know, practice what matters.

Effective

Create notes that are challenging and engaging.

Built-in spacing algorithm helps you practice optimally, without getting overwhelmed.

Tailwind Grid

Grid Classes

Tailwind grid classes correlate to css grid properties. Match the tailwind class to the resulting css.

grid-auto-flow: column

grid-auto-columns: max-content

Example

<div class="grid grid-flow-col auto-cols-max">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

1