dieudonneallognon / qr-code-component

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
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout depending on their device's screen size
• See hover states for interactive elements

Screenshot

Links

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

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Less CSS Precompiler
• Gulp task Manager
• BEM Naming syntax
• Desktop-first workflow

What I learned

• BEM Naming syntax

Aiming to gain more consistency and readability in my css code, I adopted the BEM naming syntax for my css classes.

<main class="card">
  <img class="card__image" ... >
  <div class="card__content">
    <h1 class="card__content__title"> ...</h1>
    <p class="card__content__text">...</p>
  </div>
</main>

Author

• Github - dieudonneallognon
• Frontend Mentor - @dieudonneallognon
• LinkedIn - Dieudonné ALLOGNON