QR code card using flexbox

Hello Nabil,

Congrats on completing the QR- code challenge 👏

Here are some improvements that I would like to suggest :

1. Using Semantic HTML5

You may use semantic HTML, instead of <div>. some examples of semantic HTML : <main> , <section> , <header>,<nav>, <footer>

You may read more about semantics here

2. Using CSS variables

For example, using the style guide provided, you may create your CSS colors variables as follow :

root {
--white: hsl(0, 0%, 100%);
--light-gray: hsl(212, 45%, 89%);
}

Read more about CSS custom properties here

3. Min-height instead of height

Instead of height:100vh; replace it with min-height: 100vh; for the body.

body {min-height: 100vh;}

You may read more about min-height here

4. Remove the space on line 14 and fix the font size value units. (style.css)

I notice that there is a space between background-color: hsl(212, 45%, 89%); and font-size: Also, it seems like you forgot to specify the unit of the font size. font-size:15;--> is an invalid property. You should mention a unit such as px, em, or rem.

5. For the img , replace height: 50% with height:auto;

If height: auto; the element will automatically adjust its height to allow its content to be displayed correctly.

I hope these will be helpful to you 😉

Good luck going forward and happy coding 🙂

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

• I have other recommendations regarding your code that I believe will be of great interest to you.

QR iMAGE ALT TEXT 📸:

• The QR Code Component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute which should explain the purpose of the image.

• The alt with the QR code image is not even explaining for what the QR image need to be used.

• So update the alt with meaningful text which explains like QR code to frontendmentor.io

• Example: <img src="/images/image-qr-code.png" alt="QR code to frontendmentor.io">

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

Congratulations on completing the challenge! That's a great achievement, and I'm sure you put a lot of effort into it. I really liked the way you approached the challenge and the code you wrote. You demonstrated a good understanding of the concepts and applied them effectively to solve the problem.I have a few suggestions to improve your code further. You need to add Semantic HTML tags

The HTML structure should be semantically correct. The current structure doesn't provide any semantic information about the content. A better approach would be to use appropriate HTML tags such as <header>, <main>, <section>, <article>, etc. to define the sections of the page

here is the code that u need to add to add semantic tags in ur page

<main class="container">
<img src="images/image-qr-code.png" alt="the QR code image">
<div class="text">
<h1>Improve your front-end skills by building projects</h1>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</div>
</main>