Submitted about 2 years ago

QR Code using HTML and CSS

Og-successful• 250

@Error-at-night

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

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

@romila2003

Posted 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.

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>
You img should have the alt attribute.
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 👍.

Og-successful• 250

@Error-at-night

Posted 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

David• 8,000

@DavidMorgade

Posted 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!

Og-successful• 250

@Error-at-night

Posted about 2 years ago

@DavidMorgade

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

Lucas 👾• 104,420

@correlucas

Posted 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!

Og-successful• 250

@Error-at-night

Posted about 2 years ago

@correlucas

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

Lucas 👾• 104,420

@correlucas

Posted 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. 👏👏👏

Og-successful• 250

@Error-at-night

Posted 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?

romila• 3,570

@romila2003

Posted 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.

Lucas 👾• 104,420

@correlucas

Posted 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;
}

Og-successful• 250

@Error-at-night

Posted 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?

Og-successful• 250

@Error-at-night

Posted about 2 years ago

@correlucas

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

Lucas 👾• 104,420

@correlucas

Posted 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) ;

romila• 3,570

@romila2003

Posted 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.

Og-successful• 250

@Error-at-night

Posted about 2 years ago

@correlucas

Thanks, I really appreciate. I will check it out

Og-successful• 250

@Error-at-night

Posted about 2 years ago

@romila2003

Thanks, I really appreciate. I will check it out

Og-successful• 250

@Error-at-night

Posted 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.

Please log in to post a comment

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