HTML/CSS

Community feedback

• 

  Shashi Lo•1,345

  @shashiloPosted over 3 years ago

  Hey Richard. I can spot some was you can make this clean cleaner. Here's a list:

  • Usage of modern screen breakpoints. https://getbootstrap.com/docs/5.0/layout/breakpoints/
  • Do not use Id's. Usage of class names here is more ideal. This is a small widget, but when you get into larger scale projects, almost everything is shared or reused. Practicing this will help you down the road. https://css-tricks.com/the-difference-between-id-and-class/
  • Do not append div to CSS selectors. This makes it too specific and harder to override. Simple is best.
  • Using SASS/SCSS or CSS variables to set global variables on reused values like colors, font family, etc.

  Marked as helpful

  3

  ---

  

  Richard Verweij•25

  @ShatangoPosted over 3 years ago

  @shashilo Thank you for the tips! Thats exactly what i am worried about for larger projects! Thank you for taking the time with the feedback, it is appreciated! Onward to the next challenge!

  1

  

  Shashi Lo•1,345

  @shashiloPosted over 3 years ago

  @Shatango You have to start small and that's ok. As you build more, you'll get better. :)

  1
• 

  Mike Ekkel•25

  @MurkragePosted over 3 years ago

  Looks like a solid solution that matches the design! Here's a few pointers to help you next time:

  • Media queries can override styling while keeping other parts of the styles which means you only have to define things like display: flex once and change the flex-direction when you want to. Read more on the use of media queries here: https://css-tricks.com/a-complete-guide-to-css-media-queries/
  • While it's perfectly valid according to the spec to use more than one <h1> it's considered bad practice. Ideally you would only use a single <h1> and your current ones would be <h2>. Remember that semantics are separated from styling in HTML and CSS!
  • Like @shashilo mentioned: using div.cars makes your CSS more specific and that can hurt possible overrides you want to do later. Read more on CSS Specificity here: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
  • CSS Custom Properties (or variables) will allow you to easily set a color for each column. I do think, however, that it might be a little too much for a simple beginner project so perhaps that could be a nice improvement in the future :)

  Marked as helpful

  2