Creating A Recipe Web Page with QR Code

Reading Time: 2 mins

Each year, the company where I work organizes a bake-off / coffee morning in aid of Temple Street Children’s Hospital.

We all bake something to contribute, sweet or savory. All of the other businesses in the building drop by to sample the tasty treats on display.

The most popular sweet and savory entries at the end of the morning win a special prize.

In preparing for this year’s bake off, I decided to add a little bit more to my entry. I wanted to make sure people knew exactly what was in what I was making in a quick and easy way.

So with this in mind, I leaned on my web design knowledge to create a web page that would display the recipe.

The website could be accessed via a generated QR code that I printed out and displayed next to my cake.

This way, not only would you know what was in the cake, but you could try it out for yourself at home!

Building The Web Page

In starting out, I had a pretty good idea of how things would work and how the web page would look.

With that said, I still made up a rough mockup to line things up.

Next, I set about building the web page to hold this recipe. I created a single page, mobile first design using the Bootstrap design framework.

I then added in the recipe, including ingredients and method as well as a suitable photo of the finished product.

I then tested out the web page on my phone and once I was happy with it, I uploaded everything and set about generating a QR code.

Generating the QR Code

Generating a QR code was easier than I thought. I’ll be honest, I had never made one before!

You simply enter the URL into an online QR code generator and presto, a QR code.

With the web page and QR code in place (I know I still haven’t actually baked anything yet) I created some designs for the printed versions of the QR codes.

I used Photoshop to create some small stamp sized designs which displayed the QR code on one side and the name of the cake on the other. I then printed out a few copies of front and back and attached them to some cocktail sticks.

The final, and arguably the most important step, was to bake the cake itself.

In my case, I decided to make some banana bread. I make this pretty regularly and it’s cheap and delicious to make so it was a good choice for me.