Skip to content
Submitted over 2 years ago

QR CODE COMPONENT USING HTML AND CSS

Sahil Karkera•10
@Feedy99
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

while creating the structure I found it difficult to create a rectangle and bring rectangle in a center. II am unsure about the width and height of the rectangle.

Well i tried my best as a beginner. Overall i had fun working on this project and making a QR CODE. THANK YOU!

Community feedback

  • Christian Prasetya•370
    @christian-prasetyaPosted over 2 years ago

    Dear Sahir, well done to finish this challenge. Eventhough the code is not basically correct, but it does the job.

    Area of improvement:

    1. Don't forget about the <!DOCTYPE html> in the first line of your HTML page (before the html tags). It's the very basic tag to tell the browser the HTML version. That's will help you with the HTML issues.
    2. Semantically, don't use the <div class="rectangle"> you should use <main class="rectangle"> for semantic reason, and <footer> tag for the attribution section. That will help you with the accessibility issues.
    3. For the CSS, you code beautifully, very clean, and specificity is correct.
    4. For creating the rectangle, basically you can add width and height in your "container" (in your <div class="rectangle"> html code), and set the width and height for the rectangle you want to create, as the content container.
    5. For centering the rectangle, remember that <main> or <div> is basically a block element, so you just can center it using margin: (value for x-axis)px auto;, where the auto will automatically center the content in the page.
    6. Tips for measuring the height, width, margin, and padding, you can use the graphic software program like illustrator, photoshop, adobe xd, or figma for the jpg file, and measure it with line tools. It's better though using the pro version, but myself using the free version, and I do that to measure the value I need.

    Hopefully, it can help you in the future. Keep it up, cheers.

    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