Preview Card for a Blog!

Community feedback

• 

  P

  Koda👹•3,830

  @kodan96Posted 5 months ago

  hi there! 👋

  A couple of tips:

  HTML:

  • all of your content within the body should be contained by landmarks. these landmarks are the header, main and footer HMTL elements. for a project like this use at least a <main> tag

  • all HTML documents need an h1 tag (one and only one) and you shouldn't jump levels. so h1 should be followed by h2, that can be followed by 1 or more h3 elements, and when you start your next section you can go back to h2. you can think of it like h1 is the title of the page, h2-s are the title of the sections, h3-s are subtitles for the h2 elemetns etc.

  CSS:

  • don't use the 62.5% font-size hack, it will cause accessibility issues on your page

  • don't apply width or height to your elements explicitly, it kills responsiveness. containers will adapt to their content by default. if you want to define a range of width use width and max-widht:

  .element {
    width: 90%;
    max-wdith: 55rem; 
  }
  

  here .element will take up 90% of the container's width, but won't expand over 55rem

  • declaring max-width: 100vw; on the body is not necessary, it will take up the entire width of the viewport by default.

  • centering your content with margin is not the best idea, you can apply these to the body tag to achieve the centering:

  body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  

  if you have multiple elements you should also include flex-direction: column;

  Hope this was helpful 🙏

  Good luck and happy coding! 🙌

  Marked as helpful

  1

  ---

  

  BegShoo•80

  @BegShooPosted 5 months ago

  @kodan96 Thank you so much! Will go back and look at implementing this!

  With the font size hack, you still use rem but just calculate it from the normal font size?

  1

  

  P

  Koda👹•3,830

  @kodan96Posted 5 months ago

  @BegShoo

  yes, you should definitely use rem or em for font sizes, you did a good job on that part

  1