For this project, I wanted to build a nostalgic homage to an absolute classic of British television: the 2001 ‘Is Your Boiler Behaving Badly?’ energy efficiency Public Information Film. The goal was to create a modern, high-performance landing page that captures the cheeky humour of the original advert—where a rusty, inefficient boiler hurls insults at a family—while serving as a demonstration of modern web design. It was the perfect opportunity to blend early-2000s TV nostalgia with contemporary frontend styling and interactive elements.
From a technical standpoint, I challenged myself to build the entire experience as a lightweight, single-file drop-in template using strictly pure HTML, CSS, and Vanilla JavaScript, completely avoiding heavy framework bloat. The centrepiece of the page is the interactive boiler, crafted entirely using CSS art and keyframe animations. When clicked, the boiler physically shakes and delivers randomized classic quotes from the ad (like “Hello supermodel… got a boyfriend yet?”) via a JavaScript event listener. The layout utilizes CSS Grid and Flexbox for fluid responsiveness, paired with a custom 16:9 aspect-ratio wrapper for the embedded YouTube video and a clean UI styled around the original “Energy Efficiency Recommended” blue and orange branding.
The final result is a lightning-fast, fully responsive webpage that is fun to interact with. By keeping the footprint minimal and adhering to strict mobile-first design and WCAG accessibility standards, the project proves that you don’t need bloated dependencies to create an engaging, interactive user experience.
