Article Preview Component. Mobile-first.

@grace-snow & @renszo

Thank you Grace for this valuable comment above.

I have had such a nice discussion with Renszo a few days ago about the header. I think that's a reason why he has used it here in the tag article. During our conversation I have mentioned that point:

The header is not sectioning content and therefore does not introduce a new section in the outline. Using header a few times doesn’t affect the web outline algorithm. The header is a flow content category - this element must not be a descendant of an address, footer or another header element. Check it out: => link;

“HTML Header Element (header) defines a page area that typically contains a logo, title, and navigation. The header can also be used inside other semantic elements such as article or section. A section header might contain the section's heading, author name, etc. article, section, aside, and nav can have their own header. Despite its name, the header is not necessarily positioned at the beginning of a page or section”. => link.

I was writing this comment in general meaning - of course, every project is different, contains different elements and I agree with you Grace that header doesn't have to be used if contains only the img. Every challenge is different. Lots of things are going on => it is not very easy to implement semantic tags but it is very easy to overuse them.

I am curious what do you think about this example: article, inside of it header (contains img, h1, p) then footer (img, h2, p) ? I think it good be a good solution, maybe even without a footer.

Another important point: not many people like you are giving such valuable comments. I know it takes time to make it and I appreciated it. A proper code review is very important for us because we are at the beginning of our web education => honestly, we do not have many examples on the internet about proper HTML structure in use.

Thanks :D

This looks really nice!

I'd suggest having a max-width on the card so you can lose the magic numbers like 731px / 33rem. As soon as I see stuff like that, it signals there is a problem... As long as you gave main a little padding or the card some side margin it wouldn't hit the sides of the screen once you lose the explicit widths

To fix the img distortion, you could set height 100% object fit cover instead I think.

I think the HTML markup definitely needs to change. This would be fine as an article but shouldn't then include a header with an image in it, or a section element within it. That's a case of over-using semantic tags that would actually result in a poorer experience for assistive tech users (something I discovered quite recently!)

I'm pretty sure you don't need to repeat the share button. You could probably use z-index effectively to keep the one button...? Just an idea there, might be tricky or involve too much markup restructuring.

General best practice tips for your repo structure:

• don't forget to add a gitignore
• vendor means third-party scripts. It should be where you'd place things like bootstrap js or css...
• similarly, you don't need an src folder unless you're doing some build tooling where it outputs to a different directory. It's not an issue - and you're using Parcel brilliantly here - it's just that it's much more usual for src to only be used for development code (the stuff you work on) with a separate public or dist folder for production code (e.g. minified assets, your outputted compiled files)

I hope all that's helpful. This is a nice solution overall, just needs some small tweaks

@RenszCamacho

How do you feel with all this information?

Hopefully, it is not confusing you much. Don't worry about it - practice makes us better. Let me ask you, are you working as a web dev?

Greetings :D