qr-code-component

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
  • Useful resources
• Author
• Acknowledgments

Overview

Screenshot

Desktop

Mobile

Links

• Solution URL: Solution
• Live Site URL: Demo

My process

Built with

• Semantic HTML5 markup
• CSS BEM Architecture
• Flexbox

What I learned

HTML Landmarks

HTML landmarks are specific HTML elements that define the structure of a webpage. They help assistive technologies and browsers understand the layout and navigation of the page. Some common landmark roles include:

• <header>: Represents the header of a section or page, typically containing navigation or introductory content.
• <nav>: Defines a navigation section with links to other parts of the website.
• <main>: Encapsulates the main content of the page, excluding headers, footers, and navigation.
• <footer>: Indicates the footer of a section or page, usually containing contact information or copyright notices.
• <aside>: Represents content indirectly related to the main content, like sidebars or callouts.

<header>
  <h1>Site Title</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>
<main>
  <h2>Main Content</h2>
  <p>This is where the main content of the page goes.</p>
</main>
<aside>
  <h3>Related Information</h3>
  <p>This is additional information related to the main content.</p>
</aside>
<footer>
  <p>© 2024 Your Website</p>
</footer>

BEM Architecture

BEM (Block, Element, Modifier) is a naming convention for classes in HTML and CSS that helps in creating reusable and maintainable code. It breaks down components into blocks, elements, and modifiers.

• Block: The top-level abstraction of a component (e.g., button).
• Element: A part of the block that performs a specific function (e.g., button__icon).
• Modifier: A flag on a block or element that changes its appearance or behavior (e.g., button--large).

<div class="button button--large">
  <span class="button__icon">🔍</span>
  <span class="button__text">Search</span>
</div>

.button {
  padding: 10px 20px;
  border: none;
  background-color: #007bff;
  color: white;
  font-size: 16px;
  display: flex;
  align-items: center;
}

.button--large {
  font-size: 20px;
}

.button__icon {
  margin-right: 8px;
}

.button__text {
  font-weight: bold;
}

Useful resources

• BEM Architecture - This helped me grasp the gist of the BEM architecture. I really liked this pattern and will use it going forward.
• Accessibility Landmarks - This helped me understand that I have to design pages in a structured/semantic way so blind users can easily navigate the page when using a screen reader.

Author

• Website - Som3aware.vercel.app
• Frontend Mentor - @ahmedsomaa
• Twitter - @som3aware

Acknowledgments

• Øystein Håberg - His feedback on using rem for font sizes, incorporating a CSS reset, and adjusting element sizing and padding has greatly enhanced my understanding of creating responsive and accessible designs in CSS.