Frontend Mentor - QR Code Component Solution

This is my solution to the QR code component challenge on Frontend Mentor. This challenge helped me practice and improve my skills in HTML, CSS, and accessibility.

Table of Contents

• Overview
  • Screenshot
  • Links
• My Process
  • Built With
  • What I Learned
  • Continued Development
  • Useful Resources
• Author

Overview

Screenshot

QR Code Component Screenshot - Desktop

Links

• Solution URL - Frontend Mentor
• Live Site URL - GitHub Pages

My Process

Built With

• Semantic HTML5 markup
• CSS custom properties
• Mobile-first workflow
• Accessibility improvements (ARIA labels, alt attributes)

What I Learned

This project reinforced my understanding of HTML and CSS, and I also gained new insights into making content more accessible. Key points include:

• Adding ARIA attributes like aria-labelledby and aria-describedby for screen readers.
• Using CSS custom properties for color variables to maintain a consistent theme.
• Implementing a responsive layout without using frameworks or Flexbox.

Example of CSS for responsive layout and styling:

.container {
  max-width: 375px;
  margin: 0 auto;
  padding: 1rem;
  background-color: var(--white);
  border-radius: 17px;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Continued Development

For future projects, I want to keep improving my understanding of responsive design and focus more on accessible practices. I also aim to explore CSS Grid to expand my layout options.

Useful Resources

• The Markdown Guide - This guide was helpful in structuring this README file.
• CSS-Tricks - ARIA and Accessibility - This article offered useful tips for accessibility.

Author

• GitHub - Mayen007
• Frontend Mentor - @Mayen007