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
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author
• Acknowledgments
• Feedback/Suggestions
• Notes

Overview

The challenge

Users should be able to:

• Your challenge is to build out this QR code component and
• Get it looking as close to the design as possible.

Screenshot

Desktop View	Mobile View

Links

• Live Site URL: Website Link - Click Me
• Solution URL: FrontEndMentor Link - Click Me

My process

Built with

• Plain: HTML, CSS
• Mobile-first workflow (Using Media Queries)

What I learned

Recap over some of the major learnings while working through this project:

• Basic review of HTML & CSS
• CSS Flex Layout

This code snippets/function, if what I'm proud to accomplished:

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

Continued development

---

Here are a few possible areas that could be added or improved in the HTML and CSS code you provided:

1. Accessibility: - It could be more accessible to users with disabilities by:
   • Include appropriate ARIA attributes, alt text, and semantic HTML tags.
   • Also, providing a larger font size, better color contrast, and using aria-label, aria-roles attributes for the interactive elements.
2. Responsiveness: - Using responsive design techniques and media queries for different screen sizes and devices.

Author

• Github - @Iron-Mark
• Frontend Mentor - @Iron-Mark

Acknowledgments

• I would like to acknowledge the hard work and dedication that I went into creating this website.
  • (I'm still recovering from fever doing this lol)
• I am grateful for my friends and to those who motivate me push through and not settle in relaxation.
• I hope that this website serves its intended purpose. Thank you.

Feedback & Suggestions:

Community Feedback:

• Melvin Aguilar 🧑🏻‍💻 • 41,690 (@MelvinAguilar)

  • Alt text 📷:

    • The alt attribute should not contain underscores or hyphens, it must be human readable and understandable.
    • The alt attribute should not contain the words "image", "photo", or "picture", because the image tag already conveys that information.
    • The alt attribute should explain the purpose of the image.
      • Upon scanning the QR code, the user will be redirected to the frontendmentor.io website,
      • So a better alt attribute would be: alt="QR code to frontendmentor.io"
    • If you want to learn more about the alt attribute, you can read this article 📘.

  • CSS 🎨:

    • Setting the width of the component with a percentage or a viewport unit will behave strangely on mobile devices or large screens.

    • You should use a max-width: 320px or 20rem to make sure that the component will have a maximum width of 320px on any device.

    • Also remove the width property with a percentage value.

    • A tip, instead of using flexbox and having width: 87% to center the image you could use padding on the component,

      • This way you would create the space between the image and the component border and not repeat so much code.

    • To give you an idea, the challenge does not require any media query,

      • It can be made responsive for all devices just by using the necessary styles.

    main > section {
        /* padding: 1rem 0rem; */
        background-color: var(--white);
        /* width: 85vw; */
        padding: 1rem;
        max-width: 318px;
        text-align: center;
    }
  
    div img {
        width: 100%;
        /* max-width: 87.5%; */
    }

Next Action (v2):

• Implement changes from community feedback
• Build with Svelte

Note:

• I would be happy to recieve comments, criticism, and such that could improve the website:
  • Better way of doing this website
  • Cleaner Code
  • Better Practice

v1: Last Update: Feb 12, 2023 v2: On Progress...