A simple QR Code using Flexbox

Hello Dan, congrats on completing first challenge

About your question Stephanie Eckles has a great article that I used in my challenge today.

Here's the article link: Keep the footer at the bottom: Flexbox vs. Grid

Happy coding.

👾Hello Dan, congratulations for your first solution! 👋 Welcome to the Frontend Mentor Coding Community!

You've a great solution and a great start. I've some tips for you: to avoid the accerror you need to add ever one h1 to wrap the main title of the page, I know this is a component but anyways requires one h1. It's better you give a padding-bottom: 40px or use gap: 40px to separate the container from the attribution or use position: absolute to make it get positioned bottom with bottom 0. And reduce the html structure removing unnecessary div, you ca wrap all content in a single div.

✌️ I hope this helps you and happy coding!

Hi Dan,

Congratulation on completing your first challenge. Your solution looks great. I have some suggestions regarding your solution if you don’t mind:

• You should use <footer> for attribution. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.

• Page should contain <h1>. In this challenge , it’s supposed to be a part of a whole page, so to tackle the accessibility issue you may use<h1>with sr-only class hidden visually and present for assistive tech users.

• In my opinion, the alternate text should indicate where the Qr code navigate the user : like QR code to frontend mentor .

• Add min-height: 100vh instead of height: 100vhto the body that let the body grows taller if the content outgrows the visible page instead.

• width:320px;an explicit width is not a good way to have a responsive layout. Consider using max-width to the card in rem instead.

Hopefully this feedback helps.

'''How do you make a footer containing some text that sticks to the bottom?'''

You can use the property: footer { position: absolute; ( To make the footer or div float) bottom: 0; (keeps the element glued down) /* After that, you can centralized. */

}