Another Wednesday, another mini-tutorial!
Today, we’re doing something super practical: adding a QR code to your website. Because sometimes, sharing a link the old-school way just doesn’t cut it.
Wait, Why Use a QR Code at all?
Quick answer: they’re easy, mobile-friendly and just cool. QR codes let users scan and go; they could scan a contact form, app download or your portfolio link,
Step 1: Basic HTML Setup
<div class="card">
<h1>Scan Me!</h1>
<div id="qrcode"></div>
</div>
That’s your placeholder. Now let’s generate the actual QR code.
Step 2: Use a QR Code Generator Library (No Backend Needed)
We’ll use a popular lightweight library called QRCode.js. You can include it via CDN:
<script src="https://cdn.jsdelivr.net/npm/qrcodejs/qrcode.min.js"></script>
Step 3: Add the JavaScript
Now generate the QR code and target the #qrcode div:
const qrcode = new QRCode(document.getElementById("qrcode"), {
text: "https://your-link-here.com",
width: 128,
height: 128,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
Replace the text value with the link you want users to scan.
Optional: Add Some Basic Styling
Here’s a little CSS to centre the QR code and keep things neat:
body {
font-family: sans-serif;
background-color: #f4f4f4;
color: #333;
display: flex;
justify-content: center;
align-items: center;
}
.card {
background: #ffffff;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
padding: 2rem;
width: 300px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#qrcode {
margin-top: 1rem;
}
Feel free to customise it, round corners, borders, drop shadows, etc...
Final Result
You now have a working QR code on your site!
No backend, no fancy framework, just good ol’ HTML, CSS and JS.
Check it out in this Codepen
Bonus Idea:
Let users generate QR codes dynamically by typing a URL and clicking a button. Wanna see that next Wednesday? Let me know!
Follow me to see more straight-forward and short tutorials like this :)
Top comments (0)