Practicable Measurable
Notetaking

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

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

Simple & Functional

At the core of Flotes are Notebooks. -- A Notebook is a collection of notes written in Markdown. That can be searched, shared, practiced, aggregate stats, and leverage spaced repetition

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

Creating Notes

Markdown Editor & Realtime Preview

The preview and editor-toolbar allow you to create notes in Flotes, whether you're new to Markdown or a pro. - Supports images, videos, tables, syntax highlighting, flow charts, and has been extended to create fill in the blanks for interactive practice 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

Effective Note Philosophy

Retention

Practice sessions are structured to emphasize long term retention and efficiency. Remember what you learn. No more 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