All solutions

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

Being able to complete this project. And trying to understand the use of flex.

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

My code in regards to setting the @media queries, I felt as if by default I needed to wrap all my code for it to be be viewed on min 375px, then anything after I added code separately of how i wanted it to be viewed differently. It would be good to have some guidance on the layout of the code. For viewport 376px and above, I had struggled to get the price, button and footer to the bottom left underneath the product description. Also the size of the button and couldn't change the background colour of the button.

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

The similarities of the solution and what I have produced. I have just realised that I didn't add a margin to the top, so next time I need to make sure that I have tried to cover all aspects required to get a decent result.

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

Even though I used flex, I still relied on margins to get the main container to the centre of the screen. I think this isn't best practice, but would love to have a better understanding of flex and why I feel it hasn't worked for me on this project. Help me understand better :)

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

I struggled on changing the list numbers/bullets to a different colour. The separation of the nutrition list.

I have also noticed when I have used media queries, dependant on what screen type it will squash my main container bu the image overlaps and doesn't shrink.

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

I am proud of being able to complete this solution and they appear to be similar.

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

I had difficulty trying to centre the image and round its corners, I tried using class selector as per the HTML (.svg) but this wasn't working. I had also tried setting the width but this threw it odd completely.

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

How should I have rounded the corners of the image? Also how to centre the name by the image of Gregg so it's inline.

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

I am prod of bring able to achieve a similar look to what was required.

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

One of the challenges I faced was not being able to round the edges of the boxes and also being able to centre the container and make it smaller.

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

Trying to figure out if I am using the @media queries correctly. I struggled to see what other information I needed to add. Also as mentioned above in regards to the rounding the edges of the boxes and making the container centre.

What did you find difficult while building the project? I found it difficult to centre the QR code, text to the webpage.

Which areas of your code are you unsure of? I googled reset CSS which I had added it in to the code so the webpage could be viewed the same whatever device is being used. I am unsure if I was successful in doing so.

Do you have any questions about best practices? A tip I have heard is to start off with mobile before desktop, what would be the best way of me doing so? It would be the layout of the code. Is there a way to make it more neat?