Blog-preview-card

Community feedback

• 

  Domagoj Babic•250

  @DomCroatia

  Posted 4 months ago

  Hey, congratulations on finished challenge!

  First thing I'd like to mention is semantic HTML. Having a lot of divs as a containers for content is ok, but they don't have any meaning whatsoever. For example, instead of using div with class='container', you could use <main> element and <article> instead of div.main. It makes your content more meaningful for screen-readers and other assisted technologies. Some other semantic elements besides main are: article, section, aside. footer, header, nav (I'm probably missing some). For smaller projects like this we don't use a lot of them but using them is good habit to develop.

  Regarding responsiveness, you don't have to give your elements strict width or height value. You can use min/max width/height (ex., min-height:100vh; on body element so it always takes full height, but expands more if content requires it or max-width on div with class of .card helps with content in your card stretching too far on big screens, and helps make card smaller on smaller screen because content in it dictates it's size).

  Also I noticed your button has width on it aswell. If you reduce viewport bit-by-bit you can see that at some point yellow background on it is not covering full button. The reason is because it is "reduced" to 25% of width. Better way to do this, in my opinion, is to add align-items: start; on parent element and remove width property from button, you can see now that background covers full width of it.

  Lastly, you put your img element into div, (and I think that is good for styling purposes), but you didn't give that div width: 100%; to make it responsive.

  11