CSS and HTML

Community feedback

• 

  Bradley Smith•230

  @bradleyhopPosted over 2 years ago

  You're project matches the desktop design very well. Good job!

  I took a look at your code, and it looks like you only use on class per element, which leads to redundancy in your CSS. That, in turn, can make it harder to maintain your code as the projects become more complex. Let's take your cards, for example. In your html, you could do something like:

  <div class="card suvs">
    <p>Example content.</p>
  </div>
  <div class="card sedans">
    <p>More example content.</p>
  </div>
  

  And then in your CSS:

  .card {
    height: 410px;
    width: 210px;
    padding: 45px;
  }
  .suvs {
    background-color: hsl(184, 100%, 22%);
  }
  .sedans {
    background-color: hsl(31, 77%, 52%);
  }
  /* etc */
  

  This way, you can set a base size for your card with one class and have another class that will specify specific attributes to that card. All the styling from multiple classes will be applied to element its assigned to.

  As far as making the site device-responsive, look into media queries and maybe start with CSS Flexbox to help you flow the cards into a column or row. A hot tip I picked up the other day: build the site with the styles being for mobile as the default, and then make changes as needed in your media queries (this is mobile first development and can really help you build your project).

  I've been learning lots from Kevin Powell's youtube channel for great tutorials and tips on CSS and other aspects of frontend web development: https://www.youtube.com/kepowob

  Happy coding!

  Marked as helpful

  1
• 

  Shashree Samuel•9,260

  @shashreesamuelPosted over 2 years ago

  Hey good job completing this challenge

  Keep up the good work

  Your solution looks great however I think that the button needs less padding on the top and bottom using the respective properties.

  In terms of accessibility issues simply wrap all your content between main tags

  I hope this helps

  Cheers

  Happy coding 👍

  1
• 

  Kamasah-Dickson•5,590

  @Kamasah-DicksonPosted over 2 years ago

  So learn about CSS responsive design which you will learn somethings like CSS flexbox CSS Grid And Media Queries

  Happy coding 👍

  1