All solutions

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

I'm happy that I managed to get everything just about right! I got to use many different tools, some of which I use on every project:

• Custom Properties for colors and typography
• Grid
• Media Queries
• Creating space between elements using the .flow > * + * utility class
• Using modern CSS selectors like :is and :has
• Selecting and manipulating DOM elements using functions and event listeners

And some I haven't used too much yet:

• .container utility class that sets a max-width, padding-inline and margin-inline: auto.
• Setting up a gap Custom Property for cohesive spacing - I just invested in Frontend Mentor Pro, and the Figma file gives you everything you need!
• Setting up font sizes using numbers, with 400 as the "base".

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

Positioning the background patterns at the top was tricky. I ended up using ::before and ::after pseudo-elements.

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

I am happy to hear any feedback :)

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

I used Subgrid for the first time!

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

The most challenging part was the mobile menu.

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

I couldn't figure out how to make the dark overlay when the mobile menu is open.

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

No comment.

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

No comment.

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

No comment.

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

I managed to get the "Share" popup positioned correctly on both mobile and desktop.

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

The biggest challenge was having the button appear alongside the overlay on the mobile layout. After quite a bit of experimenting, I made it work using absolute positioning and z-index.

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

I think I got it mostly right, as always I'm open to feedback :)

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

Managed to get the design roughly the same. Managed to use Grid for both the mobile and desktop layouts.

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

Struggling a bit with the bg-image, which I usually do.

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

I think I got most of it right. I'm open to suggestions, though!

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

I managed to do some JavaScript functionality all by myself.

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

The JS parts were a bit tricky. I didn't figure out how to make a question collapse when another is clicked. And for some reason, the card gets a little bit wider when clicked.

This one took me a while. Background images are still a pain for me...

I'm struggling with how to do the overlay which should appear when hovering the image. Do I use z-index, pseudo-elements, absolute positioning....would love to get some insights on this.

Also, I created the thin line using border-bottom - I have a feeling this might not be the ideal solution?

Thanks in advance.