All solutions

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

Persisting despite having quite a few issues with the layout of the popup. Also, including JavaScript for user interaction. Generally, I think I did a good job with the look of the component in relation to the design too.

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

The most difficult aspect was positioning the popup for both desktop and mobile views. I didn't get it pixel-perfect on both mobile and desktop but fairly happy with how it turned out. I did a lot of googling, using stack overflow, w3 schools and also saw some examples of how people approached their own solutions to this challenge.

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

Any ideas as to how I could improve the position of the popup so that it fits exactly like the designs. The position of the popup changes when view on large to larger screens.

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

I'm proud of how close to the design I managed to get this implementation of this project to look.

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

Two main challenges came from the header image, which I wasn't able to manage to fit 100% of the width on mobile view without the text below being affected, so I decided to leave the image as is on desktop view. The other issue came from not being able to use the styles I wanted within the table of the nutrition section. I ended up creating this section with a table and implementing the styling how I wanted it to be.

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

Any ideas about how to implement the image on mobile as full width outside of the container but within the container on desktop would be valuable. Also, how to add styling to HTML tables so that I can create dividing lines between table rows, as I wasn't able to figure this out or find a suitable solution.

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

I was able to complete this in a relatively quick time than I did with previous similar challenges. Hopefully, this is a sign that my understanding of layouts is improving.

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

Primarily around centring the item on the page, widths, hover state and shadow. Google and using W3 schools as a resource helped me solve any issues I came across, along with previous challenges' code.

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

None

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

I couldn't figure out how to display the error text when clicking the 'Claim your free trial' button. I was able to have the background colour turn red for any input field that doesn't meet the validation requirements or is empty. This would seem to indicate that I wasn't too far off from finding the solution to display the text instead of having the input field background change colour. Any suggestions as to how I could achieve this would be great.

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

I decided to build this using React which was probably a bit much for a single page site. I wanted to try working with Vite primarily instead of create-ract-app. The next time I would keep it simple and use HTML, CSS & JS. I like how I implemented the design mainly by using my eye and not diving too much into the design.

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

I had some problems displaying the image due to file paths when hosting the project. I did quite a bit of research on stack overflow and general Googling to figure out how to fix the issue that only occurred when the site was hosted and not locally.

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

None

One thing I wasn't sure of and might go back to do is the greying out of the background when opening the menu on mobile view.

Using Swiper was a new experience as I've had previous experience of creating a carousel.

Any feedback welcome on tailwind CSS. This was the first time I've tried it out.

I found this quite difficult to implement on larger screen sizes. Reasonably happy with how it looks on mobile, tablet and even laptop up to 1024px. But beyond that the layout seems to break which is frustrating because it doesn't show up on chrome dev tools. Any suggestions would be welcome.

I also struggled to put the 'dots' image rightmost of the screen. This could likely be due to my layout and flexbox, but still looking into this.

Would it have been better to use mobile background images at smaller screen sizes rather than setting specific sizes based on the desktop images?

Any other general recommendations would be much appreciated.

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

Producing this pixel-perfect development without designs.

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

This was fairly straightforward however, the most interesting aspect was aligning the design in the middle of the page.

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

None