All solutions

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

I am proud of getting close to my estimate regarding how long it would take me to complete the challenge. I am still off by a couple of hours almost. But considering the progress I made with the challenges I have completed so far, in my book, this is well done. I will keep working on this suggested foreplan by Frontend Mentor.

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

Working with the pseudo element for the shopping cart icon at first gave me the run around. After pouring over in the MDN Web docs I was able to solve the problem. I used positioning at first that made the icon invisible. The lesson I learned is not to over complicate my approach. Sometimes the simplest solution gives the most elegant result.

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

Originally I planned to use CSS Flex. The nature of the project made it very complicated for me to style it according to the Figma design file. Then I changed my plan to use CSS Grid. I have forgotten how beautiful CSS Grid was. It solved the challenges I faced. The lesson I learned from this is to step back and analyze what tools to use before starting away on coding.

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

The challenge I had was with the SVG. I was having blocks of white space on top and bottom. On css-tricks.com and article by Amelia Bellamy was very helpful in understanding SVG files. Learned a great deal. Unfortunately I was still left with my problem. Finally my next go to source of information on CSS, Kevin Powell's youtube channel, got me the solution. The actual video is entitled "How to use CSS object-fit to control your images". So this CSS property [object-fit] removed the white space and scaled the SVG file to fit the 200px I set on the height. This height is from the figma file.