All solutions

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

Mobile design was easy to make compared to the desktop version. So i approached this project with mobile first and it was pretty straight forward.

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

I struggled with making the four section, I didn't know how to style it, after watching some youtube videos on flex and reading other people code i understood how to create this design.

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

CSS

Check my css and give feedback on where i can improve on and how i can change it

HTML Check my html and give feedback on where i can improve on and how i can change it

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

I am proud of how it looks I think it looks similar as the design given. I probably over complicated css for this project. I will do this project more simple and easier next time after I gained more experience.

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

Media Queries, and Positioning each element.

handling with multiple images. I learned how to handle multiple media elements when handling with different screen size by using tag and giving it media size of when to change to the image on the screen. Another, thing I learned was CSS Pseudo-Element and Data-Attributes to add contents before/after elements, this helped me create add to cart button by adding the cart image before the text.

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

CSS

Mobile first or Desktop? and how to decide

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

I am proud of what i accomplished, It was a confusing project without figma design, but I think i have achieved closely to the solution.

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

I found it very confusing at the start as I didn't how to display the nutritional information. I was trying to display it using CSS Grid but it was not working as expected. Then I found out that I can use tables to display the nutritional information combined with CSS Grid.

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

My CSS, I would like to get feedback on my CSS on how I used it to style the tags and elements and my Media Query to make it responsive. I would like to know if there was a better approach.

I also would like feedback on my HTML and make sure it is semantic and the tags are used correctly and for correct use.

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

I am proud of how it looks at the end . I think its very close to how the design looks. I used a both flex to align the items in the container and use grid to create the layout.

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

As I didnt have the figma design, it was hard trying to guess the size of each elements and position them. Another issue I had was I didn't know how to position the 'links' (github, linkedin) etc. thats when I realised, i can mix between grid and flex.

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

CSS, i would like to improve my CSS to my best ability and keep practicing. CSS is very confusing at some times and will need to practice more. I would like feedback on my CSS and areas I can Improve. And media queries to make it more responsive.

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

I am proud of the end outcome, It was bit confusing as CSS is completely new to me and I suck at it. It has been a good practice with css flexbox and media queries. Next time I want to make sure my code is maintainble and can be read easily by others as I feel like i have used css elements in areas that I didnt have to or there was a better solution to this approach.

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

Media Queries was confusing and trying to guess the sizes of each area for this project. For media queries a simple google search and little bit reading helped me understand the basics.

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

Media Queries and CSS. I think i have overcomplicated this simple project and used a lot of redundant css in different areas making it hard to maintain and read.

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

I am proud of how it looks I think it looks similar as the design given. I probably over complicated css for this project so next time after I have more experience I will do this project more simple and easier.

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

CSS was the main issue. I am terrible when it comes to styling. It was confusing trying to understand how to style, using flex, position and everything. I used youtube, docs and more to understand how to use flex and other styling methods.

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

CSS - Have I used css in places where it's not needed, have i over complicated this project. HTML - Is it semantic and meets its needs