QR-code

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Kirito-san-88, Congratulations on completing this challenge!

  Great start and great first solution! You’ve done really good work here putting everything together, I’ve some suggestions you can consider applying to your code:

  You've done the design for the wrong image, when you download the starter files the folder comes with 3 files (preview card, desktop and mobile) you've created the solution based on the preview and you should consider only the mobile + desktop images.

  Remove the background-color from the container and add it to the body to make sure this color background will display it full screen.

  Think about using relative units as rem or em instead of px to improve your performance by resizing fonts between different screens and devices.Anyhow, if we want a more accessible website, then we should use rem instead of px. REM does not just apply to font size, but to all sizes as well.

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0
• 

  Ezequiel•150

  @rrettaPosted about 2 years ago

  nice work Kirito-san-88 ;) if you keep on doing challenges check that there is a file in the root named "style-guide.md" with the right colors requested by the challenge.

  in this case:

  Colors

  • White: hsl(0, 0%, 100%)
  • Light gray: hsl(212, 45%, 89%)
  • Grayish blue: hsl(220, 15%, 55%)
  • Dark blue: hsl(218, 44%, 22%)

  these colors you can add them at the beginning of the styles.css in the following way:

  :root{ --graydish-blue-color: hsl(220, 15%, 55%); }

  after this to use them you add them to the class you need in the following way, for example like a background color:

  .class{ background-color: var(--graydish-blue-color) }

  that way whenever you need a color you have it stored and you can call it for whatever you need and you won't have to write it again.

  have nice day!

  Marked as helpful

  0

  ---

  

  Kirito-san-88•20

  @Kirito-san-88Posted about 2 years ago

  @fktpolice thanks i'll try it next time

  1
• 

  Travolgi 🍕•31,400

  @denieldenPosted about 2 years ago

  Hi Kirito, congratulations on completing the challenge, great job! 😁

  Some little tips for optimizing your code:

  • use article tag instead of section tag to the container card for improve the Accessibility
  • remove all margin from section tag
  • use flexbox to the body to center the card. Read here -> best flex guide
  • after, add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container
  • instead of using px use relative units of measurement like rem -> read here

  Hope this help! Happy coding 😉

  0