Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

qr-code-component

mirkodevs 20

@mirkodevs

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Saleiux 250

@Saleiux

Posted

Hi! good job with your project! Some suggestions:

  • It could be useful to start to use an external file for CSS, maybe it doesn't make sense for little project like this one but you will understand that for bigger projects will be better to have an external file
  • Your <p> text color is different from the one in the example, you can check in the style-guide the right color! Keep it!

Marked as helpful

2

mirkodevs 20

@mirkodevs

Posted

@Saleiux thanks for the feedback :)

1

@Ezekiel225

Posted

Hello there 👋 @mirkodevs.

Good job on completing the challenge !

Your project looks really good!

I have suggestions about your code that might interest you.

Consider adding a min-height of 100vh to the body element so as to centralize your project. Consider changing the background-color of the body element to hsl(212, 45%, 89%).

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

I hope it helps!

Other than that, great job!

Happy coding.

0

@devid8642

Posted

First of all, congratulations on the solution, but I have some points to consider:

Use an <h1> instead of an <h2>. For reasons of semantics and SEO, it is interesting that you first have an <h1> and then an <h2>, even if the style of the <h1> doesn't make sense because you can change the style in CSS;

I believe it would be interesting to adjust the background color of the page to a lighter blue. In the style-guide.md file you have some useful color references but always feel free to adjust them as necessary;

Again congratulations on the solution.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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