Frontend Mentor - QR code component solution

This is a solution to the QR code component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • AI Collaboration
• Author

Overview

Screenshot

Links

• Solution URL: https://github.com/ganur2004/qr-code-component
• Live Site URL: https://ganur2004.github.io/qr-code-component

My process

Built with

• Semantic HTML5 markup (<main>, <h1>, <p>)
• CSS custom properties (design tokens)
• Flexbox for layout and centering
• Native CSS Nesting
• BEM-style class naming
• Mobile-first approach
• rem units for font sizes and spacing
• min-height: 100dvh for full-viewport layout

What I learned

1. Semantic HTML matters

Using the right tags instead of generic <div> makes the page accessible to screen readers and search engines for free:

<!-- Before -->
<div class="title">Improve your front-end skills...</div>
<div class="body">Scan the QR code...</div>

<!-- After -->
<h1>Improve your front-end skills by building projects</h1>
<p>Scan the QR code to visit Frontend Mentor...</p>

2. CSS custom properties as design tokens

Storing colors and values in :root makes the whole design easy to maintain:

:root {
    --color-bg: hsl(212, 45%, 89%);
    --color-title: hsl(218, 44%, 22%);
    --color-body: hsl(216, 15%, 48%);
    --radius-card: 1.25rem;
    --radius-img: 0.625rem;
}

3. rem vs px for font sizes

rem scales with the user's browser font-size preference, while px ignores it. This is important for accessibility:

/* Scales with user preference */
font-size: 1.375rem;  /* = 22px at default settings */

/* Ignores user preference */
font-size: 22px;

4. Nested radius rule

Inner border-radius must always be smaller than the outer container's radius, otherwise the corners visually "break out":

.card       { border-radius: 1.25rem; }  /* 20px */
.card img   { border-radius: 0.625rem; } /* 10px — always less than parent */

5. min-height: 100dvh instead of height: 100vh

min-height prevents content from being cut off if it overflows, and dvh (dynamic viewport height) correctly handles mobile browsers where the address bar hides and shows.

Continued development

Areas I want to focus on in future projects:

• Responsive design with media queries — making layouts adapt to different screen sizes
• CSS Grid — understanding when to use Grid vs Flexbox
• Git workflow — committing changes with meaningful messages, working with branches
• Deployment — publishing projects to GitHub Pages or Vercel
• Accessibility audit — using Lighthouse and axe DevTools to catch a11y issues

AI Collaboration

I used Claude (via Claude Code CLI) as a learning partner throughout this project.

• Code review — After writing the initial solution, Claude reviewed the code and pointed out missing accessibility attributes (alt, lang), missing meta tags, and semantic HTML issues (<div> instead of <h1> / <p>).
• Iterative fixes — I applied the feedback round by round and Claude re-checked after each iteration, explaining why each change matters rather than just what to change.
• What worked well — Getting specific, actionable feedback with before/after examples helped me understand the reasoning behind best practices, not just memorize rules.
• What I'd do differently — Next time I'll try to identify more issues myself before asking for a review, to build up my own eye for code quality.

Author

• Frontend Mentor - @ganur2004
• GitHub - @ganur2004