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.

• Frontend Mentor - QR code component solution
  • Table of contents
  • Overview
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
      • 1- In HTML
      • 2- In CSS
      • 3-In Skills
    • Continued development
    • Useful resources
  • Author
  • Acknowledgments
  • Donations :

• Solution URL: https://www.frontendmentor.io/solutions/semantic-html-bem-naming-css-flexbox-custom-css-class-name-styling-pZUA-YZc-g
• Live Site URL: https://loukhai.github.io/FRONTEND-MENTOR---QR-code-component-/
• GitHub Repo : rabia loukhai FrontendMentor solution QR-code-component

• Semantic HTML5 markup
• custom CSS properties
• Flexbox
• B.E.M Naming methodology

I made sure the QR card with a semantic HTML with practicing the BEM methodology in the classes nomination.

<div class="container__card flex_center">
  <main class="card flex_center">
    <div class="card__imgContainer">
      <img src="images/image-qr-code.png" alt="qr-code" class="card__img" />
    </div>
    <article class="card__description flex_center">
      <h1 class="description__title">
        Improve your front-end skills by building projects
      </h1>
      <p class="description__text">
        Scan the QR code to visit Frontend Mentor and take your coding skills to
        the next level
      </p>
    </article>
  </main>
</div>

I make a custom class to don't repeat my self in styling (like a DRY principe but in css)

.flex_center {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: column;
  gap: 25px;
}

This is my first time that i write a documentation, i guess that is good practice to improve the thinking of the developer it self and the others of their codes and their the English language for anglophone people.

I will be practice more projects to improve my skills like a front-end web developer

• Markdown Cheat Sheet - This helped me for written a MD file. I really liked this cheat-sheet and will use it going forward.

• B.E.M Naming Methodology - This is an amazing article which helped me finally understand BEM Naming. I'd recommend it to anyone still learning this concept.

• Website - Rabiâ LOUKHAI
• Frontend Mentor - @Loukhai
• Twitter - @loukhai_rabia
• Linkedin - Rabiâ Loukhai

• The helpful recommendations from the COMMUNITY FEEDBACK of Frontend Mentor ❤️.

• You can support me & buy me a coffee ❤️✨☕https://www.buymeacoffee.com/rabialoukhai