Skip to content
Submitted 7 months ago

QR code HTML | CSS

kristinakasalova•90
@kristinakasalova
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

In this project I tried to learn to work with Figma, so I'm glad I found my way around it, although still needs a bit of work.

What challenges did you encounter, and how did you overcome them?

I struggled most with position in the middle of the desktop page and generally with block positions and their alignment. Fonts have also proved to be a bit of a pain despite the fact this wasn't the first time I used them.

What specific areas of your project would you like help with?

Alignment, alignment, alignment. I feel that despite my efforts there is room left for improvement and I will be immensely happy if you share best practice with me.

Community feedback

  • Rebecca Padgett•1,860
    @bccpadgePosted 7 months ago

    Hello @kristinakasalova. Congratulations on completing this challenge!!!🎉

    I have a few tips you might be interested in to improve your solution.

    HTML 📃:

    • Every website should have at least one landmark like a main tag

    Example

    <body>
 <main>
   /*All content goes here*/
 </main>
<footer>
   /*attribution info goes here*/
</footer>
</body>

    CSS 🎨:

    • You can use Flexbox or CSS Grid to center the qr code component in the middle of the website

    Flexbox

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

    CSS Grid

    body{
 display:flex;
 place-content: center;
 min-height: 100vh;
}

    Here is my solution to this challenge - Qr code component

    I hope you find this useful and don't hesitate to reach out if you have any questions

    Marked as helpful
    0
    kristinakasalova•90
    @kristinakasalovaPosted 7 months ago

    @bccpadge Thank you, I amended the HTML file per your suggestions and the report errors. I purpotedly omitted flexbox/grid as I used them previously and found them a bit confusing, so wanted to see if I can find solution that suits me better. Will use them in future though since it seems to do the job best.

    0
    Rebecca Padgett•1,860
    @bccpadgePosted 7 months ago

    @kristinakasalova

    When I have trouble with a certain topic, usually watch a YouTube video on it and follow along with the tutorial. The only way to get better is to practice. 🙂

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord