Community feedback

• 

  Adarsh•120

  @Adarshpathak1Posted 8 months ago

  Good Part

  • Clean code
  • used semantic HTML
  • Almost Similar Design

  Need Improvement

  • Delete Readme.md
  • Change README-template.md file to Readme.md and edit according to instructions

  and Yeah everything Good ,Keep doing, Keep going !

  Marked as helpful

  0
• 

  T

  Grace•31,270

  @grace-snowPosted about 2 months ago

  Hi, well done on completing the first challenge.

  There are some common mistakes in this that I recommend you refactor before moving on. Good luck

  • make sure the image alt is detailed. This alt should say what the image is (QR code) and where it goes (to FrontendMentor.io).
  • when you do single component challenges like this, consider where/how it would be used on a real website. As this is just a card component you know it would never be used to serve the main heading on a page. So you know it shouldn't have a h1. Use a lower importance heading level like h2 instead.
  • in css get into the habit of including a full modern css reset at the start of the styles in every project. Andy Bell or Josh Comeau both have good ones you can look up and use. This will include lots of useful base styles, but in particular for this challenge it will size the image for you by setting it to display block and max-width 100 %.
  • never limit the height of elements that contain text, including the body. Because this currently has a limited height of 100vh some of the card contents are getting cut off at the top on some screen sizes (like mobile landscape) because the browser is trying to fit the card in to a space that's too small for it. To fix this, simply use min-height: 100svh on the body instead and remove the height.
  • the card shouldn't have an explicit width either. Just give it a max-width so it can grow up to that limit but also shrink narrow when it needs to.
  • ⚠️ Beware using em units for font size. That's very dangerous because em units compound. So a parents font size would affect the childs which would affect the next child's etc. Font size should always be in rem.
  • think every carefully before using em anywhere else too. You should only use em for a property where you specifically want its value to relate to the elements font size at all times. An example might be padding on buttons, so simply changing font size would change to small, medium or large click targets. On this card padding I don't think you want to use any relative unit at all. I recommend pixels for the card padding, especially on the sides, because then when an end user changes their default text size it wouldn't make the padding larger and the content narrower on small screens. Or even better but a more advanced technique would be to use a css function on the card padding, like clamp() which sets a minimum, maximum and ideal in the middle. So you could have something like `padding: clamp(15px, 1rem, 8vw).

  0
• 

  Adalbert Pungu•170

  @AdalbertPunguPosted 8 months ago

  It's good to see you've adopted good practices like using css variables.

  0