During a recent bootcamp teaching session where I was walking through a number of front end development techniques, a student asked a great question. Referencing the CSS styles, she asked:
“What is the best way to remember all of the specific style names and properties?”
This is a vital question to answer, especially for new students. For example, if you look at the CSS documentation you’ll find thousands of potential style options. If you’re learning these styles for the first time that list can be pretty intimidating. And that doesn’t even bring in the idea of learning how the styles work together with applications as a whole!
Obviously this issue does not only apply to CSS styles. When it comes to learning development, whether it’s a programming language or framework, you will be greeted with a large amount of information that you’ll need to memorize, or at least know where to reference it.
Guide to Memorization
At first glance this may seem like a daunting task. And many aspiring developers have given up on their learning journey because it seems like an insurmountable challenge. However I’m here to tell you that it’s completely realistic for you to learn how to work with a large number of complex concepts. And if you follow the system I outline in this guide you’ll be amazed at how quickly you pick up on memorizing more information than you ever thought possible.
Before I go into the memorization system I have used through the years, it’s important to say that repetition is the key to memorizing large amounts of information. None of the techniques I will give you are going to help if you don’t take the time to work through them consistently.
Smarter, Not Harder
With that being said, it’s important to know that, by itself, repetition is a slow and naive memory training technique. As a development student, imagine that I had a you a list of a few hundred method names and tell you to memorize them. If you were to simply stare at the sheet of paper and try to memorize the names, how do you think you’d do? If you’re like me and the majority of the world, probably not good.
The reason why dry repetition isn’t a great way to memorize names is because it doesn’t give you a frame of reference for the names.
Visual Mental Mapping
In the first memory technique we’re going to walk through visual mental mapping.
Our minds are incredible at memorization. However at the same time, our minds are also picky with how they store information. Let’s run a quick test. If I show you 15 random digits, such as:
And I give you 5 seconds to look at each number. How many of the numbers will you repeat back to me? Unless your name is Dustin Hoffman (Rainmaker movie reference… might be dating myself a bit on that one), than you probably won’t be able to name very many off.
However, what if I showed you the pictures of 15 celebrities?
Now if I give you the same test as with the numbers. Do you think you’d do a better job remembering the list of celebrities or the random numbers? Assuming you know who the celebrities are you’d be able to repeat back a significantly larger number the celebrities than the numbers.
The reason for this difference is because you have a frame of reference for the celebrities and in this exercise you had a visual reference. By combining these two things your brain was fully prepared to recite back a larger number of items from the second list.
With this knowledge in mind we can apply the same principles for memorizing anything.
Short Term vs Long Term Memory
Because our brains are efficient machines they naturally sort information based on priority. You are most likely aware that you have short term and long term memory. This concept is the reason why you can instantly remember your second grade teacher’s name decades later, but may forget a new acquaintance’s name 30 seconds after hearing it.
Typically the brain doesn’t log knowledge into our long term memory bank unless it thinks we’re going to need it in the future. This is kind of like how a computer works. If you add text to a document and save the file on the hard drive, that’s like storing information in the mind’s long term memory. However if you run a calculation in the terminal the computer processes the information in memory and then discards it, which is like our short term memory system works.
Implementing Visual Mental Mapping
So when it comes to implementing the Visual Mental Mapping technique, we’re essentially tricking our brains into thinking that it needs to move a piece of information into long term memory. In this process we associate a visual image with the term that we want to memorize. A key prerequisite for this to work is that the visualization needs to be relevant to the term (or the behavior of the term).
Getting back to the developer’s initial question. Let’s see how we can use visual mental mapping to memorize a CSS style. I’m going to use the
text-decoration property as a case study. In the world of CSS, the
text-decoration element allows you to add or remove an underline style to a piece of text.
With this in mind I would create an image in my mind that would look something like this:
So in this example I have an image filled with decorations. And on top of the image I have some text that is underlined. And it’s sitting on the decorated fireplace mantle.
By creating this visual image, I’ve mapped:
- Decoration to underlined text
- A familiar image to something abstract
And with this mental image in place, I don’t have to think about the term
text-decoration, instead I will think of a decorated fireplace with underlined text sitting on the mantle. This visual is much easier for my brain to accept into long term memory because it has a direct frame of reference. The
text-decoration word is no longer a foreign element trying to invade my memory. Instead it’s catching a ride on an image that already has a home in my long term memory.
Taking a Real World Example
Sticking with our celebrity theme. Imagine that you wanted to go to a private, VIP party in Hollywood. If you just try to show up the bouncer at the door most likely won’t let you in. However if you’re friends with Brad Pitt and you walk in together, you won’t have any issues attending the party.
Visual mental mapping follows the same principle. Our brains guard our long term memory to ensure that our mind doesn’t get cluttered with useless information. For example, what if you logged every piece of information into your long term memory that you come across each day? As you drive down the street to work your brain captures millions of data points such as: street signs, people walking, etc. If your brain didn’t guard against useless information entering your long term memory bank, all of this information would be treated with the same priority as your parent’s names. Obviously this wouldn’t be a good idea!
So our brains are like the guard in the VIP Hollywood party. And when we attach a new piece of information to something already logged in long term memory, it’s like we’re having Brad Pitt escort us into the party.
So Visual Mental Mapping seems like a great idea. However the idea of creating thousands of visualizations isn’t very practical. Which is why, when I’m learning a new programming language, I also focus on picking up on patterns. Returning to our case study of memorizing CSS elements. Let’s take a look at the
border attributes available in CSS3.
As you can see there are 21 available attributes. And that’s just for managing border styles on a webpage! As you can imagine, it would be pretty intimidating to memorize this list, especially when you realize that it’s only a very small percentage of the available CSS styles needed for development.
However if you start to analyze the list you’ll notice a number of trends. For example there are a number of styles that simply reference:
right. These styles are simply ways for giving a border style to a specific side of an element. Additionally you may also notice that each side also has a set of options for
So practically, if you know that these elements are all available to the
border set of elements. This list can be shrunk down to 5 items:
Which is more manageable.
Copy/Paste is the Enemy
In addition to creating Visual Mental Maps and using patterns, I’m going to finish off the list of memorization techniques with the recommendation to not copy and paste new concepts that you’re trying to learn.
I first heard this advice from Zed A. Shaw, the author of the Learn Hard programming book series. He instructs his readers to not even look at the book at the same time that they’re implementing the code. He postulates that by forcing yourself to type in the code without referencing the documentation while typing, it forces the mind to actually think through each keystroke.
In my personal experience as a developer and with teaching. I’ve discovered a significant difference between the students that copied and pasted code or simply followed along with a tutorial, compared with the students that attempted (even unsuccessfully) to implement the code by themselves.
Not Everything Has to Be Memorized
On a final note, I want to dispel a common fallacy. As a developer you don’t have to memorize every class and method in order to build a project. Even professional programmers constantly lookup documentation on a regular basis. Instead of feeling like you have to memorize everything, focus on memorizing the terms that you use the most. This will make the memorization process more practical and natural.