Qr code challenge using HTML and CSS

Hi there @waad2lf, here are some suggestions from my side.

1. centring items.

#container {
min-height: 100vh; // forcing container to take a minimum of the screen's height.
display: flex;
justify-content: center; // centring on the main axis, in this case horizontally.
place-items: center; // centring on the cross axis, in this case vertically.}

• you should have always a main landmark element included in your html

• NEVER skip the headings order in html, there should be first an h1 before you using an h2

• Why are you don't use an alt on the image? It's really important!

• use a css reset, look on Andy's Bell website for a good and clear one

• never set a height on a container, the content provides the height

• never use px for font-size but rem https://fedmentor.dev/posts/font-size-px/

• your font-family should be inculde in the html, like the design says

• dont use ID in css, bcs is has a high specificity, use classes

Hi 👋, perhaps some of this may interest you:

HTML / ACCESSIBILITY:

• The main content of every page (the card in this case) should be wrapped with the <main> tag.

• Every page should have an <h1> to improve user experience and because it is an important element when it comes to SEO. It is good not to skip heading levels.

• This is a meaningful image and in case the user can't see it, it should have an alt text with a description.

CSS:

• You might consider using some CSS reset as a good practice at the start of each project, to have a clean starting point and reduce differences between browsers.

For example, here are some very common and useful ones to get you started:

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

• If you want to center the content you should add align-items: center and min-height: 100vh to the 'container', and remove the margin-top from de 'item'.

• You don't need to use font-weight of 400 and 700 as these are the default values for normal and bold fonts (paragraphs and headings).

I hope you find it useful, any questions do not hesitate 🙂

Regards,

Be sure you applied the feedback on your projects asap!