responsive article preview section

Community feedback

• 

  P

  Katrien Schuermans•1,400

  @katrien-sPosted about 1 month ago

  Your solution is like looking at a squeezed version of the exercise. There's a few things that I immediately to be odd.

  • Don't set a width on body. Your body-element is that entire visible in your browser. That always needs to be a full 100%, which it is by default. And which you don't change. In this exercise you did it obviously to have the component have the right width. But, that component is in your main-element. Guess what is ok to do with the main-element... If you want to change the width do it here.
  • use width on your img instead of max-inline-size, and add an object-fit to have your img fit nicely. Read the article on MDN:

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  

  Did you have the Figma-file to work with? As your typography for your h4 element seems a bit off. Besides, having an h5 on the author-name isn't really correct. You could write this as a p, but add a bold-class to it.

  This is a tough exercise. I didn't read through your javascript because it actually looks really complicated while this is a beginners-exercise. So I'm wondering why your JS-solution looks this complicated. Why are you not using the camelCase naming convention?

  If you pay a bit more attention to the design I think you're well on your way to be a good developer. Keep on coding and more importantly, enjoy it :D.

  Marked as helpful

  0