my first challenge using grid and responcive layout

Community feedback

• 

  geomydas•1,440

  @geomydasPosted about 2 months ago

  Hi @MER-PEX, your solution and code looks good but it has some few issues. Don't worry as these issues are common for beginners and is very easy to fix. This is perfectly normal and every beginner will go through to this phase

  My Tips and Feedback

  1. Write better semantic HTML. Your HTML needs a main landmark, replace the .container div with a main tag. Every website should have atleast one main landmark. The part that says "Report for Jeremy Robson" should be a h1 with a span. Don't use the paragraph tag for the first 2 words of it, use a span tag instead nested inside the h1. Use a list of buttons instead of a paragraph in the part where you are toggling "Daily", "Weekly", and "Monthly". Replace those h4s with an h2 instead. Replace the h2s that contain the time with a paragraph tag instead. Replace the span with the 3 dots with an image inside a button instead. The images are already provided either in the assets or images folder.

  2. Consider self-hosting your fonts from Google Fonts. Using Google Fonts is much more heavier, slower and violates GDPR laws which may get you sued in larger websites as it violates privacy laws inside Europe. Self-hosting your fonts is a much better option. You can use the @font-face rule in CSS for this combined with a .ttf file of that specific font. I use this handy website for helping me self host my fonts.

  3. Use a code formatter. It's free and easy way to make your code much more beautiful and readable. I reccomend using Prettier for this if you are already using VSCode as your editor. It automaticallly indents your code and formats it.

  4. Use a consistent naming convention for the variable names. Don't make them that some of the words are capitalized and some words are not. Here is how I typically name my color variables but it depends per person. :root { --color-whatever: insertColorHere; --color-whatever: insetColorHere; ... }

  5. Consider using a naming convetion like BEM to write your classes inside the HTML. What I reccomend for this is BEM, it makes it easier to write class names inside your HTML and makes your CSS infinitely more readable aswell. Be aware that it is not for everyone but I highly reccomend you to try it as it is one of the established naming conventions inside the industry already. The only caveat is long class names.

  6. Use a CSS reset. What a CSS reset does is that it makes your CSS more consistent across browsers as it removes the default styling applied by them. You just copy and paste it inside your code and you are already done. Most people either use Josh Comeau's or Andy Bell's CSS reset. If you ask me, I use the first reset.

  7. Nest your media queries. It's a simple thing but makes it more easier to manage your media queries, you don't have to write all of your CSS in one large media query, that is just too messy. You would use it like this:

     .classname {
     background-color: red;
     
     @media (min-width: 40rem) {
      background-color: blue;
      }
     }
     
      instead of
     
      .classname {
      background-color: red;
      }
      @media (min-width: 40rem) {
      .classname {
       background-color: blue;
      }
      }
     
     

  8. Use the rem unit in place of px most of the time. You would typically use the px unit for very small stuff like shadows, outlines, borders and filters and rem for the rest. To be specific, you would use rem if you want it to scale with the user's set font size inside the browser's setting and zoom which is the case most of the time.

  9. Never ever set font-size, typography related properties and media queries in px! See why

  10. Keep CSS specificity as low as possible and don't use descendant and pseudo-selectors unless you really need to! An example of using a descandant selector is this: div > h2 or div > p. This increase the specificity and makes your styles harder to override later on. The selectors also have less meaning and clarity this way. Using a naming convention like BEM solves this type of problem.

  11. Set fallback fonts!. Instead of font-family: Rubik, use font-family: Rubik, sans-serif instead. This so that when the user is not able to load the Rubik font, it will display a fallback font instead which is sans-serif here. You shouldn't worry about that much about fallback fonts as its always sans-serif most of the time.

  12. Stop declaring useless properties inside your CSS! Setting margin: 0 in .name > p is useless since you already set margin: 0 inside the global selector which targets all of the elements

  13. Learn CSS grid! This project doesn't even use CSS correctly and properly.

  That's pretty much all. Have fun coding and have a nice day!

  Marked as helpful

  0