Blog Preview Card - My Solution

Community feedback

• 

  P

  Juan•480

  @JEWebDevPosted 4 months ago

  Hello Jeff!

  Very well done, your HTML is semantic and structured i liked that a lot.

  I see that you opted to use margins on every element to give them spacing. This works and looks great but in the long run and on bigger projects it may be difficult to make changes afterwards. For example let's say you want to change the spacing between the card's content. You'll have to change the margins one by one. To help with this you can use flexbox like this:

  #content{
      display:flex;
      flex-direction: column;
      gap: 0.75rem;
  }
  

  This will give the content child elements a spacing of 0.75rem or 12px.

  Now this will give all of them this spacing and some have more between them. In that case you can wrap them in a div with a class of wrapper or container this are common naming examples, you can use what you like.

  This way when you would like to change the spacing between them you only change it in the parent elements instead of each element one by one.

  This is only a suggestion and one way of achieving it. Give it a try an see if you like it.

  • You can also wrap your picture element in a header tag.

  • You can use the article tag to wrap your card. this way you can have multiple of them inside the main

  If you want to see the above tips in action you can look my solution of this challenge.

  Happy Coding!

  Marked as helpful

  0

  ---

  

  P

  Jeff Guleserian•480

  @jguleserianPosted 4 months ago

  @JEWebDev Juan,

  Hey, thanks so much for the insights and for taking a look at my solution.

  Normally I would use flex and gap, like you said, but I wasn't expecting all the spacing to be even. But your comment will make me take a closer look. You're right! I can see how that is much easier to edit in the long run.

  Concerning the use of header, article, etc., again, this is my normal practice (in fact, I almost used <article> for my content area and you'll note that <footer> was used for my lower container) when I am coding something larger, such as a whole page. This was such a small component that I chose not to use them. This was based, of course, on my taking a guess and limited experience. But your point is well taken. I guess I never considered it for a component of this size. I'm starting my next project. I'm going to try an incorporate your suggestions there.

  Thank you sincerely for taking the time and attention to supply such helpful comments.

  Cheers!

  Jeff

  0