QR CODE

Community feedback

• 

  Wisdom•180

  @UnifiesPosted 25 days ago

  Hi there, nice work!

  A few pointers though concerning your code:- Consider removing all the imported comments by Frontend Mentor that still exists in your code

  In order to match the preview as best as possible, give a border-radius to the OR Code image itself [not just the border enclosing the image]. Reduce the font-size for the texts in your code, the current result looks huge compared to what was given. Personally, I used font-size: 20px; for the title, and font-size: 14px; for the paragraph, but it is recommended to use responsive fonts instead [em, rem] and declare them as variables that can be reused. [See below]

  It should have given you a warning after you submitted, but ensure that all content on a page is contained within a landmark region - It is best practice to contain all content excepting skip links, within distinct regions such as the header, nav, main, and footer. So you should enclose all your code within the body tag in a <main></main> tag.

  The Readme.md file you pushed to Github is the same one from Frontend Mentor that only tells us how to approach our solution to the challenge, checkout the Readme-template.md file, update it with the correct information and rename to 'readme.md' after deleting the former one

  Here are some code optimization tips I got from a kind fellow on here:

  Avoid using hard coded values, like width: 275px; use max-width: 275px; instead, max-width: 20rem; would be even better. Em/rem units are better for responsiveness. I recommend you to check Kevin Powell's this video for better understanding.

  For the challenges on here, it is probably not needed but using colors, font-weights, sizes etc. as variables would be a good practice. Like:

  :root {
    /* Primary */
    --dark-cyan: hsl(158, 36%, 37%);
    --cream: hsl(30, 38%, 92%);
    /* Neutral */
    --very-dark-blue: hsl(212, 21%, 14%);
    --grayish-blue: hsl(228, 12%, 48%);
    --white: hsl(0, 0%, 100%);
    --fs-p: .875rem;
    --fw-500: 500;
    --fw-montserrat-700: 700;
  }
  

  and then you can use them for styling like background-color: var(--cream);. These things may change in a real project, so when it does all you have to do is change them from the root instead of searching in the whole css file/s. --cream is a custom name btw, you can name it anything you want. But for readability giving it a meaningful name would be better.

  Using a modern css reset for the future challenges will help you.

  0