had issues with the last section, the size of nutrients aren't properly aligned as they are on the design. please if you can help with the solution, i'd appreciate it so much
Hello!
-body {background-color: hsl(30, 54%, 90%); min-height: 100vh;}
You can read about <table> here: https://www.w3schools.com/html/html_tables.asp
Just finishing a project at this point in my journey is making me proud
What challenges did you encounter, and how did you overcome them?Mobile view, for some reason I'm lacking padding on the sides, even though I tried adding a media query for it, didn't work - haven't overcome it yet I'm afraid
What specific areas of your project would you like help with?As mentioned above, the mobile view's right and left padding are too small and the media query won't effect them for some reason. Would love to understand how to fix this.
Excellent Work!!
I'm a bit confused about the padding issues, there is a large amount of padding on container on mobile view?
I hope this helps!
Proud that I was able to get this done in a timely manner. Proud of my attempt to use semantic HTML.
What challenges did you encounter, and how did you overcome them?Honestly, I was tired when I was doing this, and I kept making simple mistakes (typos, not closing tags, etc.)
What specific areas of your project would you like help with?right now I have "body" serving as the overall container for all of my elements. Is this best practice, or should I have created a catch-all "container" div to put everything in? If that is the case, what would be the correct semantic HTML for that div?
Great Work ma'am! I think this is a great start. I saw some issues on this specially on mobile responsiveness.
-Is it really okay if we use body as the whole container for our html elements? Answer: Yes it is actually the container. Base on your code I saw that you set the body width property to 700px. You can remove it, since the default value of body's width is 100% you don't need to edit it you can leave it as it is. After inspecting your work I saw that it also the reason why it is not mobile friendly.
You can also remove the width: 100%; property to a block element since its default property is 100%.
You can add padding top and bottom to the body.
I think you can change the <header></header> to <section></section> and put it inside the <main></main> because we usually use <header> tag for navigation and branding.
You can make the <main></main> as a container and body as a background.
You can learn HTML here: https://www.w3schools.com/html/
It is normal to make mistakes like not closing a tag, when you are coding for a long time you will master it. You can also use Visual Studio Code for coding because there is an assistance to it for typing tags and elements. It will make your coding easier.
You can download it here: https://code.visualstudio.com/
As simple as the project is, I learned a new CSS pattern, the active hover state of the project required an icon overlay on top of the main image and it was the first time I did this.
What challenges did you encounter, and how did you overcome them?It took me a while to get the code for the overlay right, but in the end, everything came down to one div on top of another using the CSS position property on the realtive and absolute values. Once the div is positioned, just center the icon and add the color to the background within the :hover selector.
What specific areas of your project would you like help with?Any feedback will be appreciated.
Good Job sir! I found some active states that are missing.
You can add [ cursor: pointer ] property to the clickable elements
I think you just forgot to add hover effects on those items but all in all it is an Excellent Work! Keep it up sir!
Hi there 👋, I’m Melvin, and this is my solution for this challenge. 🚀
🎁 Features:
🛠️ Built With:
Any suggestions on how I can enhance this solution or achieve even better performance are welcome!
Thank you. 😊✌️
Good Day sir! I was wondering about your projects, those are great. I just want to ask on how you make it, same size like the design. Can you also give some ways or tips on how you do it? Thank you!
This are very first projects, need more like this to improve my skills
What challenges did you encounter, and how did you overcome them?Using flex-box
What specific areas of your project would you like help with?Not yet met up
Congrats! I think this is a good start. You can remove the borders of every buttons and container. Then add a background color to the body.
