Submitted 8 months ago

QR Code Component Solution - HTML & CSS

Sarah Hetman• 10

@sarahhetman

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I'm still new to HTML and CSS so the hardest part was centering everything. Was there an easier way to center this project?

Community feedback

Mariusz• 120

@MariusG1991

Posted 8 months ago

Hi,

Easier way to center everything is using flexbox or grid, I will show u both solutions:

First one

body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Second

body{
  display: grid;
  place-items: center;
  min-height: 100vh;
}

If you use one of this, you can remove position absolute,top,left,transform from your body selector ;)

Marked as helpful

Sarah Hetman• 10

@sarahhetman

Posted 8 months ago

@MariusG1991 Thank you! I remember learning flexbox but it is definitely something I need to work on.

solvman• 1,670

@solvman

Posted 8 months ago

Very well done! 🎊🎉🚀

Use should look into semantic HTML instead of plain <div> elements for better accessibility. I have some suggestions on how you can improve your project. First, the <main> element represents the dominant content of the <body> and expands on the central topic of the document. Such widgets as cards are more suited to be constructed with the <article> element, which encapsulates reusable, self-contained content. Titles and headings are usually denoted by <h1>, <h2>, <h3>, and so on. Do not skip levels of headings. Regular text is generally encapsulated by <p>. With that being said, I would redo your code as so:

<body>
  <main>
    <article class="card">
        <img class="card__img" src='images/image-qr-code.png'>
        <h1 class="card__title">Improve your front-end skills by building projects</h1>
        <p class="card__text">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
   </article>
  </main>
</body>

Learn more about semantic HTML elements here

To center your card in the middle of the screen, you could do the following:

body {
    height: 100vh;
    min-height: 600px;  /* prevents clipping */
    display: grid;
    place-content: center;
}

Please remember that block-level elements stack one on top of the other. The only element that is not block level within the card is <img>, which could be "converted" to block level through a simple reset, which should be used almost on every project anyways:

img {
    display: block;
    max-width: 100%;   /* ensures images does not overflow the container */
}

To center <h1> and <p> horizontally, you could use the margin left and right as auto like so:

h1, p {
    margin-inline: auto; /* -inline denotes left and right */
}

Otherwise, very well done!🎊 Keep it up!👏

Marked as helpful

Sarah Hetman• 10

@sarahhetman

Posted 8 months ago

@solvman Thank you for reviewing my code! I don't know why I didn't use semantic HTML. Clearly I just skipped all thinking in that area. 😅

Marcos Travaglini• 4,920

@Blackpachamame

Posted 8 months ago

Greetings! you have done a great job 😎

📌 Some accessibility and semantics recommendations for your HTML

To improve the semantics of your HTML, you can change your <div class="container"> to a <main class="container">
I recommend doing a small reset to the styles that come by default in the browsers. To do this, you can apply a couple of properties to the universal selector *, with this you will make your site look the same in all browsers
I leave you the task of researching the reset CSS and the box-sizing: border-box
If you didn't apply the reset, you can add margin: 0 to your body, this will remove annoying scrolling on large screens. If you want to maintain separation on very small screens, you can apply the margin again using media querys
Instead of using position to center your content in the center of the screen, you can use the flexbox properties in the body:

body {
    font-family: "Outfit";
    background-color: #d6e1ee;
    text-align: center;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

Marked as helpful

Sarah Hetman• 10

@sarahhetman

Posted 8 months ago

@Blackpachamame Thank you for looking over this! I'm going to make those changes and do some review on flexbox. 😊

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord