A few points on the page design: the whole layout jumping if you hover over a square is far from ideal. If you want to increase the padding on hover, you can offset with negative margins or use some other similar solution. The whole page shouldn't jump around when I hover over something.

Secondly, the click-on-the-box interaction is not all that intuitive, it took me a fair bit to even figure out I could (or should) click on the boxes. It might be a good idea to open one section by default and link the opened are with the colored square somehow.

Website to show beginners the different CSS color notations.