All solutions

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

I am most proud of getting the finished product to be almost 100% pixel perfect. What I would do different next time is to pay closer attention to the default text styles (line height, font-weight, font-family), because that would've saved me a lot of time.

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

The figma file did not contain any spacing information, so I had to ensure I made the right spacing decisions by using the pixel perfect chrome extension, as well as just calculating the remaining space using element heights.

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

Semantics and class reusability

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

I am most proud of implementing the small details of the design. Next time, I would overthink less and try to implement the "easiest" solution, instead of trying to think of a clever implementation, and end up implementing the "easiest" solution anyway.

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

The small bullet points, horizontal lines, nutrition tables, and responsiveness were challenges for this exercise. I overcame them by trying to chunk them down into digestible problems, rather than treating them as one big problem.

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

Media query breakpoints and responsiveness between the desktop, tablet, and mobile designs. Getting the site to look similar to the given sizes (i.e. 1440 for desktop, 768 for tablet, 375 for mobile) isn't the challenge, the challenge is deciding on how it should look in between the given sizes.

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

I'm most proud of how I made my classes organized and didn't repeat myself as often as I would have. I'm also proud of the attribution container position, I had trouble getting the attribution to stay at the bottom of the screen when opening chrome's dev tools, but I fixed it by setting the body as the relative parent, rather that using the root element as the relative parent. Next time, I would make sure that a specific property has an effect, this would make it more efficient when I'm getting rid of properties that don't have an effect at the end of development.

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

I didn't encounter too many challenges, the main one that I faced was getting the space between the bottom of the links container and the bottom of the card to be the same as the design. I overcame this by just comparing the height of each element, in doing so, I realized that the height of the card changed on mobile screens.

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

I would like help with semantics and choosing the right html elements.

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

I am most proud of thinking through the design structure before implementing the styling. Instead of rushing through implementation, like in the previous assignment, I was able to prevent clumsy mistakes from happening again.

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

Responsive typography and getting the card to be similar dimensions as the demo. I figured out that line height is not inherited from parent elements, which is why my card was a different size compared to the demo. For the responsive typography I looked into the css clamp function.

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

I would like to keep the attribution container but I'm using height:100vh on the body element so when I inspect element, the attribution overlaps the card.

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

I'm most proud of how I was able to figure out why something wasn't working based on past experiences. I would slow down next time, I ended up going too quick and not thinking ahead clearly.

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

I wanted the .attribution container to be on the bottom of the page without affecting the qr code container positioning. I used absolute positioning on the attribution container instead of having two flex column items.

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

Styling text. I'm not satisfied with the heading of the qr code component because it doesn't look exactly like the design, but I tried experimenting a bit and this was the closest I could get it.