Screenshot: Apuntes de JavaScript | Guía interactiva instalable

JavaScript Notes | Interactive installable guide

My JavaScript notes turned into an installable web app: global search, review flashcards and code blocks with syntax highlighting.

2026 HTMLSassJavaScriptVite

Context

I started the JavaScript module at Conquer Blocks taking notes in Notion. It worked, but it wasn't something I actually enjoyed looking up. I decided to turn them into a website of my own.

Goal

Have a visual, practical and always-available reference of everything I was learning in the JavaScript module, organised by modules and lessons.

Empezó en Notion

Cuando llegué al módulo de JavaScript de mi máster en Conquer Blocks, empecé tomando apuntes en Notion como hacía con todo. Funcionaba, pero sabía que no los iba a consultar. Notion es cómodo para escribir, pero no es una herramienta que me apetezca abrir cuando quiero repasar algo rápido.

Así que decidí hacer lo que más me gusta: construirlo desde cero.

De apuntes a app

Lo primero fue volcar todo el contenido en una estructura que tuviera sentido: módulos, temas y clases. A partir de ahí, la app fue creciendo sola. Empezó siendo una web de consulta rápida y acabó siendo una PWA instalable con buscador global, sistema de flashcards para repasar, bloques de código con resaltado de sintaxis y botón de copiar, tabla de contenidos flotante con scroll spy y atajos de teclado para navegar sin tocar el ratón.

También tiene modo oscuro y claro automático, tipografía cuidada con Inter y JetBrains Mono, y funciona sin conexión una vez instalada en el móvil o en el ordenador.

Ya había construido webs similares para mis apuntes de inglés y de comunicación. Esta es, sin duda, la mejor de las tres. Precisamente porque tenía experiencia previa, supe organizarme mejor, avanzar más rápido y tomar mejores decisiones desde el principio.

Días en estado de flow

Durante varios días estuve completamente inmerso en el proyecto. Entré en ese estado en el que pierdes la noción del tiempo porque lo que estás haciendo te importa de verdad. No era una obligación: era algo que quería que existiera y que yo mismo iba a usar.

Cuando lo terminé, me encantó el resultado. Y lo sigo usando.

Lo que me llevo

Este proyecto me recordó algo importante: muchas veces es mejor dar el primer paso y actuar que quedarse pensando cómo darlo. Yo suelo ser de los que piensan mucho antes de empezar. Aquí simplemente empecé, y salió bien.

It started in Notion

When I reached the JavaScript module of my master’s at Conquer Blocks, I started taking notes in Notion like I always did. It worked, but I knew I wasn’t going to look them up. Notion is comfortable for writing, but it’s not something I actually feel like opening when I want to quickly look something up.

So I decided to do what I enjoy most: build it from scratch.

From notes to app

The first step was organising all the content into a structure that made sense: modules, topics and lessons. From there, the app grew on its own. It started as a quick-reference site and ended up as an installable PWA with a global search, a flashcard system for reviewing, code blocks with syntax highlighting and a copy button, a floating table of contents with scroll spy, and keyboard shortcuts to navigate without touching the mouse.

It also has automatic dark and light mode, careful typography with Inter and JetBrains Mono, and works offline once installed on your phone or computer.

I’d already built similar sites for my English and communication notes. This one is, without a doubt, the best of the three. Precisely because I had prior experience, I was able to organise myself better, move faster and make better decisions from the start.

Days in a state of flow

For several days I was completely immersed in the project. I entered that state where you lose track of time because what you’re doing genuinely matters to you. It wasn’t an obligation — it was something I wanted to exist and that I was going to use myself.

When I finished it, I loved the result. And I still use it.

What I take away

This project reminded me of something important: most of the time it’s better to take the first step and act than to keep thinking about how to do it. I tend to be someone who thinks a lot before starting. Here I just started — and it worked out.

Lessons learned

01

Building something for yourself that you'll actually use gives you a completely different kind of energy. When the project matters to you, it doesn't feel like effort — it feels like flow.

02

Having built similar projects before (English and communication notes) let me move faster and make better decisions from the start. Accumulated experience shows.

03

Sometimes the first step is the hardest. More often than not, it's better to act and improve as you go than to wait for the perfect moment to start.

Future improvements

  • Implement a more advanced search engine with real-time suggestions and category filters to locate concepts even faster.
  • Rewrite the style architecture with a more scalable Sass foundation, starting fresh to avoid accumulated technical debt.
  • Add personal progress tracking: mark lessons as read and save progress between sessions.