Stats-preview-card-component HTML, CSS

Community feedback

• 

  P

  Katrien Schuermans•1,210

  @katrien-sPosted about 3 years ago

  Just a quick reminder that the first page of a website is called index.html. Yours is intex.html.

  • The fonts don't load. Your @ import url is wrong. Did you copy the url in the browser or did you select the fonts you needed? Google Fonts always suggest which links to use to import fonts. If you don't know how to, have a look here

  • By adding a width to your body-element, your page will always be 1440px, no matter how big the browserwindow is. The body actually should fill the entire browserwindow, so if you want to set widths or heights, they're usually always 100vw or 100vh. In your example, you should remove the width and set a max-width instead of width on .box. Also remove height. There is no reason to set a height. Same goes for the media-query.

  • This is odd.

  .information * {
    margin: 0;
    padding: 0;
  }
  

  It's totally ok to reset your css, but do it the proper way. At top of your css-file by only using *.

  * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  

  • If you know how to use flex-box, use flex-box to split the component in two, rather than using float and fixed sizes for your .box, .main, .image. Also here, no need to set a height. It just fills itself. While you're at it, also use flexbox to center your .box instead of using transform.

  • Try to bundle similar code. Instead of

  h1 {
    color: hsl(0, 0%, 100%);
    font-family: 'Inter', sans-serif;
  }
  h2 {
    color: hsla(0, 0%, 100%, 0.993);
    font-family: 'Inter', sans-serif;
  }
  

  do

  h1, h2 {
    font-family: 'Inter', sans-serif;
  }
  

  • The code is missing a </div> at the end.

  It will break your code, but I think it would be a good excercise to rethink your approach. Use less fixed widths and heights. It's even recommended to not use heights unless it's really necessary, since it will create overflows. Since I see some flexbox in your writing, it would be better to use flexbox more widely rather than float and fixed widths. It makes it easier for the website to be responsive. It's also always better practice to start developing mobile first. It will save you quite some coding at some time, since it's inside html-language to be responsive. It is us, by writing css, that break the site from being responsive.

  Marked as helpful

  0
• 

  Asif•75

  @Asif-lopzPosted about 3 years ago

  Thank your advice, and do better in the future and I have a question do I need to use a header element without the need for heading and navbar?

  1