CM-Post-0001-20220811-Card-Component-1

CREATE A QR CARD COMPONENT

To create a simple QR code component, we will use: HTML and CSS ONLY!

Today, we will be building a responsive QR component using Flexbox and the BEM method for our HTML and CSS structure.

Here is what we will be building today:

Index

1 – Create Folder Structure
2 – BEM Tutorials
3 – Create Markup (HTML) BEM Structure
4 – Create CSS
5 – GitHub Repo
6 – Conclusion

1 – Create Folder Structure

Create Folder Structure

I like to have my website structure nice and organized. To do this, I create separate folders for my stylesheet and my scripts. Since this tutorial won’t cover JavaScript or jQuery, we will just have one folder for our CSS under my dev folder.

Here is how I like to setup my folder structure:

2 – BEM Tutorials

I won’t cover BEM, but there are fantastic resources you can use to get more info on this standard.

BEM Tutorials

Check out the following BEM tutorials:

http://getbem.com/introduction/

Why I use the BEM naming convention for my CSS

You Probably Need BEM CSS in Your Life (Tutorial)

3 – Create Markup (HTML) BEM Structure

We will be creating our markup using the BEM naming standard. If you do not know what BEM is, it’s a simple, but simple and great way to create a naming convention for your Classes and IDs.

Create Markup for BEM

				
					<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- displays site properly based on user's device -->
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="./assets/favicon-32x32.png"
    />
    <link rel="stylesheet" href="./css/style.css" />
    <title>Ron The Web Dev | QR code component</title>
    <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
    <style></style>
  </head>
  <body>
    <main>
      <section class="card">
        <section class="card__qr__wrapper">
          <img decoding="async" class="card__qr lazyload" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="./assets/image-qr-code.png" /><noscript><img decoding="async" class="card__qr lazyload" src="./assets/image-qr-code.png" /></noscript>
        </section>
        <section class="card__text__wrapper">
          <h1 class="card__text__wrapper__heading">
            Improve your front-end<br />skills by building projects!
          </h1>
        </section>
      </section>
    </main>
    <footer>
      Created by
      <a href="#">Ron Ratzlaff (aka Ron the Web Dev)</a>.
    </footer>
  <script defer src="https://blog.creatiquemedia.com/wp-content/uploads/siteground-optimizer-assets/siteground-optimizer-combined-js-e7d211b592633d13295914fe90850dd2.js"></script></body>
</html>

4 – Create CSS

				
					* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  --White: hsl(0, 0%, 100%);
  --LightGray: hsl(212, 45%, 89%);
  --GrayishBlue: hsl(220, 15%, 55%);
  --DarkBlue: hsl(218, 44%, 22%);
}
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap");
body {
  background-color: var(--LightGray);
  font-family: "Outfit", sans-serif;
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
main {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40px 0 0 0;
}
.card {
  background-color: var(--White);
  border-radius: 14px;
  margin: 20px 0 0 0;
}
.card__qr__wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px;
}
.card__qr {
  border-radius: 14px;
  width: 90%;
}
.card__text__wrapper__heading {
  text-align: center;
  font-size: 38px;
  margin: 40px 0 40px 0;
}
.card__text__wrapper__paragraph {
  color: var(--GrayishBlue);
  font-size: 16px;
  text-align: center;
  display: block;
  margin: 10%;
}
footer {
  text-align: center;
  margin: 40px 0 0 0;
}
footer a {
  color: hsl(228, 45%, 44%);
}
@media screen and (max-width: 375px) {
  main {
    width: 80%;
  }
  .card__qr {
    width: 100%;
  }
  .card__text__wrapper__heading {
    font-size: 18px;
    margin: 0;
  }
  footer {
    font-size: 12px;
    margin: 40px 0 40px 0;
  }
}

5 – GitHub Repo

Code:https://github.com/CreatiqueMedia/CM-GHP-QR-Code
Website: https://github.com/CreatiqueMedia/CM-GHP-Post-0001-20220811-Card-Component-1

4 – Conclusion

Hey! I appreciate you stopping by and checking out our blog! If you’re looking for a personal or business website, contact us today and let us know how we can help! Give us a call, or email us using our contact form here: !

Please connect with us on social media here: https://www.creatiquemedia.com/#contact

CreatiqueMedia LLC