Grid layout using embla carrousels constraints and Astro

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

I made a challenge for myself using a carousel library that make mandatory for arrows to be placed outside my carousel slides so that I cannot really nest whatever I want (Which for this challenge would have been easier if you think where the arrows was positioned in design).

So I was proud to overcome this problem using grid fractions and calculation so that I make everything to work visually even if my arrows buttons were not visually in the same place they are in the DOM.

Note: I would not have done professionally as it has better solutions on the market for carousel and it could have been done very easily without the challenge I make, it was for the challenge. Coupling so tightly UI and Js is even not recommended in an architecture point of view. It is better to be more flexible using Js slider animation on whatever button I want.

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

As I have not the figma (a paid feature), I rely on pdf designs: it was a challenge to be the closest as possible to the initial design without real padding, font size and so on.

I also cannot work on images (to respect frontendmentor rules) but I feel it would be really better for me to do so using Adobe suite or other tools (as gimp and so on). Indeed CSS give me numerous tools to work with these images but not enough. We cannot always avoid taking graphics image work seriously and I thought it may be important for this project.

I feel the font weight they gave in design styles guide may not be the exact one I see on the design pdf. Does anyone else has this impression too ?

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

I need to know if :

• Have you better ways than me to work using css on images to handle them better ? --> Using js could have been a solution of last resort. I think working on image prep themselves before is the best way but I could not do this for this project.

• What other ways exists in placing arrows box strictly on the same (While we cannot placed in inside the slide or slider viewport itself: embla carousel doesn't allow that)

I decide to use embla instead of fulljs or swiper, two other good choice. Does anyone use FullJs slider ? I also just discover Astro, a great framework !