Preview Card for a Blog!

Community feedback

• 

  Koda👹•3,830

  @kodan96

  Posted about 1 year 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! 🙌

  12

  Marked as helpful