All solutions

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

I had issues with z-index. I have never fully understood z-index and how to use it, but thankfully this project required a lot of it and I was able to complete the necessary research needed to become more confident in three-dimensional positioning.

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

I learned how to use Grid, Transform, and specific positioning for the quotation mark svg photo. It took me a while to complete, so the next time I use grid, I hope to cut that time a lot now that I've had a chance to learn it.

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

My biggest challenge was the bottom row of the grid. There was a lot of spacing within the cards' bottom padding. I ended up utilizing flexbox within the grid to justify-evenly to reduce the white space.

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

Is there a better way to remove extra whitespace on the bottom row of the grid? I tried h-fit and it made the row horizontally uneven on the bottom so I pivoted to flexbox. I am open to new things to try to improve this part.

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

I was able to apply the Tailwind CSS classes on mobile and desktop utilizing flex fairly quickly. I was worried about the desktop version and the way that the boxes are laid out, but I ended up wrapping the middle two boxes in a div and applying flex to that, and it worked out perfectly. It took me 1 hour less than what I had expected, so I'm happy I'm getting the hang of this.

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

My main challenge was ensuring the box sizes on desktop and tablet didn't drastically change sizes. I ended up utilizing Tailwind CSS's min-width and max-width properties to ensure the boxes are the same size.

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

Any feedback would be great!

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

I followed a mobile-first approach which made the desktop version much easier. I think it increased my efficiency and allowed me to focus more time on the details.

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

I encountered an issue with the desktop version of the layout and the image and content within the container. I learned how to utilize flex-grow and flex-1 for the content to grow and shrink.

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

I would appreciate ideas on how to make the layout look better on a medium desktop screen like "Nest Hub" in dev tools. It looks a bit wacky currently.

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

I learned how to use custom CSS stylings to customize and override Tailwind CSS' default properties for lists. I did end up spending a lot of time on the Nutrition section trying to get the layout and spacing right. I didn't realize it wasn't centered in the middle on desktop and mobile. Next time, I will analyze the reference image better to not take up extra time.

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

I initially did not know how to customize the bullet points and numbers in Tailwind's default list. I did some googling and realized I can use li::before plus more to customize it myself.

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

I'd appreciate any feedback!

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

The color palette is pretty cool. I'd like to enhance the color palette more.

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

I had an issue with the image and making it round because of the image shape. I ended up cropping the image and adjusting the CSS styles to make the image rounder.

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

Any feedback you have would be greatly appreciated.

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

With this project, I used to use Bootstrap without React. I used it with HTML only. It was a good learning experience.

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

I ran into an issue with the card not being horizontally centered on the screen. Turns out, I needed to ensure the body has 100vh in order for it to be horizontally centered.

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

Any feedback on what I could have improved would be amazing.

With HTML and CSS, I have had a difficult time with the layout and ensuring things are aligned. The majority of this project was me attempting to fix my Footer because I had focused too much on one specific element versus multiple elements like the body and main. What are some good resources for helping out with CSS alignments? Thank you!