Keep A Web Dev Notebook To Learn More Effectively

Reading Time: 5 mins

If you have read my recent post: You Learn More Effectively By Practicing, you’ll know that I’ve consciously made an effort to continue building my web development knowledge.

Over the last couple of years, I developed my knowledge in other areas to help with my current job.

Topics like user guides and e-learning videos dominated my mind over keeping on top of the latest best practices of building a website.

As a result, when I did get back into the world of web development, I felt like I was way behind.

So I dove in and started watching YouTube videos, taking courses, and building parts of websites. As I watched videos and started coding, I noticed there were a lot of topics, ideas, and concepts that were new to me and that I wanted to make note of.

It struck me that I would like to have a place for these notes to live in my Personal Knowledge Management (PKM) system.

After taking a look online to see if anyone had a similar use-case, I found that none seemed to exist, at least not at the time I’m writing this and not in the form I was thinking of.

With all that in mind, I’d like to share with you how I keep my web development notes organized to help develop my knowledge in this area and to help me when actually building websites.

This same concept can be adopted if you’re working as a UI designer or a social media manager, or really anyone that needs to reference certain types of information to be able to do your work.

Keep A Web Dev Notebook To Learn More Effectively - Pin

Where I Started

I’d like to start by giving you a little background on where I started with this process.

If you’ve read my previous articles, you’ll almost certainly know I am someone who loves the idea of a Personal Knowledge Management (PKM) system.

I was completely sold on the ideas brought up in the book How To Take Smart Notes by Sonke Ahrens and as I began to develop my systems in Notion and Obsidian I was hooked.

Over time, Notion has become my tool for project management while Obsidian has become my source for notes and ideas.

If you’re interested, I recently shared My Current Obsidian Setup which describes in more detail how I use this tool for my notes.

The problem I faced was that my current workflow for notes revolved around the thoughts, connections, and ideas I had synthesized from the things I read, watched, or listened to.

I didn’t have a way to organize pre-defined concepts or principles like the 10 Usability Heuristics for User Interface Design or how the hover CSS selector works.

To me at least, these concepts were different from my “traditional” system of literature and evergreen notes, so I needed to think a bit more about how to incorporate this into my PKM.

My Current Setup

Let’s now take a look at my current system for storing my Web Development notes.

In Obsidian, I already have a folder called Resources which stores my workflows, guides, and lists. More info can be found about this in my previous post on My Obsidian Setup that I mentioned previously.

In the Resources directory, I simply created a file called “Web Development Hub”. This note will act as the hub or source of all of my notes on the topic of web development.

From here I can easily link to other notes I create like my note on the 10 Usability Heuristics for User Interface Design that I talked about above.

I can also structure the page in a way that’s meaningful to me. Right now my sub-headings are simply: HTML, CSS, Vanilla JS, WordPress, and Jekyll. I’m sure this will evolve over time as I begin to add more notes.

The Benefits Of Taking Notes

Each time I find myself looking up the same thing multiple times, that’s a clue to me that I need to make a note on it in my PKM system.

Whether it be detail on how the before CSS selector works or why my z-index values are always incorrect or even a great code snippet for achieving a Glassmorphism effect.

I have found that writing good notes is one of the best ways for me to learn and to cement knowledge on a particular topic into my brain.

Hint: the next best way to learn something like web development is by practicing it.

Sure Googling something is a good way to answer your questions but if you’re looking to your own cultivated collection of notes you’ll have an easier time understanding things.

My advice to you, if you’re new to web development or struggling with a concept or a topic, is to create a notebook on that topic.

It doesn’t have to be a digital notebook either. In some cases, a physical notebook may often serve you better.

So long as you have a place to make notes on what you’re learning and you can refer back to them when you need them, that’s what matters.

Feel free to take some inspiration from what you’ve read here and apply it to your own system. Or you could equally just create your own from scratch.

I would also recommend you read this article I wrote that will share with you an excellent technique for learning more effectively: A Simple But Effective Way To Learn Every Day.

Conclusion

I hope you enjoyed reading this article. If you found some value in it, please consider sharing it on social media. It will help others to find it and that would really help me out.