Captura: Apuntes de JavaScript | Guía interactiva instalable

Apuntes de JavaScript | Guía interactiva instalable

Mis apuntes de JavaScript en una PWA con buscador global, flashcards de repaso y resaltado de sintaxis.

2026 HTMLSassJavaScriptVite

Contexto

Empecé el módulo de JavaScript de Conquer Blocks tomando apuntes en Notion. Funcionaba, pero no era algo que me apeteciera consultar. Decidí convertirlos en una web propia.

Objetivo

Tener una referencia visual, práctica y siempre disponible de todo lo que iba aprendiendo en el módulo de JavaScript, organizada por módulos y clases.

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.

Aprendizajes

01

Hacer algo para ti mismo que realmente vas a usar te da una energía completamente distinta. Cuando el proyecto te importa, no es esfuerzo: es flujo.

02

Haber construido proyectos similares antes (apuntes de inglés y comunicación) me permitió avanzar más rápido y tomar mejores decisiones desde el principio. La experiencia acumulada se nota.

03

A veces el primer paso es lo más difícil. Muchas veces es mejor actuar y mejorar sobre la marcha que esperar el momento perfecto para empezar.

Futuras mejoras

  • Implementar un buscador más avanzado con sugerencias en tiempo real y filtros por categorías para localizar conceptos aún más rápido.
  • Reescribir la arquitectura de estilos con una base Sass más escalable, partiendo desde cero para evitar la deuda técnica acumulada.
  • Añadir sincronización de progreso personal: marcar clases como leídas y guardar el avance entre sesiones.