All solutions

Thanks for checking out my solution!

This was a pretty fun challenge. It took me a little longer than expected, but breaking down all of the functions and coding them up one by one helped me not feel so overwhelmed. It's not a pixel perfect solution and some of the medium screen sizes don't scale perfectly but it gets the essence of the design pictures I feel. (Looking back i realize i forgot to add the notification icon when an item is added to the cart. I will have to update my solution with that).

I wanted to make this using Svelte, and I have to say it was awesome to work with! Very natural to jump right in if you know the basics of HTML, CSS, and Javascript. DEPLOYING it is a whole other story. I was going to deploy on my VPS but I could not find any documentation on doing so from Svelte. I will probably have to read the Vite docs for guidance.

Overall, there is some repeated code that I will have to go back and refactor eventually. Any suggestions on how to minimize the repetition or get smoother screen transitions are welcome!

This was pretty fun! I liked getting to know how to better use grid to position items and when is the best situation to use flex and grid.

I had some issues with positioning the menu on medium and small screen. getting the styling was easy enough but trying to dynamically position it gave me some headache. ended up with something that works okay but the transitions are not smooth. Any tips on how to make that less painful would be appreciated!

Thanks for checking out my solution!

It took me a while to get it deployed to heroku.. finally got it figured out though!

I really just used node to create an initial quote when the app is loaded. After that it's all client side. Works okay, my first time using fetch().

Thank you for checking out my solution!

I found it easiest to use the z-index to make it somewhat interactive..

Any feedback welcome! I look forward to seeing other peoples' solutions

What are some ways I can avoid hard coding sizes using pixels?

Do people use 100vh to center content vertically? Is there an easier/more acceptable way to do this?

Thanks for checking out my solution!