QR code component using basic HTML and CSS

Hello, aljacly Congratulations on finishing this project. It's lovely and great on the whole! Just a little tip:

• You might want to use semantic tags like the <main> to wrap your code, instead of divs. like

<main class="container">
<div></div>
<div></div>
<div></div>
<div></div>
</main>

This would help improve accessibility.

• add the below code to the body. It will center everything

body {
    justify-content: center;
    align-items: center;
    display: flex;
    height: 100vh;
    flex-direction: column;
}

• remove the below styles from the .border

.border {
    /* width: 200px; */
    /* height: 200px; */
    /* display: block; */
    /* margin-left: auto; */
    /* margin-right: auto;*/
    /* margin-top: 250px;*/
}

• remove the below styles from the .caption

.caption{
    /* top: 48%;*/
   /*height: 200px;*/
    margin-top: 5rem;
}

• in .caption2 the top: 40% & text-align: center;

• this is my solution live, repo

I hope it will work. Happy coding.

👾Hi @aljacly congratulations on your first 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:

This article explain why is better to use rem over px :Some people, for example, need to zoom maybe up to 400% to be able to read your text, due to a visual impairment. Using REM you make sure that your text respects these needs, because the font-size is defined relative to the default font-size a user has chosen. https://www.freecodecamp.org/news/what-is-rem-in-css/#:~:text=Using%20REM%20(or%20another%20relative,due%20to%20a%20visual%20impairment.

✌️ I hope this helps you and happy coding!

Hello Aljacly, I just submitted this myself, few observations though #CSS

1. You should create a CSS file to make your HTML file cleaner
2. You should use flex on your body tag to centre its children(main or the div containing the code)
3. The div class border is breaking the code. You should remove it once the flex is added

#HTML

1. Your text should be in a paragraph tag, or heading tag, not in a div

Hopefully, I have been of help. Still a lot to be done though