All solutions

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

Could they have chosen a worse font? Probably not. The baseline alignment was so off that I had to manually adjust the text’s position with translateY to get it properly aligned with the surrounding elements.

How do you handle issues like this? Are you like me, aiming for pixel-perfect alignment, or do you take a more relaxed approach?

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

Fun and easy.. SolidJS feels way better than react.

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

This challenge was a lot of fun! I did take some creative liberties with the UI/UX because I had a few concerns about the original design.

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

For starters, I thought it was a bit of a pain for mobile users to scroll all the way to the bottom just to check their cart. So, I added a handy cart button with an item counter right where they can see it, and turned the cart into a nifty drawer.

I also threw in a little magic with localStorage to save the cart's state. That way, if you accidentally (or intentionally) refresh the page, your carefully selected items won't disappear. The cart only clears out when you submit your order and start a fresh one.

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

Not pixel perfect but I'm pleased with the outcome. Also, I added extra info at the output.

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

I wish the included style-guide file offered a bit more help. Obviously if they do that you wont need a PRO account but it's a same to have colours missing.

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

I just wanted to try Solidstart although it was an overkill for this task.. Also I wanted to hone my Vim skills.

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

Look ma! No media queries at all!

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

My personal challenge for this project was to complete it without using any media query at all. All changes in font size, paddings, margins etc. are handled by clamp functions.

Simple solution, the challenge was to not use classes for styling.

Simple solution using Qwik, css modules and no javascript.

Just for fun and practice, zero media queries.

Ok just one media query!

Just playing around with Astro.. pretty cool!

Simple, CSS only solution.

I think the designs are incomplete. I'm trying to accommodate for all resolutions, from 3840px down to 320px for devices like old iPhone SE and it's hard! Almost every time that I have to deal with backgrounds bleeding out of the viewport the given files are not playing nicely. I have to jungle with "magic" numbers and I don't like it... It's "smelly code"!

Does the 'Request Invite' button needs to be inside the mobile menu? I can't really tell from the mockup.