@JEWebDev
Posted
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
pictureelement in aheadertag. -
You can use the
articletag to wrap your card. this way you can have multiple of them inside themain
If you want to see the above tips in action you can look my solution of this challenge.
Happy Coding!
Marked as helpful
@jguleserian
Posted
@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
