💻 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!
- Download the latest Anki deck (
.apkg) - Open Anki. Select
File > Import ... - Import the Anki deck
- Add a new card
- Select the
Anki themestype - Get creative with your cards!
There's two 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
- A question with a
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 ...
☝️ 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!
🎨 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.
- 🖌️ Starter themes
- 🧑🎨 Create your own colour 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.
I've spent a lot of time so you can:
- Use Anki themes as they are ...
- Use the excellent
markdown->htmlworkflow - 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.
🕰️ 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!
⚠️ 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.
⚠️ 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.
⚠️ If you're having formatting problems, make sure you're following the guide and clickingToggle 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 youcopy->pastetext, or add junk to the html.
Anki themes are licensed under the MIT Open Source License
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!
