Submitted about 2 years ago

Responsive Article Preview Component

Ankush Badgujar• 150

@badgujarankush

Preview site View code

This is a solution for...

Article preview component

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Faced some problem in overlapping the content over image and positioning the share popup div. Tried my best to replicate the design. Any feedback would be helpful to learn about efficient method for positioning of popup card.

Community feedback

Darrick Fauvel• 340

@DarrickFauvel

Posted about 2 years ago

@badgujarankush I noticed in your HTML that your element up one line, into the very bottom of the <body> element, it will become conventional and within common practice. 👍 Another conventional location would be the within the <head> element, but using the defer attribute.

Here is a good Stack Overflow post addressing this very issue. Where should I put tags in HTML markup?

I hope this is helpful. 😊

Ankush Badgujar• 150

@badgujarankush

Posted about 2 years ago

@DarrickFauvel Thank you for the feedback Darrick!

Darrick Fauvel• 340

@DarrickFauvel

Posted about 2 years ago

Hi @badgujarankush, 👋

If you would like to address the "All page content should be contained by landmarks"⚠️warning issue in the accessibility report, you can place the attribution div inside a <footer> element.

"It is best practice to contain all content excepting skip links, within distinct regions such as the header, nav, main, and footer." more info

I hope this is helpful. 😊

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord