All solutions

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

I think I used relative units in a decent way as well as media queries to guarantee a good level of responsiveness while trying to replicate the original design in the best possible way.

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

Figuring out the right breakpoints wasn't easy, and relying on relative units instead of good old pixels was kind of a challenge to me. Next time I'd like to improve my skills in using these two tools in a more efficient and effective way. As always, figuring out the right font sizes and distances by eye wasn't that easy.

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

Tips about the best implementation of the right breakpoints and relative units (should I use them more or just for specific purposes?)

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

I'm happy I achieved a good result without the help of Figma files. I was also able to style everything in order to guarantee a good responsiveness to the whole page, and I used % instead of fixed sizes in order to achieve this result. I also tried to comment and format my code in the best way possible to make it clear for other web developers. Next time I'd like to be more efficient with my code (less is more).

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

I really struggled to place the bottom line properly on the desktop view. I couldn't understand why the absolute positioning wasn't working properly, and in the end I solved it by assigning the position: relative property to the html tag instead of the .layout_container div. That solved the problem on this specific case. I struggled even more with a white bottom banner that kept appearing whenever I zoomed out. I thought the problem was related to a height:100% I had used, but the solution was easier: I set the background-color: var(--nutmeg) for the wrong container instead of ````....

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

Optimizing my code. Sometimes I still struggle with height:100% vs height: 100vh.

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

This time I didn't have the Figma files to look up to, so guessing the distances and font size was not easy. I'm happy that I was able to replicate the layout decently by eye guessing sizes and distances. I'm also quite happy about the number of lines I wrote: Hopefully they're not too many.

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

I struggled a bit because of the lack of Figma files. But building the page without them was useful anyway and not as time consuming as I feared.

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

I'm open to any suggestion ;)

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

I think this time I was able to replicate the Figma mockup better than the first challenge. Using variables makes life easier.

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

Formatting everything correctly (right distances, paddings, etc.) to replicate the model well.

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

As for this one, I think I don't need any help because it was similar to the previous one.

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

Proud of being able to complete the challenge quickly and proud of the responsiveness I was able to implement. Next time I'd like to optimize more my code.

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

The .attribution class was maybe the most problematic part in terms of optimization. Also, the rounded corners of the QR-code image made me question whether an empty tag was an acceptable solution.

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

Code optimization (when Flexbox should NOT be used, mistakes on tags usage)

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

Proud of being able to complete the challenge quickly and proud of the responsiveness I was able to implement. Next time I'd like to optimize more my code.

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

The .attribution class was maybe the most problematic part in terms of optimization. Also, the rounded corners of the QR-code image made me question whether an empty tag was an acceptable solution.

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

Code optimization (when Flexbox should NOT be used, mistakes on tags usage)