Submitted over 2 years ago

Mobile first approach and flexbox.

Katrien S• 1,070

@graficdoctor

Preview site View code

This is a solution for...

Article preview component

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I've been struggling a lot with implementing the position-elements, eventhough I think I understand the principle. The positioning doesn't seem to be ok on Safari and Chrome, but works on Firefox. Are there any good online lessons going into detail on this subject?

Changing colour in SVG's seems not to be that straightforward either. How would I need to approach that?

I'd love to be able to animate the pop-up, but I don't know how to implement it in this excercise. And how do I make the pop-up show up on top of the component, in desktop-view.

Community feedback

Anosha Ahmed• 9,340

@anoshaahmed

Posted over 2 years ago

To get rid of the accessibility/HTML issues shown in your Report:

wrap everything in your body in <main> OR use semantic tags OR give role="" to the direct children of your <body> ... Click here to read more
have at least one <h1> in your code
<button> should have an aria-label ... Click here to read more

Good job! :)

Marked as helpful

Katrien S• 1,070

@graficdoctor

Posted over 2 years ago

@anoshaahmed Yeah, accessibility, I am aware of having to implement it, but somehow don't yet focus on it. Thank you for pointing it out. I will adapt this solution. And take it with me for the next ones.

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