Blog-preview card

Community feedback

• 

  KapteynUniverse•1,730

  @KapteynUniversePosted 1 day ago

  Hey Cesare,

  To center items you can use flex or grid.

  body {
  display: flex;
  flex-direction: column; /* since you have footer on the body, you need to change direction too */
  justify-content: center; /* horizontally*/
  align-items: center; /* vertically */
  min-height: 100vh; /* Need this for vertical alignment */
  }
  

  body {
  display: grid;
  place-items: center; /* or place-content: center; */
  min-height: 100vh;
  }
  

  Font family and colors are provided in the style-guide.md

  It's important to make sure that your website is accessible to all users, including those using assistive technologies such as screen readers.

  Landmarks, (or this page) are essencial for accesibility. Every page needs one main. Wrapping your container div or changing the div with a main would be good. Since this would be a single element around others and not the whole content of a real page, wrapping might be better.

  Image alt texts needs to be meaningful, unless decorative. I think img here is decorative, so you can leave empty the alt text.

  Span is mostly to style differently a part of the text as far as i know. It is ok to use p tag for short texts.

  A div element is used for block-level organization and styling of page elements, whereas a span element is used for inline organization and styling. Is it really matter tho? I don't know. Only difference i know is span has no default css setting while div has display: block;

  But i think you can change box span with a div and even wrap h2 and p with a hgroup i guess.

  For better responsiveness; use rem and max-min values. max-width: 25rem; for the width: 400px; in your container div for example.

  Also you missed the active state of the h2. On the design h2 has a yellow text for the hover effect. You can do it with hover pseudo class.

  Since it has a active state, it probably means it is a hyperlink to navigate user to that articles page so it might be better to use anchor tag aswell. Like <h2><a href="#">HTML & CSS foundations</a></h2>

  1