QR Code Generator

Posted on 28 Aug 2021

HTML & JS Template


The HTML template of my resume for my website.

Project Screenshot

Click on image to enlarge

Tech Stack


HTML, CSS, JSON, jQuery, Font Awesome 5


CSS Grid, Flex


This video by Traversy Media on creating a QR Code Generator inspired me to create my own version. Note: I did not follow the tutorial.

QR Codes are useful for mobile phone users to access links simply and quickly.

How to use:

  1. Fill up the URL field with the link to your website.
  2. (Optional) Select the size of the QR Code you want. Measurement is in pixels.
  3. (Optional) Select the colours you want for the QR Code. Foreground Color is the color of the code and Background Color is the color surrounding the QR Code.
  4. Click on submit and wait for your QR Code to generate.
  5. (Laptop/Desktop) Right click on the QR code and click on Save as image…
  6. (Android/iOS) Follow your platform’s specific instructions on how to download images from a website.

This project is build in HTML, CSS and plain JavaScript. I used CSS Grid to for the body and form layout and Flexbox for the header. The QRCode.js library is used to render the QR Code.