Stats Preview Card

Community feedback

• 

  Rachel Mozzetta•135

  @Mozzarella-chzPosted about 3 years ago

  First thing i noticed with your code is your exclusive use of ID selectors for your elements. I would suggest learning when to use ID selectors versus class selectors. With proper usage of class selectors you could skim down your code to be much easier to work with and you will be all the more efficient. For example:

  <div id="details"> <div id="companies"> <h2>10k+</h2> <p>COMPANIES</p> </div> <div id="templates"> <h2>314</h2> <p>TEMPLATES</p> </div> <div id="queries"> <h2>12M+</h2> <p>QUERIES</p> </div>

  Instead of giving each statistic an ID you could give all three of those divs a class to group them similarly. It would look like this:

  <div class="Statistics"> <div class="stat"> <h2>10k+</h2> <p>COMPANIES</p> </div> <div class="stat"> <h2>314</h2> <p>TEMPLATES</p> </div> <div class="stat"> <h2>12M+</h2> <p>QUERIES</p> </div>

  This will make your CSS markup much easier to edit and format. My next suggestion would be to learn flexbox. It is incredibly helpful with layout and moving divs around in the exact way you want em. I did alot of reading on flex which it is a little overwhelming at first, but gets easier with practice. Here is a fun little game to get aquainted https://flexboxfroggy.com/

  Good luck and good job!!! Keep coding!

  Marked as helpful

  1
• 

  maym42•370

  @maym42Posted about 3 years ago

  To make a mobile-friendly design use @media in your css file.

  Example @media

  Marked as helpful

  1
• 

  Ahmed•105

  @Kirin02Posted about 3 years ago

  i would recommend that you study more flexbox so that you avoid positionning you elements using top and right and float with specfic use of px which made ur H1 and Description collapse into each other and media queries to make your website responsive on most devices

  Marked as helpful

  0