All solutions

After spending a few weeks on this, I'm proud of how it turned out! I learned a lot about using React and Tailwind in this project and using a mobile-first workflow.

My main struggle with this project was browser responsiveness with SVGs and the blue shapes. I could style the layout to look how I wanted it to at each breakpoint, but the SVGs and the blue shapes don't look right when the viewport width is between those breakpoints. What are the best practices for designing with every viewport width in mind?

This is my first project with React. Any constructive criticism is appreciated!

There was one element that I couldn't figure out in the mobile view. When you open the cart, I wanted it to align perfectly over the image and spread out to the width of the image (as seen in the design). I couldn't work out how to do this on top of the code I'd already written. Does anyone have any pointers? I was able to hack it by setting the position to absolute and moving the div around, but it wasn't exactly centered. What are the best practises for this?

I slightly delayed uploading my first challenge. This is useful for anyone trying to align a div on a page:

.center-div {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

I found this to be the easiest challenge I've done so far, but I still learned a lot about using asynchronous functions with the JavaScript Fetch API.

Does anyone have any tips for anything I may have missed out on?

I am happy with this challenge, but I feel like the vertical alignment of '$478.33' and 'from last month' is off. I used CSS grid to layout the items, but what you recommend doing in fixing this specific issue?

• I struggled with header/paragraph line breaks. I wanted to avoid using <br> tags as they don't respond well when resizing the browser. What other techniques do you use to wrap them correctly in their container?
• With the top article section at the bottom of the page, I was unsure how to space them out evenly so that the right side of the third article is in line with the edge of the main grid container. What are the best practices for spacing out items evenly in a CSS grid?
• The hamburger menu icon on the mobile site is not perfectly lined up horizontally with the logo. I had to add a margin-top of 7px to the icon for a 'hack' fix. What is the best practice for this?