Skip to content

Learn to code with Anki — flashcards and themes for all learning levels. Master your programming language of choice!

License

Notifications You must be signed in to change notification settings

badlydrawnrob/anki

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

License Release GitHub Repo stars

Anki themes

Learning to code with Anki — themes, cards, templates, syntax highlighting

💻 Want to learn how to code?

Anki helps you learn and remember quickly. The default cards aren't great for programming, so these flashcards and themes make it fun to learn.

  • Suitable for all learning levels
  • Perfect for frontend and backend programmers
  • Popular languages supported
  • Add color to your code
  • Fully customisable (create your own themes and cards!)

Are you looking to master html, css, javascript, php, python, lisp, elm, R — or just getting started? If you're new to Anki, read these guides first; otherwise ... let's begin!

Quick start

  1. Download the latest Anki deck (.apkg)
  2. Open Anki. Select File > Import ...
  3. Import the Anki deck
  4. Add a new card
  5. Select the Anki themes type
  6. Get creative with your cards!

Cards

There's two types of cards to choose from:

  1. 💡 Simple
    • What's the answer?
    • What does this syntax do?
  2. 🔎 Missing!
    • A question with a […] word
    • A question with a [missing] word

Next, you'll probably want to add some pretty colors to your code. But first, a quick tip on how to keep your Anki deck nice and organised ...

Keep it simple, stupid!

☝️ One idea per card. Just one.

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!

Imagine you're stupid, writing for your stupid future self; you'll look back on your flashcards and they'll make perfect sense.

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

A card stuffed with facts will overload the brain. I imagine you're trying to learn:

  • A theme, or idea
  • A function, or code snippet
  • Syntax, or high-level documentation

That's great! But. Keep your questions clear — perhaps split a hard question into three easy cards — if you're spending more than a minute reviewing each card; reduce, reduce, reduce. Simplify it!

Add color to your code

Syntax highlighting

🎨 Life is better in full colour!

They say code is an art form. Anki themes comes with both a light and dark colour palette; highlight any code string with basic highlighting, or go full colour with Markdown and Pandoc.

Custom colors and a child theme

Once you've got the basics down, you can get really fancy with offline markdown->html, custom cards, and using NPM, Pandoc, and CSS to create your theme 🧑‍🎓 the professional way.

Why Anki Themes instead of a plugin?

I've spent a lot of time so you can:

  • Use Anki themes as they are ...
  • Use the excellent markdown->html workflow
  • Customise the css to your hearts content.

Works on all platforms: AnkiMobile, MacOS (Intel, Qt6) and Android. It depends on very little from the Anki; stable software, no add-ons required, with a simple setup.

Dependency hell

🕰️ A tool or a piece of software that's still around in 5 years, without any serious changes, is a good thing

There are other plugins out there that are fun to use, but beware of dependency hell!

Be careful when ...

Upgrading your deck

⚠️ Always backup your deck before installing a new version!

I try to stick to major.minor.patch semantic versioning, so updates don't break existing cards. Anki makes this tricky, so view commits for any major changes to the theme.

Creating your flashcards

⚠️ Stick to Common Markdown or safe HTML to avoid unintended consequences in Anki. Here's some helpful guides on how to use the Anki software.

Formatting problems

⚠️ If you're having formatting problems, make sure you're following the guide and clicking Toggle HTML Editor ⌘⇧X (‹›) in the editor to copy/paste your HTML or raw text. For more information, see this issue. Many editors break formatting when you copy->paste text, or add junk to the html.

Licensed under MIT

Anki themes are licensed under the MIT Open Source License

Thanks to ...

Inspiration

I've had a lot of inspiration from Enduring CSS for component naming conventions, @mdo code guide for HTML/CSS and @cbracco for sane frameworks ... so, thanks!

About

Learn to code with Anki — flashcards and themes for all learning levels. Master your programming language of choice!

Resources

License

Stars

Watchers

Forks

Packages