Skip to content
Submitted over 2 years ago

Used Html and Internal CSS to build QR-Code

mirzafaisalbaig•20
@mirzafaisalbaig
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

It was difficult😅 As it was my first project but anyhow i did it.

Code

Please log in to post a comment

Log in

Community feedback

  • Hassia Issah•50,410
    @Hassiai

    Replace <div class="container"> with the main tag to fix the accessibility issues. click here for more on web-accessibility and semantic html

    Add a tittle tag <tittle> within the head tag <head> and give it a content to fix the error issue. The content of tittle tag is the tittle of the html. <head><tittle> The tittle goes here </tittle></head>

    <p> Challenge by should be out of <div class="container"> and wrap in the footer tag.

    To make th image visible , add "/qr-code-component-main" after the "." of the src value in the img. <img src = "./qr-code-component-main/images/image-qr-code.png">

    To center .container on the page using flexbox or grid instead of margin:

    • USING FLEXBOX: add min-height:100vh; display: flex; align-items: center: justify-content: center; to the body
    body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
    • USING GRID: min-height:100vh; display: grid place-items: center to the body
    body{
min-height: 100vh;
display: grid;
place-items: center;
}

    Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

    Give h1 and p the same font-size of 15px which is 0.9375rem, text-align: center,the same margin-left, margin-right and margin-top values. Give p a margin bottom value.

    For a responsive content, give .container a fixed max-width and a padding value for all the sides. max-width:320px padding:16px . Reduce the border-radius value of .container

    Give the img a max-width of 100% and reduce its border-radius values, the rest are not needed.

    Hope am helpful.

    Well done for completing this challenge. HAPPY CODING

    Marked as helpful
  • Manish Patel•740
    @savvystrider

    The file path of your img is incorrect, so it's not showing up. Change the src attribute to src="./qr-code-component-main/images/image-qr-code.png".

  • Jeremy Flodin•260
    @jeremyoduromanu

    It is good habit to contain all page content in a container/landmark like "main" for accessibility.

    Also, try adding this to the body element css code min-height: 100vh display: flex justify-content: center align-items: center This will center your content container

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