Progress: I spent most of the time slowly making a design I was unhappy with and then realized I needed a new direction. Below are screenshots of my first design:

It was very blocky with different text sizes and fonts, I tested a few designs and learned about some mistakes you can make while designing and how hard it is to make something simple. Unsure on how to improve it, I scrapped the entire thing and went to a friend with website design experience. He pointed me towards CodeStitch.

CodeStitch is a paid service used by web developers to get HTML Code and formats for their website. I opted in for a month subscription and gained access to many files. I based my design off the two Figma files below.

I then took pieces from these files, turned them into components, and added my own personalization to it for my website.

Callout: Originally I had outlines on the shop page for each product and it did not look great. I tried removing the outlines and giving the box a slight change in color when you hover over it instead. A minor change that helped the look of this page a lot

Font: Roboto
Size used: 61, 49, 25, 20, 16