I really don't like that I had to use queries here. Does anyone know how to do this project without queries ? Maybe with css grid ?
I couldn't align the last section Nutrition to look like in figma
My code output looks good.
What challenges did you encounter, and how did you overcome them?Unending stream of problems. Google searching is my co-pilot.
What specific areas of your project would you like help with?My code is probably cluttered.
The font doesn't match. Other than that - perfect
im proud of how confident i was whilst coding it, and i would start with a mobile-first design next time, that caused me a lot of problems
What challenges did you encounter, and how did you overcome them?the instructions part, i had to use counter reset for the markers so i can individually adjust the distance between the numbers and their paragraphs, i didnt know that before.
not bad, I see you did not do the last section like in Figma. I didn't do it as well lol. Good job overall
This work doesn't match figma. You should redo it. Everything is flying around
I enjoyed practicing hover and I want to learn more about focus.
What challenges did you encounter, and how did you overcome them?I had difficulty implementing focus because in my research it was only used in inputs, so I was unable to apply it to the project and I hope to understand this better in the future.
What specific areas of your project would you like help with?Please let me know if I did something wrong.
In what element can I add the focus property?
I am proud that I learned how to group HTML elements in order to manipulate them as a block in CSS. I used github copilot to help me center this <div>, what I would do differently next time is to breakdown the AI code, understand it, and come up with it on my own.
What challenges did you encounter, and how did you overcome them?The most difficult task in this project that I found is that the <img> did not fit correctly in the <div> as the design showed. I tried to use the padding but for some reason this messed up with the border-radius property, so I tried using margin and it worked flawlessly. I also fine tuned the values of the <img> and the <div> manually in order to try and fit my work to the design as much as possible.
What specific areas of your project would you like help with?Thankfully none, I tried my best and figured out what I needed to do to get the result as close as possible to the design. I might need the help of a senior to manually check the code and point out the best practices that I missed, as I am sure at my level, I most likely created a spagetti code that if scaled, would break.
