How I Structure My Technical Notes to Actually Use Them

When I first started learning web development, I used to write notes like I was preparing for an exam.

Long paragraphs. Definitions copied from tutorials. Random screenshots.
And later? I never opened those notes again.

So I changed the way I take technical notes.

Now my notes are built for one purpose:
to help me while building projects.

Here’s the structure I use now :-

** 1. Concept → Syntax → Real Example **
Instead of writing only theory, I divide every topic into 3 parts:

Concept
What is it actually used for?

Example:
useEffect lets us run side effects in React components.

Syntax
The basic structure.

useEffect(() => {
// code here
}, [])

Real Example
A practical use case from a project.

useEffect(() => {
fetchJobs();
}, []);

This makes revision much faster because I remember where I used it.

*2. I Write Notes While Building, Not While Watching *
Earlier, I paused tutorials every 2 minutes to write everything.

Now I only write notes after:

• building something
• debugging something
• understanding something properly

Because notes written from experience are easier to remember.

** 3.I Use Small Code Snippets Instead of Big Explanations **

I avoid writing huge theory blocks.
Instead of this:
“Local storage is a web storage object that stores data in key-value pairs…”

I write:
localStorage.setItem("user", "Divya")
const data = localStorage.getItem("user")

Short. Practical. Easy to revise.

*4. I Separate “Learning Notes” and “Project Notes” *
This changed everything for me.

Learning Notes

• concepts
• syntax
• examples

Project Notes

• folder structure
• API routes
• bugs faced
• deployment steps
• features added

Project notes become super useful later when revisiting old projects.

*5. I Make Notes Searchable *
I keep most of my notes digital now.
Because searching:

"how to map array in react"
is faster than flipping pages for 20 minutes.

*Final Thoughts *
Good technical notes are not meant to look beautiful.

They should help you:

• debug faster
• revise quickly
• build projects confidently
• avoid repeating mistakes

The best notes are the ones you actually come back to.

What’s one thing you include in your technical notes that helps you the most?