QR Code Component built with React, Tailwind, setup with Vite

Hello Wavy, You have done a good work! 😁

Some little tips to improve your code:

• add main tag and wrap the card for improve the Accessibility
• also you can use article tag instead of a simple div to the container card for improve the Accessibility
• add descriptive text in the alt attribute of the images
• remove all unnecessary code, the less you write the better as well as being clearer: for example the div container of image
• use flexbox to the body to center the card. Read here -> best flex guide
• after, add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container
• use h1 to the title of card
• instead of using px use relative units of measurement like rem -> read here

Keep learning how to code with your amazing solutions to challenges.

Hope this help 😉 and Happy coding!

Hi Wavy! Congratulation on completing this challenge. Welcome to our front-end community.

Great job to complete this challenge. I really like your solution.

I have a solution for your question when I make this challenge I also struggle with this problem so I do that I center my full card with position layout. Just add the main container in your full code and then add position: absolute; then top:100px; left:100px: set the position as you want and add position:relative; in body.

I hope this helps you

👾Hi @wavylmao, congratulations on your solution!👋 Welcome to the Frontend Mentor Coding Community!

Great solution and a great start! From what I saw you’re on the right track. I’ve few suggestions for you that you can consider adding to your code:

1.Fix the alignment. The best way make this alignment is by using FLEXBOX. The first step, is to add min-height: 100vh to make the body height size becomes 100% of the viewport height, this way you make sure the container will be aligned vertically since the body will display ever 100% of the screen height. After that add two flex properties to make the alignment display: flex / align-items: center; / justify-content: center;. If you're using the attribution you need to add flex-direction: column to make the attribution stays under the QR Code component. See the code below:

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

2.Add <main> instead of <div> to wrap the card container. This way you show that this is the main block of content and also replace the div with a semantic tag.

3.Replace the <h2> containing the main title with <h1> note that this title is the main heading for this page and every page needs one h1 to show which is the most important heading. Use the sequence h1 h2 h3 h4 h5 to show the hierarchy of your titles in the level of importance, never jump a level.

4.Clean your code by removing some unnecessary divs, most of the content can stand alone without a div. Use div only for blocks that need a special alignment or the content needs a special positioning.

Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/qr-code-component-vanilla-cs-js-darklight-mode-nS2aOYYsJR

✌️ I hope this helps you and happy coding!

Hi Wavy,

You could use flexbox to center your solution. Search for flex, flex-direction and justify-content.

I watched a great tutorial when I did this.

CSS Flexbox in 20 minutes: https://www.youtube.com/watch?v=JJSoEo8JSnc

Hope this helps.

Thanks