All solutions

Focused was on the js app and learning webpack, not the interface.

Will appreciate ANY feedback.

• Implemented both games, can switch in realtime
• Cookie keeps track of score for both games
• Can add similar games easily due to strategy pattern
• TINY Dist folder

Happy that I got to develop my own accordion component.

Not that happy with how hacky some of the the positioning seems, nor how long it took me to complete this.

Transitions temporarily disabled for screenshot purposes.

Lazily done. But I'm starting to get comfortable and gaining confidence.

Can't wait for the next challenge to destroy it completely!

Did you know that only the review text in the first (purple) card has an ADDITIONAL RIGHT PADDING OF 16PX? Very, very sneaky and dangerous, especially for freeloaders like me without the figma files.

But I got to revise and practice grid a bit after a long while. That was kinda nice.

Will take ANY feedback.

Trying to be elegant resulted in a less accurate solution which is not very responsive either.

Oh well.

Wasn't able to find good whole numbers or use techniques like flex to automatically place text containers in a pixel-perfect fashion. Wasted a day looking for some elegant solution via trial & error.

It seems like elegant techniques are better suited to modern / responsive designs with detailed design files, but become impractical for images with subjective spacing and a limited resolution.

Going to stop obsessing over it and just continue to build normally for now.

Will appreciate ANY feedback.

Development certainly becomes much easier if the image is first translated into a figma file to clarify the margins / paddings. More time (and energy) is saved during the development process than in expended in translating the design.

Don't like using fractional rems, seems hacky. Am I visually splitting the spacing incorrectly, and ending with wrong margins / paddings for various components?

Will be grateful for ANY feedback.

Setting up margins and breakpoints becomes really ambiguous and makes the development process experimental and unpleasant - leading to a poor quality end-product.

From now on, I will always convert the picture to a corresponding Figma file to remove ambiguity, and then start development on it.

I would love any feedback on the idea above.

My first submission.

Not proud of using magic px numbers.

In professional life, are developers normally expected to deliver pixel perfect solutions when no figma / sketch are provided?

Will be grateful ANY feedback.