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

Simple QR code page

@Solo-Incrementing

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


  • Are there any parts to my code which are not best practice that I should avoid doing?
  • Is there anything I should do to improve my workflow?

Community feedback

@YounusUID

Posted

I suggest following improvement in your CSS code. I just write CSS that should be remove or edit.

.card {   
    width: 300px // set width 300px, after adding 15px left/right padding, the actual size will 
                                300 + 15 + 15 = 330  
    height: 500px; // remove this line
    border: none;  // remove this line
    padding: 15px; add this line for add padding to entire box
}
.qr-code {
    width: 100%; // set width to 100%
    margin: 16px auto 0 auto; // remove this line
}
.title {
    width: 250px; // remove this line
    margin: 0 0 20px 0; // add margin bottom
    text-align: center;  // remove alignment from here and add to the parent div
}
.description {
    width: 250px;  // remove this line
    height: 100px;  // remove this line
    margin: 0; // set margin 0
    text-align: center;   // remove alignment from here and add to the parent div
}

Wrap title and description into a div and add padding to set spacing around the div. i.e.

.xyz {
    text-align: center;
    padding: 20px;
}
0
Alexandra 510

@Alexandra2888

Posted

Hi! Congrats for finishing challenge. Your solution is very close to the design! Here are some things I think you can improve:

  • reset default CSS with *, *::after, *::before {margin:0; padding:0; box-sizing:border-box};
  • convert px to relative units (em/rem). Coding in px is usually for magazines/newspapers when you need fix units,
  • make variables in :root{} ex for colors here,
  • implement BEM naming convention eg .card__qr-code {}. I t will help you in bigger projects and wh you will use SCSS. Happy coding!
0

@Solo-Incrementing

Posted

@Alexandra2888 Can you elaborate on those points? I don't understand what most of those things are, I started to learn html css just a few days ago. Thank you for the feedback though!

0
Alexandra 510

@Alexandra2888

Posted

@Kriyes-M hi, Here are some useful links: https://dev.to/janvierjr/css-best-practices-g41

https://www.freecodecamp.org/news/learn-css-units-em-rem-vh-vw-with-code-examples/

https://www.freecodecamp.org/news/what-are-css-variables-and-how-to-use-them/

https://chettriyuvraj.hashnode.dev/bem-naming-convention-in-css

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