one of my latest achievement is an interactive map of all pokemon locations across games. Nothing more than a <svg> map, a image source for the background... and a few thousands of <polygons> with some CSS style!
All of the coordinates are mapped by hand by a tool I designed to draw shapes in SVG :)

sometimes i love to build stuff using nothing but plain html/css (and small bits of JS for values binding throughout the UI) just to learn how things are made.

for example this Pokémon R/G/B stats calculators is nothing more than two pentagons SVGs, a few <input type="range"> and some data binding!

Here's what I meant by saying smaller size.
Those two notepads show the same trainer card + team. The right one is the current implementation, the left one is the one I made.

~3600 chars over 180~ lines VS ~3500 (excluding spaces for indentation: 3500 - 14 * 15 * 6 = ~2300) chars over ~100 lines.

same about the teams! 3 columns layout instead of 2, usage of responsive grids for better tablet/mobile overview, more spacing to make things less cluttered and less colors (only on important parts like types).

my attempt at improving the bulbapedia trainer VS info card by using the Amber's page in the #rejuvenation wiki as a training environment

100% MediaWiki tmplt/CSS. The outputed template's size is also like 60% smaller by deducing a lot of info automatically, and uses CSS cool stuff like grids

it's broken but it's LIVE