Flexbox and CSS Box Model

It's pretty simple!

[First make sure you are signed in to your github from vscode settings]

• Open your folder in vs code
• On your left (where the explorer, search, and extensions buttons are) there will be a git button. Click it!
• You will have an option saying "Initialize Repository" and "Publish to GitHub"
• Click Initialize Repository
• You will get a button saying "Commit" with a tick
• After clicking a page will open to name your "Commit" (commit are the changes you make this page will come up whenever you make new changes)
• Name it then a button will appear "Publish Branch"
• After clicking you'll have the option to name your rep with 2 options: Public or Private Repository
• Name & Choose your option
• Done!

You can keep coding in those files and to upload your new code just click git then "commit" and done!

HTML:

• Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify a page's "main" section. Wrap the card in a <main>.

• Besides for the card, you don't need any divs in this challenge, so I would simplify your HTML structure to this:

<main>
    <div>
       <img>
       <h2></h2>
       <p></p>
    </div>
</main>

• The alt text must also say where it leads(the frontendmentor website). A good alt text would be "QR code leading to the Frontend Mentor website."

• Headings should always be in order, so you never start with a <h3>. I would change the heading to a <h2> - a page should only have one <h1>, reserved for the main heading. As this is a card heading, it would likely not be the main heading on a page with several components.

CSS:

• Use the style guide to find the correct background-color.

• Remember to specify a fallback font:font-family: 'Outfit', sans-serif;.

• I like to add 1rem of padding on the body, to ensure the card doesn't touch the edges on small screens.

• Remove the margin on the card.

• To center the card vertically, add min-height: 100svh and justify-content: center on the body.

• Remove all widths in px.

• Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens.

• line-height and letter-spacing should not be in px. Use % for the line height and em for the letter spacing, where 1em equals the font size of the element.

• Paragraphs have a default value of font-weight: 400, so there is no need to declare it.

• On the image, add display: block and max-width: 100% - the max-width prevents it from overflowing its container.