Skip to content
Submitted about 2 years ago

QR Code using HTML and CSS

Og-successful•280
@Error-at-night
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

I'm happy to be on this challenge, it didn't take me much time to complete it, I know I did my best though.

I will be happy if the top experts in this community can go through the code and I tell me where to improve myself, because i know I did my best, but there is still gonna be some things I'm missing.

So please I need corrections on that, Thanks

Community feedback

  • romila•3,570
    @romila2003Posted about 2 years ago

    Hi @Error-at-night,

    Welcome to frontendmentor.io and congratulations 🎉 for completing this challenge, it was a great attempt however there are some issues regarding your HTML and CSS.

    1. It is best practice to wrap your code within the main tag which would ensure that your content is wrapped within the correct landmarks e.g. <main class="container"></main>
    2. You img should have the alt attribute.
    3. The html tag at the top should look like this <html lang="en">

    Overall, great attempt and wish you the best for your future projects so keep coding 👍.

    0
    Og-successful•280
    @Error-at-nightPosted about 2 years ago

    @romila2003

    Thank you so much. I didn't notice I missed the "lang" attribute and "alt" attribute, thanks for bringing it to my notice

    1
  • David•8,000
    @DavidMorgadePosted about 2 years ago

    Hello OG, congratulations on finishing the challenge! you did a really good job as a first challenge, great work

    I just want to give you a little advice regarding the positioning of your component, you could try instead of using just margins and guessing the exact center position using flexbox, you can use flex on the parent element (the <body>) to center the elements inside it (your <div class='name'>), the only thing you have to do is give it a min-height: 100vh so the body takes the whole screen, you could use something like this:

    body {
  background-color: hsl(212, 45%, 89%);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

    Remember to remove the margins from your <div main> to get it working!

    Hope my little feedback helps you! keep going for harder challenges!

    0
    Og-successful•280
    @Error-at-nightPosted about 2 years ago

    @DavidMorgade

    I'm just learning flexbox and the other stuffs. Thank you so much for the tips, God bless you

    1
  • Lucas 👾•104,400
    @correlucasPosted about 2 years ago

    👾Hello O-successful, congratulations for your new solution!

    I can tell that you're a successful dev from your username, but anyway I'll give you some tips:

    1.Use relative units as rem or em instead of px to improve your performance resizing fonts between different screens and devices.

    2.Use variables to manage the font-size and colors.

    3.Use meaningful tags for the html markup, for example, replacing the <div> with <main>

    Here's a complete guide for HTML semantic TAGS: https://www.w3schools.com/TAgs/default.asp

    👾My rating for this solution: ⭐⭐⭐⭐⭐

    ✌️ I hope this helps you and happy coding!

    0
    Og-successful•280
    @Error-at-nightPosted about 2 years ago

    @correlucas

    Of course, I'm gonna be a successful dev. Thanks so much for the tips, God bless you

    0
    Lucas 👾•104,400
    @correlucasPosted about 2 years ago

    @Error-at-night you're something I noticed is that you created the html structure really clean code and this a really really good start, trust me. 👏👏👏

    0
    Og-successful•280
    @Error-at-nightPosted about 2 years ago

    @correlucas

    One more thing, What do you mean by "use variables to manage font-size and colors?"

    Can you please explain that?

    1
    romila•3,570
    @romila2003Posted about 2 years ago

    @Error-at-night In css, you can use root which allows you to put variables in it so that you can use them throughout your code. It has great benefits such as being able to change a color of a variable which will then affect the rest of the code. It will look something like this:

    :root { 
  --lightish-blue: hsl(191, 100%, 50%):
}

    After a variable has been formed, you can use it throughout the code like this:

    .container {
   background-color: var(--lightish-blue):
}

    Hope this helps about using variables for fonts and colours.

    0
    Lucas 👾•104,400
    @correlucasPosted about 2 years ago

    @Error-at-night Declaring a custom property is done using a custom property name that begins with a double hyphen (--), and a property value that can be any valid CSS value. Like any other property, this is written inside a ruleset, like so:

    element {
  --main-bg-color: brown;
}
    0
    Og-successful•280
    @Error-at-nightPosted about 2 years ago

    @romila2003

    If i get you right after I write the root

    :root{ - - lightish-blue: hsl(191, 100%, 50); }

    All I need to do is specify the "var(- - lightish-blue);" on the element I want to style?

    1
    Og-successful•280
    @Error-at-nightPosted about 2 years ago

    @correlucas

    Sorry If i'm bothering you, but I don't get the explaination

    0
    Lucas 👾•104,400
    @correlucasPosted about 2 years ago

    @Error-at-night Hey Og, here's a quick tutorial explaining variables https://youtu.be/3X28IUF4HAQ badicaoyou add the to root as --variable-white: white and then when you need to set it to the css instead of writing the code for the color you can put background-colors: var(--variable-white) ;

    0
    romila•3,570
    @romila2003Posted about 2 years ago

    @Error-at-night Yeah, exactly however the color I gave was just an example and if you include this concept in your work, then you should use the color mentioned in the style guide instead. If you want to find out more about this, you should research about this, particularly in MDN docs. I'll add the link below: MDN root css

    Hope this helps.

    0
    Og-successful•280
    @Error-at-nightPosted about 2 years ago

    @correlucas

    Thanks, I really appreciate. I will check it out

    0
    Og-successful•280
    @Error-at-nightPosted about 2 years ago

    @romila2003

    Thanks, I really appreciate. I will check it out

    1
    Og-successful•280
    @Error-at-nightPosted about 2 years ago

    @correlucas Thanks so much for the encouragement, reviews like this keeps me pushing. Believe, sometimes I feel like giving up, thanks man.

    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