All solutions

Overall, I liked this project. I ran into some weird issues with spacing, but I believe this resulted from trying to get pixel-perfect accuracy from the Figma file while trying to use the more responsive rem measurements. Eventually, it all worked out in the end and I'm happy with the solution. If anyone has any suggestions or comments, feel free to mention them!

Also, if anyone can give me any recommendations on how I could've better implemented the shopping cart icon instead of using an img tag, that would be greatly appreciated!

This project posed some unique challenges. The first was finding the most effective way to create an overlay. I looked into using positioning and z-index, and then I looked into pseudo-elements. While they were effective solutions, I ultimately settled on using the mix-blend-mode property on the image itself. This allowed the image to mix with the background and achieve a satisfactory overlay for the image:

img {
  display: block;
  mix-blend-mode: multiply;
}

Speaking of the block section, I was encountering a strange situation where a tiny section of white space would be under the image. I couldn't figure out exactly why it was occurring, but then I learned images are shown as inline elements. Changing it to a block display fixed the white space issue allowing everything to fit perfectly.

Another thing about this project was the swapping of images. While I could've used a media query and used the image as a background property in CSS, I opted to use a script to change the image on the resize event.

function swapImage() {
  const image = document.querySelector("img");
  if (screen.width >= 1100) {
    image.src = "./images/image-header-desktop.jpg";
  } else {
    image.src = "./images/image-header-mobile.jpg";
  }
}

window.addEventListener("resize", swapImage);

I don't have too much hands-on experience with JavaScript yet, but if anyone has any tips or suggestions about the script or any of the above code snippets, I'd love to hear them!

I enjoyed this project and felt the workflow was streamlined due to its simplicity. This time around I opted for vanilla CSS since Sass was giving me some sass and not quite working well with me (weird autocomplete issues) so that's about the only thing that has changed compared to the previous projects. Any feedback or tips are welcome!

One thing I found (arguably) difficult was attempting to complete the project purely using CSS grid. I don't have much hands-on experience yet and could not achieve the wrapping effect I wanted. I did use grid on the container as an experiment to get more practice, but the rest is built using flexbox. Other than that, I enjoyed this project a lot.

If anyone has any tips or information about how or if I could've built this project entirely with grid, I would be happy to get any tips!

My biggest difficulty in this project was the mobile view. I have yet to get in the habit of a mobile-first methodology. One thing that slowed my progress was Sass. I was unaware of how the nesting of items would affect how I needed to write my media query as well. This has caused me to learn that I should generally avoid nesting unless I have a reason to.

Like my QR Code Component solution, I relied heavily on Flexbox to achieve my result. I feel I applied it too much (body, main, and container class) given the project size. While I'm happy with the result, I'm worried about developing bad habits.

I didn't find anything difficult about building the actual project, but getting hands on with both Sass and Figma for the first time was challenging as with any exposure to a new tool. It was enjoyable to get some new experience in outside of my typical classes.

I'm unsure about my heavy use of flexbox to position elements. This leads into best practices as well as I'm unsure if it's good practice to use flexbox as heavily. I used the flex display property in the:

• Body
• Card element
• Text box

Despite getting the project to look good, I'm unsure if there is a more efficient/preferred method to achieve similar results.