Article preview component using CUBE CSS & Sass

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

Surprisingly, working with JavaScript was not difficult. Although I'm not used to the syntax and had to look up a few things, overall, it went smoothly.

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

I encountered some challenges with positioning the image and the popup for this project. I attempted to make the image adjust its size based on a parenting div, but I struggled with it. The image overflowed its container on mobile, while on larger screens, it appeared too small. Eventually, I opted to move all the styling directly to the image, which I have found to be an easier approach based on my past experience.

Working with position: absolute; elements for the popup was difficult for me as I'm not accustomed to it. It involved a lot of trial and error, and I realized that I need more practice with these kinds of elements. Additionally, I encountered issues with the popup on larger screens because it had to overflow the card. I initially set an overflow: hidden; on the card to automatically adjust the border radiuses of the elements on top of the card, but this approach didn't work due to the popup. Looking back, I could have planned this aspect better to save myself some time.

The biggest challenge I faced was dealing with the popup. It doesn't follow the typical disclosure or modal patterns as it overlaps other elements on the page. I wanted to ensure that the popup didn't render the other content on the page inaccessible, so using a modal pattern was not an option. With assistance from a senior developer, I experimented with the `` element to prevent access to the content behind the popup when it was open. However, I encountered issues with keyboard focus on smaller screens.

Ultimately, I decided to use the inert attribute on the content behind the popup when it was active on mobile. Additionally, I made sure that the focus remained on the button when the popup opened, making it easier to close.

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

Any suggestions and comments on how I can improve are welcome!