Skip to content
Submitted about 2 years ago

A Qr code page using HTML and CSS.

jalil•10
@Jalilcrypto
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

setting the layout for mobile and desktop devices was difficult for me. I don't think I got it right still. I am very unsure of the margin I used in my div, was thinking that I would have used positions instead. i would love to know how to fix my errors and get use to them please.

Community feedback

  • Gopal•60
    @Gopal577Posted about 2 years ago

    Hello Jalil, congratulations for your first solution and welcome to the Frontend Mentor Coding Community!

    Reviving your code you will need <meta name="viewport" content="width=device-width, initial-scale=1.0"> in head section for your site to be responsive.

    Next is accessibility issues site must have landmarks it can tags like header, nav, main, footer etc. to make it easier to navigate, Site must have a main tag and h1 tag so use main as your card and h1 as bold text

    Marked as helpful
    0
    jalil•10
    @JalilcryptoPosted about 2 years ago

    @Gopal577 thanks a lot

    0
    jalil•10
    @JalilcryptoPosted about 2 years ago

    @Gopal577 thanks a lot

    0
  • Raja Junaid Farooq•390
    @Raja-JunaidPosted about 2 years ago

    Hi Jalil! Congratulation on completing this challenge. Welcome to our front-end community. I really like your solution.

    Jalil uses media query's to make a responsive design. First, you want to set your media screen as you want and then apply all properties as you want but first, you add margin:0 and padding:0 in the main container.

    I hope this helps you

    Marked as helpful
    0
  • Lucas 👾•104,340
    @correlucasPosted about 2 years ago

    👾Hi @Jalilcrypto, congratulations on your 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:

    1.When you download the project files there’s a file called style-guide.md where you can find information such as hsl color codes and the font-size for the headings. The background-color in this case is background-color: #D5E1EF

    2.Add the website favicon inserting the svg image inside the <head>. <link rel="icon" type="image/x-icon" href="./images/favicon-32x32.png">

    3.Add <main> instead of <div> to wrap the card container. This way you show that this is the main block of content and also replace the div with a semantic tag.

    4.Clean your code by removing some unnecessary divs, most of the content can stand alone without a div. Use div only for blocks that need a special alignment or the content needs a special positioning.

    5.Add a margin of around margin: 20px to avoid the card touching the screen edges while it scales down.

    6.Use relative units as rem or em instead of px to improve your performance by resizing fonts between different screens and devices. These units are better to make your website more accessible. REM does not just apply to font size, but to all sizes as well.

    Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/qr-code-component-vanilla-cs-js-darklight-mode-nS2aOYYsJR

    ✌️ I hope this helps you and happy coding!

    0
    jalil•10
    @JalilcryptoPosted about 2 years ago

    @correlucas thank you very much 🙏

    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