Bemorex Learn: aprender a programar haciendo.
Marzo de 2026 · en línea
Nuestra plataforma gratuita para aprender desarrollo de software en español y en inglés: 14 cursos con código real, rutas de aprendizaje, un blog técnico, talleres en vivo y un panel que convierte cada lección en progreso, insignias y certificados verificables.
Tecnología
Angular 21
NgRx SignalStore
Firebase Auth- Shiki
PWA
- SSR
- Tailwind CSS 4
- Firestore
- jsPDF
- Vitest
Servicios
El proyecto
Cliente e idea
Bemorex Learn nació de una pregunta que nos hacían en cada charla y cada taller: «¿por dónde empiezo?». Es nuestra escuela abierta: cursos escritos por nuestro equipo, con el mismo código que usamos en los proyectos de clientes, gratis y sin límites.
Reto y objetivos
Casi todo el material bueno para aprender a programar está en inglés, en video y repartido en cientos de sitios. Quien empieza no sabe qué aprender primero ni cuándo está listo para lo siguiente, y abandona a mitad de camino. Había que ordenar el camino completo, de HTML a Angular, Go o Rust, y dar motivos para volver cada día.
Solución y resultado
Escribimos 14 cursos de cinco capítulos cada uno, con lecciones que se leen como un buen artículo y bloques de código con resaltado real, pestañas por archivo y botón de copiar. Siete rutas de aprendizaje ordenan esos cursos según el perfil que uno quiere alcanzar.
Sumamos una cuenta gratuita que guarda el progreso, propone la siguiente lección, mantiene la racha diaria y entrega insignias y certificados en PDF con un código que cualquiera puede verificar. Todo en español y en inglés.
Aprender haciendo
Cursos con código real, de la primera línea al proyecto.
Rutas claras
Qué aprender después, paso a paso.
En dos idiomas
Cada lección en español y en inglés.
Resumen del proyecto
Funciones principales
El recorrido es el de un estudiante: llega por un artículo del blog o por Google, elige una ruta, avanza lección a lección y vuelve al día siguiente porque su racha, su nivel y su próximo paso lo están esperando.
Un catálogo que se entiende de un vistazo
Cada curso muestra su nivel, sus capítulos, sus lecciones y el tiempo estimado. Si ya lo empezaste, la tarjeta te dice cuánto llevas; el temario muestra qué lecciones completaste y cuál sigue.
Lecciones que se leen como un buen artículo
Texto claro, avisos con consejos, una tabla de contenidos y bloques de código con resaltado, pestañas por archivo y botón de copiar. La barra lateral muestra el capítulo y lo que falta para terminarlo.
Rutas para no perderse
Siete rutas, de Frontend con Angular a Backend o Programación de sistemas, ordenan los cursos en el orden correcto. La línea de tiempo marca lo completado, lo que estás cursando y el certificado que espera al final.
Un panel que da ganas de volver
Al entrar, la plataforma propone continuar donde quedaste. Debajo están el nivel, la racha, la meta diaria, la experiencia, el progreso de cada curso y los favoritos guardados.
Desarrollo
Metodología
Construimos la plataforma en Angular 21 con renderizado en servidor y señales, para que cada lección cargue rápido y Google la lea completa. El contenido vive en archivos Markdown que un script convierte en datos tipados y resalta con Shiki antes de publicar. Las cuentas usan Firebase Auth y Firestore, con reglas de acceso por usuario. Las capturas de este caso usan una estudiante ficticia y datos de demostración en emuladores locales.
Proceso
Mapa del sitio
Cuatro puertas públicas y un panel privado. Las fichas punteadas son plantillas: se diseñaron una vez y hoy sirven a 14 cursos, 210 lecciones, 7 rutas y 35 artículos en cada idioma.
- Cursos14 cursos
- Catálogo con filtros por nivel
- Ficha del cursoplantilla × 14
- Lecciónplantilla × 210
- Proyecto final por curso
- Rutas7 rutas
- Índice de rutas
- Frontend con Angular, React o Vue
- Backend, .NET y sistemas
- Rutaplantilla × 7
- Blog y talleres35 artículos
- Blog con categorías
- Artículoplantilla × 35
- Talleres en vivo
- Buscador global
- Mi panelcon cuenta gratuita
- Resumen
- Progreso
- Favoritos
- Insignias
- Certificados
- Verificación pública
Interfaz
Logros que se pueden mostrar
Cada lección suma experiencia y cada curso terminado entrega una insignia y un certificado. Las 21 insignias se agrupan por cursos, rutas, rachas e hitos, y cada certificado tiene una página pública de verificación para compartirlo en LinkedIn.
Proceso
Más allá de los cursos
El blog responde lo que los cursos no alcanzan: novedades de Angular, seguridad, inteligencia artificial o la carrera de un desarrollador. Los talleres en vivo suman cohortes con proyecto real, y el buscador encuentra cursos, lecciones y artículos a la vez.
Interfaz
Oscuro por diseño
La plataforma se pensó en oscuro, como el editor donde se programa: superficies casi negras, texto claro y el degradado ámbar y rosa de Bemorex reservado para lo importante. El modo claro existe para quien lo prefiera. Arrastra para comparar.
Proceso
Páginas completas
La portada presenta cursos, artículos, beneficios y rutas; la ficha del curso, su temario, el instructor y las rutas que lo incluyen; el artículo, el texto con su índice, el código y los comentarios. Así se ven de principio a fin.
Proceso
Una escuela en el bolsillo
Muchos estudiantes leen en el bus o entre clases, así que todo funciona a 390 píxeles: navegación inferior, lecciones legibles, código con desplazamiento horizontal y el panel con sus pestañas. Además se instala como app.
Marca
Tipografía
Una sans propia, geométrica y de trazo limpio, que se lee bien en lecciones largas y conserva carácter en los títulos grandes. El código va en JetBrains Mono para distinguir cada carácter.
zSans
RegularMediumBold
Marca
Colores
El ámbar de Bemorex marca lo que invita a avanzar: continuar, empezar, inscribirse. El rosa y el violeta completan el degradado de la marca, y el negro azulado es la base de todo el modo oscuro.
Conclusión
Bemorex Learn ordena el camino para aprender a programar en español: qué estudiar, en qué orden y cuánto falta. Cada lección completada se convierte en progreso visible y en un certificado que se puede verificar.
Casos
