Fraser Boag

How I built an interactive, fully responsive periodic table of the elements

2nd December 2019

Click here to check out the periodic table for yourself.

Sometimes I become obsessed with really specific things. Back in 2014/2015, the subject of my affections was the periodic table (and the plethora of elements contained within) mostly thanks to the wonderful Periodic Videos YouTube series by the always entertaining Brady Haran.

Off the back of this, and looking to create a fresh addition to my portfolio when applying for a job at the time (I got it!) I built my own web-based periodic table which, as far as I’ve found, is the only periodic table on the internet which:

The site communicates in real time with the Wikipedia/MediaWiki APIs in order to pull through up-to-date content and imagery for each element, so all I need to do is keep the table itself in order (which doesn’t tend to change very often).

The nicest thing about this project was how widely used it ended up being – over the years I’ve received numerous emails from teachers around the world telling me they’ve found it useful, as well as referral traffic from a number of schools, colleges and universities. It only receives a small stream of traffic these days but as it’s something I find genuinely interesting I like to keep it up to date (most recently adding the newly named elements Nihonium, Moscovium, Tennessine and Oganesson) and I occasionally freshen up the styling.

As the site was built back in 2015, it’s starting to show its age in terms of the technologies I used (hello jQuery and vanilla CSS), however it remains one of my favourite side projects nonetheless.

Longer term I’d love to carry out a complete rebuild in a modern stack, incorporating more detailed information (probably hidden behind a toggle to keep it approachable to novices) and a variety of new features. I would also like to build my own back end API to cache the Wikipedia data, to save pulling it fresh every request.

Be sure to check out the periodic table for yourself, and let me know what you think or if you have any ideas as to how it could be more useful.

Thanks to Icons8 for the header illustration.

What do you think?

I genuinely love to talk web. If you have any civil thoughts, corrections or comments on this note, feel free to tweet or DM @fraserboag or, if you prefer, email


Let me send you emails

From time to time I post things which people seem to find fairly interesting, stick your email address in the box below and you'll hear about it!