Responsive article preview with SASS

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

I’m excited to embark on this new learning path and to see my solution come closer to the intended design. That said, my current solution is optimized only for desktop browsers, specifically Firefox and Chromium-based engines. For my next project, I’ll focus on improving responsiveness to ensure a better experience across different devices and screen sizes.

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

What started as a seemingly simple challenge quickly became more complex as I got deeper into the project. After finishing the markup and half the styling, I realized that positioning the popup with social links wasn’t as straightforward as I thought.

To solve this, I had to get creative. I wrapped the preview article in an extra container to make it relative, allowing me to position the share popup exactly where it needed to be. I also decided to use a background image instead of embedding the image with an <img> tag. However, I’m aware this might not be the cleanest solution.

Styling the card for the mobile version was another unexpected hurdle. Getting the flex-basis proportions just right to match the design was tricky, and I had to experiment quite a bit to achieve the desired look.

While it wasn’t as smooth as I’d hoped, overcoming these challenges was a great learning experience and a reminder of how attention to detail can make all the difference.