I tried my best to get accurate page.
What challenges did you encounter, and how did you overcome them?grid is the main challenge for me in this task.
What specific areas of your project would you like help with?Because of this task I learned about grid some more
Getting the 3 columns to work as intended! I had a plan when using flexbox which turned out quite nice :)
What challenges did you encounter, and how did you overcome them?Making the boxes as even as possible in terms of size. I had to read up a bit on flex-basis and felt as if I had to go back and forth many times to ensure things were working as intended.
What specific areas of your project would you like help with?Any kind of feedback is welcome really, but I want to ensure I am using best practices for my code and techniques. So feedback on that is always welcome, both in terms of HTML and CSS :)
I really liked your solution, what I would suggest as an improvement would be to improve the adaptability of the page to different screen sizes, so that it is more visually pleasing for different screen formats
Nothing
What challenges did you encounter, and how did you overcome them?CSS Media Query
What specific areas of your project would you like help with?Media Query
Your project looks incredible, the only things I would suggest would be to increase the spacing between some elements on the mobile version of the page, and perhaps highlight the value of the product more, putting it in bold
I think I did pretty well with this one. I feel like I'm getting better at responsive design, and imitating the design itself doesn't take me as long as it used to.
What challenges did you encounter, and how did you overcome them?I initially tried to do the nutrition section as a table, but I couldn't figure out how to imitate the lines between each value while using a table format. So instead I switched them into a flexbox and used a divider div to imitate that. I'm not sure if that was what the challenge was expecting though.
What specific areas of your project would you like help with?Is there a way to insert a divider between different rows of a table? When I tried, it would only set the divider before the table, rather than "inside" it.
I really liked your project, you managed to replicate the original design very well.
Every time I'm getting most use to the coding, but still needs more practice.
What challenges did you encounter, and how did you overcome them?This time with font sizing and weigth.
What specific areas of your project would you like help with?More practice.
I really liked how your project turned out, but one thing I could suggest as an improvement would be to add a smoother transition when the mouse lands on one of the elements, maybe add a millisecond transition to the hover
I'm proud of how I started experimenting with CSS variables and Flexbox - those are two components that I didn't implement in my last project, but they made this one easier to handle.
What challenges did you encounter, and how did you overcome them?I had some issues with spacing and alignment, but implementing Flexbox and modifying margin/padding helped solve these problems.
What specific areas of your project would you like help with?I would like feedback about simplifying my code - are there parts where I can achieve the same result more efficiently? Any other feedback is appreciated as well!
Your project is incredible, you managed to replicate the design perfectly, and your code tests very well structured, congratulations!
This project helped me ease back into HTML and CSS comfortably, forcing me to look up and research into good practices, using the Discord server to help me from other people's solutions. I depended more on other people's solutions and would've liked to remember HTML and CSS from previous studies and implemented them in this project. However, I didn't remember but this was a good little project to work on as a starting point again!
What challenges did you encounter, and how did you overcome them?Whenever I'm in need of help, I tend to compare my own code with other people's code and think theirs is better since they were successful instead of working my way round my solution with what I currently have. For example, in this project, I was stuck on making it responsive to the mobile viewport towards the end. Many successful solutions used display: grid and display: block whereas I had already implemented using display: flex in CSS. I tried to search for a solution with no success. However, reading good CSS practices from articles, the Discord server, and stack overflow, I changed the width of the container from a percentage to a measure of rem which seemed to do the trick. It wasn't the optimal way to do so but I was successful and it was what I needed to do in this particular project. If the project was to make the page responsive to various viewports, then I would've considered not using flex in CSS and rewritten the code.
I'd like to have help with making it fully responsive to various viewports. For example, having a viewport less than 375px, and not having to change the rem measurement for my container. How will I be able to do this using the current CSS properties that I have currently?
I thought your project was very good, the only thing I could suggest to you would be to improve the spacing between the elements, I believe that the image, title and text could be spaced a little wider.
