single-price-grid

Community feedback

• 

  xNyfPtx•1,260

  @xNyfPtx

  Posted 8 months ago

  Hi @EllyMarc, your code and solution looks good but it has some few problems. Don't worry as these issues are really quick and easy to fix. Don't be demotivated by this since most people have done the same issues you did (including me!)

  My Tips and Feedback

  1. Consider self hosting your fonts instead of importing it from Google Fonts. Using Google Fonts is slower and it also violates GDPR laws which is bad for privacy. This isn't really an issue for sites like this but lawsuits could happen on larger, bigger enterprise websites. I use this handy tool to help me self host my own fonts.

  2. Use a CSS reset. What it does is that it basically makes your CSS more consistent across browsers. You don't have to do anything since you just have to copy and paste it inside your CSS and you are done. I reccomend using Josh Comeau's or Andy Bell's CSS reset as that is what most people use. If you ask me what CSS reset do I use, I prefer using Josh's one.

  3. Never ever set typography-related properties in px. Line-height, font-size, letter-spacing and the like. See why

  4. No need to set useless CSS properties Using width: 100% is useless since the body element is already a block level element which takes up all of the space possible.

  5. Use the rem unit in place of px. You would typically use the px unit for smaller stuff such as borders, outlines, shadows and the like. Use the rem unit for the rest. Using px doesn't scale with the user's set font-size inside the browser's setting nor zooming in.

  6. Never ever set fixed-widths! Using width: 620px on the main element makes it not responsive. Widths don't shrink nor grow unless you use a fluid units like vw, vh or %. What you need is max-width: 38.75rem paired with width: 100% as it is centered by flex in the body and will only take up the space it needs in this case. 1 rem = 16px btw. You should use the fr unit on grid also instead of px units.

  7. Don't overuse nesting in CSS! It makes your code harder to read and it also increases the specificity which makes the styles harder to override. You can mitigate this by using a naming convention such as BEM. The only thing with BEM is that you will need to apply a class to every element which is often verbose. You would only use nesting for media queries and pseudo-classes & pseudo-elements such as :hover, :focus, ::after and etc. You can learn more about nesting here. It's about Sass but it still applies to native CSS.

  8. Colocate media queries in the selector itself. For example:

     instead of this
     
     .element {
      background: red;
     }
     
     @media (min-width: 400px) {
      .element {
      background: blue
       }
     }
     
     do this
     
     
     .element {
      background:red
     
      @media  (min-width: 400px) {
          background: blue
      }
     }
     
     

  9. Code it mobile-first instead of desktop-first. Self-explanatory. When you code your website, start on mobile first instead of desktop. So that means you will be using min-width inside your media queries. The reason why you should go mobile-first is because there are typically less styles to override on the media queries leading to less CSS. There are some exceptions for this though such as hamburger menus.

  That is all. Don't be ashamed by this since most people have done the same mistakes as you did before. Don't be overwhelmed also and treat this as like a checkbox and do them 1 by 1. Do all of the things I said and update your CSS before moving on to the next challenge. Have a nice day and have fun coding!

  01

  Marked as helpful