All solutions

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

I am proud of trying one more time every time I faced a challenge.

1. The JavaScript was really simple, but this is the first time I had to think on my feet with no guidance since I learned JavaScript.
2. I am proud of the structure of the HTML that made it possible for me to work with two sections that are practically one but they alternate in display, but in desktop size, one is permanently visible while the other switches state from being an element in flow display to a 'floating' element that doesn't take up any space with the main content.
3. I am also proud of he little pop-up animation, considering how tiny it is.

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

I struggled with the positioning of the 'share menu' in desktop size. The approach I took was to position it absolutely relative to its parent which is the '.bottom' section element and try to match it up with the '.share-button' button element which is, too, positioned absolutely relative to the '.bottom' element. However, my approach was very explicit and did not work well when resizing the window.

A thought I had was to, in some way or another, position it relative to the button considering they're on the same level in the DOM tree, but I couldn't quite figure it out.

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

Responsive Images! I had to learn about them, and I would appreciate feedback on my approach to styling them.

I did also encounter problems with flex alignment. The 'Add to Cart' button refused to be aligned to the bottom of my '.product-details' container when it should since I set align-self: flex-end given

display: flex;
flex-direction: column;
}

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

I worked well with the display grid, and flex. I implemented Javascript to add the error functionality when inputting an incorrectly formatted email into the email input field when trying to 'subscribe to the newsletter' of the website. I 'unlocked' a new use case for ::before and ::after pseudo selectors. I know better how to utilize them and correctly style them for images to create unique designs.

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

Using pseudo selectors to create the unique designs with the curved images. I overcame this challenge by looking for feedback on the FrontEnd Mentor discord server. I previously did have the right approach, however, minor breakages throughout my code as well as a slight lack of knowledge in some areas caused various problems.

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

I'm proud of the progress bar type element. I figured out a way to make it work quickly. I'm also proud of figuring out the little "message bubble" fairly quickly.

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

Positioning and aligning the elements.

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

There is a slight misalignment, the two cards in the desktop view appear to be aligned at the bottom but I could not figure out how to make it happen, I just stuck with keeping them centered using display:flex.

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

I'm proud of knowing I had an idea of how I could reorder the grid's items i.e. positioning the 5th testimonial card to the far right and have it take up 2 rows. However, part of me feels like my method is very hard-coded. I would appreciate feedback on this point.

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

The z-index of the quotation mark image doesn't work as I intended it to. No matter what I tried, the quotation image always seems to appear in front of the rest of the testimonial card's content.