All solutions

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

I am happy, that I managed to tackle all mandatory elements of the project. I am satisfied with the look and also functionality of the result. It might not be a pixel perfect copy of the design, but that was not my primary aim. I aimed to use responsiveness best practices, and I think I did reasonably well in this aspect.

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

I wanted to use overflow: hidden to only having to use border-radius on the whole card, and the parts adapting automatically with the overflowing parts hidden. But that was not possible, because the share menu had to be able to overflow the card boundaries. So I had to find workarounds, without making the whole unmaintainable. So I decided to use custom properties, that I can change, so that everything that has to be consistent, changes together. Unfortunately, anchor positioning is lacking in browser support... maybe in the not so distant future... Another challenge was have the same share menu "behave" differently on small and large screens. I tackled this using container queries, and different values for absolute positioning.

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

I would welcome any suggestions to make the code easier to maintain. I am aware of anchor positioning, but does not have enough support, yet. Any suggestion for a possible workaround (preferably css only) would be appreciated.

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

I managed to make it work. I am most proud of using fluid typography and only a minimal amount of media queries.

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

Switching to the divided picture was a bit difficult, and to get the positioning and the sizes right. Also, I am still thinking about the transition to the hover states, as I am not quite satisfied with the result.

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

Any suggetions regarding cool transitions to hover states would be appreciated. Also, regarding the switching to the design for wider screens, or basically anything constructive would be highly appreciated.

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

I am proud of the two-column and three-column layouts which fit inbetween the single-column and four-column solutions in the design. I am also proud of being able to use grid-template-areas to tackle the challenge of creating these complex grid layouts.

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

The grid layouts were the most challenging, but grid-template-areas made it easier.

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

Nothing specific.

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

I like the final results and the way the widths of the cards, the whitespace and the typography adapts to the viewport size.

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

Specifying the values so that everything is responsive was challenging, especially in the case of margins and gaps. I used a lot of clamp()s and calc()s to solve this.

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

Although I am satisfied with the grid, I expect there would be some easier way to make the layout shifts work. I am open to any suggestions, tips & tricks.

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

I like the final component and I think I managed to follow the design closely enough.

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

The concept of responsive images was new to me and was unsure if I'm doing it right.

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

Nothing specific, but I am open to any suggestions.

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

This was a bit more complex than the previous challenges, but I liked it a lot.

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

To style a table, but I looked my options up on the internet.

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

Styling the table and the lists.

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

Incorporate svgs and manage to change their color on hover/focus.

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

Including the svg logos was tricky.

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

I would like to use some more fancy hover effect, but for now I don't know what. Any suggestions would be welcome.

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

I am happy that I managed to make it sufficiently responsive without using media queries.

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

To make text size responsive without media queries. Finally I decided to use clamp with a minimum and maximum value, to avoid the text shrink too small or grow too large, and with a middle value based on vw.

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

I would be happy to get suggestions how to make it responsive using other techniques, and also for any other ideas for improvement.

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

I am happy, that this went pretty smoothly.

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

The project was good to get going with Frontend Mentors. I tried to rely only on jpg, and at least for now, didn't use the Figma design. Guessing the correct units wasn't always easy, but I'm satisfied with the result.

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

I think, I'm fine for now, but I'm looking forward to tackling some more complex challenges, perhaps using some framework.