ICO Notes | Interactive guide on communication and leadership
All ICO course content in a navigable webapp: 4 phases, 14 weeks on voice, charisma, public speaking and persuasion. Installable on mobile as a PWA.
Context
Notes webapp for the ICO programme (Instituto de Comunicación). What started as a project to showcase exercises ended up becoming a full webapp with all the course content.
Goal
Have a resource to check all the course content anytime and anywhere, even without an internet connection.
Cómo surgió este proyecto
Este proyecto surgió de casualidad. Empecé creando una web para mostrar los ejercicios de la formación en Instituto de Comunicación (ICO), pero conforme iba avanzando me di cuenta de algo: no existía ningún recurso donde pudiera ver todo el contenido de las clases y consultarlo en cualquier momento.
Eso lo cambió todo. Dejé el enfoque inicial de los ejercicios, cambié completamente la estructura del proyecto y empecé a construirlo como una web de apuntes completa.
Mucho contenido, mucha organización
El proceso fue largo. La formación de ICO tiene mucho contenido y antes de ponerme a maquetar necesitaba tener claro cómo iba a organizarlo, qué estructura le iba a dar y cómo quería que se viera el diseño final.
Todo esto mientras seguía avanzando con la propia formación, entrando cada día a las clases en directo de los mentores (Oratoria y Debate, Psicología Relacional, Asesoría de Imagen y Negociación y Ventas) y compaginándolo con las clases de inglés en Conquer Languages y los proyectos y clases del máster en Conquer Blocks.
Una vez tuve todo estructurado, empecé a maquetar el contenido de todas las lecciones grabadas y todos los directos de cada semana.
Qué tiene la web
El contenido está dividido en las 4 fases del programa, que cubre 14 semanas. Después están todos los apuntes de los directos con Adrià Solà Pastor, el creador de ICO. Y más abajo, todo el contenido de cada uno de los mentores.
Lo que más me gusta del resultado es que es exactamente lo que necesitaba: puedo acceder a todo el contenido en cualquier momento y lugar porque se puede instalar en el móvil como acceso directo y consultar todo incluso sin conexión a internet.
Para toda la comunidad
Esto no me lo quedé solo para mí. Lo compartí con toda la comunidad de ICO para que pudieran beneficiarse también. Al final, si ya tenía hecho el trabajo, ¿por qué no ponerlo a disposición de todos?
Además, grabé un vídeo para Conquer Blocks en YouTube explicando cómo hice la web por dentro y enseñando un poco cómo funciona. Eso sí, tuve que ir con mucho cuidado para no mostrar el contenido de las clases, ya que al ser una formación privada no puedo compartir ni el texto ni el enlace de la web públicamente.
How this project came about
This project happened by chance. I started building a website to showcase the exercises from the Instituto de Comunicación (ICO) course, but as I kept going I realised something: there was no resource where I could see all the class content and check it whenever I needed.
That changed everything. I dropped the initial exercise-focused approach, completely restructured the project, and started building it as a full notes webapp.
A lot of content, a lot of organising
The process was long. The ICO course has a huge amount of content, and before I could start coding I needed to be clear on how I was going to organise it, what structure to give it, and how I wanted the final design to look.
All of this while I was still progressing through the course itself, attending live daily classes with the mentors (Public Speaking and Debate, Relational Psychology, Image Consulting, and Negotiation and Sales), and balancing it with my English classes at Conquer Languages and the projects and classes from my master’s at Conquer Blocks.
Once I had everything structured, I started building out the content from all the recorded lessons and every weekly live session.
What the website includes
The content is divided into the programme’s 4 phases, covering 14 weeks. Then there are all the notes from the live sessions with Adrià Solà Pastor, the creator of ICO. And further down, all the content from each of the mentors.
What I like most about the result is that it’s exactly what I needed: I can access all the content anytime and anywhere because it can be installed on my phone as a shortcut and everything is available even without an internet connection.
For the whole community
I didn’t keep this just for myself. I shared it with the entire ICO community so they could benefit from it too. In the end, if the work was already done, why not make it available to everyone?
I even recorded a video for Conquer Blocks on YouTube explaining how I built the site behind the scenes and showing how it works. I had to be very careful not to show the class content, though, as it’s a private course and I cannot share the text or the website link publicly.
Lessons learned
Sometimes the best projects are born unplanned. A real need gives meaning to what you build.
Organizing a large amount of content before you start coding saves you a lot of time later.
Future improvements
- Migrate the project to Astro to increase loading speed and improve the overall structure.
- Rewrite the style architecture using Sass. While the current CSS is split into files, since it originated from a single file, a proper migration requires rebuilding the foundation for true scalability.