Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Article preview component with flexbox and JS

Nikola 190

@porumbachanov

Desktop design screenshot for the Article preview component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

Feel like there is a more efficient way to do the JavaScript and CSS, I think there was no reason for the extra IDs, could have just used "getElementsByClassName".

What challenges did you encounter, and how did you overcome them?

How to deal with the changing screen size, turns out all I had to do is add a "resize" event listener for the window ¯_(ツ)_/¯

What specific areas of your project would you like help with?

Any remarks are welcome!

Community feedback

Alex 3,130

@Alex-Archer-I

Posted

Hey, another challenge, congrats!

I prefer querySelector, seems to me a bit more flexible =)

Genuine question: is there some advantages to use js resize vs media queries or you just wanted to practice it?

Marked as helpful

1

Nikola 190

@porumbachanov

Posted

@Alex-Archer-I In all honesty, it didn't even occur to me to just add a few more classes and use media queries xDD. I wrote the html and css first so when I was writing the js and it came to the resizing problem, I just googled how to do it the js way. Doing it with media queries seems more efficient as it spares an event listener and the js would be cleaner. I knew something was off but don't know what stopped my brain from working xD, thanks for pointing it out!

1
Alex 3,130

@Alex-Archer-I

Posted

@Vrondir

Oh, I see. Well, it's cool to practice new thing anyway =)

By the way, you skip a couple of semantic tags - the clickable arrow should be a button and the links inside - an ul =)

And I really like smooth animation of the links pop-up and that they could be closed by clicking anywhere. I tried to figure out how to do it in the another challenge and failed (but there was react app) =)

1

Please log in to post a comment

Log in with GitHub
Discord logo

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