Skip to content
Submitted 3 months ago

Article preview component

BLÅÇKØÜT•230
@FopefoluwaIkufisile
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Article preview component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I am not satisfied, This was a struggle for me, I would try it out again

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

I faced challenges getting JavaScript to handle the social links container's behavior at different screen sizes. My initial attempts complicated the layout, but I eventually found a more manageable solution. While it works, I realize there's room for improvement in my approach to responsive design.

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

The explanation of how the dynamics of the two different behaviors of the social links container work at mobile and desktop view.

Community feedback

  • nicowashere•250
    @devdrivenaiPosted 3 months ago

    Hi! First of all, I want to tell you it is normal to struggle. It is not a negative thing. Actually, it is only through struggle that we learn more and get better. I would say "Embrace struggle". :) So don't worry about that bit.

    Also, the project looks quite good and I really liked the transition effect of when the popup fades in and out. That was cool.

    With regards to what you request specifically, IMHO it may work better to place the .share-box2 inside the .share and then from there you can handle the positioning with a media query (or container query, whichever you prefer) and then using absolute positioning (eg you change the relative positioning according to the viewport/container width). Then, in JavaScript, you only handle the opening and closing of your popup (not its positioning, which is more like style, and it's probably better handled in CSS).

    Also, it would help to use more semantic HTML, (section, article, button, etc.) and this includes probably using the <dialog> HTML element (I would use it as non-modal, check MDN for this). It should make things easier with opening and closing it, I think.

    Hope that's both helpful and clear, but feel free to follow up, responding here, and I will try my best to be of help.

    Also, remember you've done a great job, and in development there's never a goal, you're always in a "struggle" to learn and improve on smth. Don't worry about it, just enjoy it. HTH!

    1
    BLÅÇKØÜT•230
    @FopefoluwaIkufisilePosted 3 months ago

    @devdrivenai Thanks for the advice!! I used that approach at first actually (the .share-box2 inside the .share), I deleted the comments of that approach because I was annoyed lol, It wasn't just working but I'll Implement your idea on it and get back to you

    Okay, I'll give semantic HTML a try!! Thanks again for the advice !!

    1

Please log in to post a comment

Log in with GitHub

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