Anki programming flashcards

Learning to code with Anki: themes, templates, and syntax highlighting for beginners and pros.

Want to learn how to code? 👨🏻‍💻👩🏻‍💻

I'm using Anki to learn Html/CSS, Elm, Lisp, Python, SQlite (and someday Ocaml); I'm confident if you utilize this tool, you'll learn how to code in no time! What languages do you want to learn?

Anki helps you remember and lock-in learning quickly. Whatever language you're looking to master, let this tool help you! Backend, frontend, somewhere-in-between-end, we've got you covered. It uses spaced-repetition (a fancy way to say "scheduled learning") and simple flashcards for a great way to learn, revise, and practice your coding skills.

Suitable for all learning levels
Great for frontend and backend
Popular languages supported
Add color to your code
Create your own custom theme

The Anki app is great, but it's default cards aren't good for programming: we can do better. Beautify your code (with css colour themes) and make coding fun to learn. Use these handy Anki Programming Flashcards (APF) as part of your daily routine!

Quick start

For updates check this issue first just to be safe. Always backup your decks!

Download Anki desktop
Get the latest .apkg deck release
File > Import ... the deck in Anki
Add a new card (select the APF: ... card type)
Get creative with your cards!

Anki is simple to use, but hard to master. If you're just getting started, these helpful Anki guides will help you; otherwise ... let's begin!

<details open> <summary>🎥 Quick start video</summary> <em>Coming soon ...</em> </details>

Next steps ...

Once you're happy with your cards, it's wise to backup!

Create a web account to backup your cards[^1]
With the mobile app, click "Synchronize" your profile
Login to your web account ...
And you're all done!

Get familiar with the cards below, Markdown code block highlighting, and when you're a little more advanced, try out the compiler.

Cards

There's three types of cards to choose from:

💡 Simple
- What's the answer?
- What does this syntax do?
🔎 Missing!
- A question with a […] word
- A question with a [missing] word
🖍️ Draw! (experimental)[^2]
- A diagram of a small program you have to guess
- A sketch of a function or program to drill yourself on

Next, you'll probably want to add some pretty colors to your code.

Add color to your code

Syntax highlighting

🎨 Life is better in full colour!

They say code is an art form. Anki flashcard's CSS themes come with a light and dark colour palette; it's also good for dark mode if that's your thing.

👨🏻‍🎨 Starter themes
- 🥷🏻 Monochrome
- ⛵️ Breeze Dark

You can highlight any code string with basic highlighting, or go full color with Markdown and Pandoc code blocks. We have a monochrome theme for notes, and a modified Breeze Dark theme[^3] for blocks of code.

We can bring colour to all your favourite languages:

Have a clear learning frame

One big caveat is "learn the basics well first" before deciding on a direction. I'd suggest the first 2-3 chapters of How To Design Programs and learn good habits with Elm, a delightful language for web applications.

This simply means things you will, and won't learn from the enormity of learning resources we all have at our disposal. Concrete goals keep you on track, a learning frame helps avoid wasted time. Looking for a job? A hobby project? A budding entrepreneur? Frames change over time and differ person to person, but if you're starting from scratch, it really helps guide you (I wish I'd done that starting out).

Mine is "prototyping Elm apps with Python and SQLite to validate my digital product ideas". That means academic research, complex servers, deep learning, huge apps, other languages, and so on, is 100% OUT; I don't code every day so the learning must be light and apps simple. Here's a more detailed example of a learning frame from the "Programming Elm" book I worked through.

Keep it simple, stupid!

☝️ One idea per card. Just one.

Over time writing flashcards will become second nature; muscle-memory. These simple constraints have worked well for me, and they add the responsibility to write better flashcards: if you're spending more than a minute reviewing each card; reduce, reduce, reduce.

Simple is better

If you only had 280 characters, what would you say? It's good practice to write your flashcards like you'd write code — as clear as possible. Those 10 cards you wrote with 100 related ideas? Sifting through those will become a chore; 100 cards with one idea is much better!

Shorter is better

Essential parts of the code (or all code?) should be 32 characters wide or less,[^4] with 2 space tabs. In my experience (with the mobile app) this allows for:

A comfortable reading width (easy to scan)
Key syntax is front and centre
No horizontal scrolling (terse code)

Write for your stupid future self

You'll look back on your flashcards and they'll make perfect sense. We've all looked at code we've written (our stupid future self) and wondered what on earth is going on, so avoid struggling to understand your cards, or getting overwhelmed with information, by rewriting your cards "as if" we are our future selves. Follow these rules:

One idea per card
Less is more (trim the fat)
Keep it concise and relevant (reduce cognitive load)

Don't overload the brain

A card stuffed with facts will overload the brain. Keep your questions concrete and clear. Limit factual information of each card and be super focused: if you find yourself asking two questions, or learning about two unrelated facts in a single card, split them out into 2 cards:

One function, syntax, or code snippet to learn
One learning lesson (documentation of an outcome)
One particular aspect of a problem you solved

Do it badly first, then review

Often I'll create a flashcard and spot problems with it later. Perhaps the question isn't worded well, the code sample is too long, formatting is off, it's too unfocused, a different card type is more suitable, or a difficult question needs splitting into three easy cards. Fix it then and there in the mobile app, or tag it as edit for later. This makes for less frustration and a pleasant experience in future.

Anki

Install / Use

README