I would like someone to review my code and give me feedback on how to make it easier to read, and also what principals or techniques I could have used to have less code if possible.
I want to work on using CSS variables, this will make editing the code months later a whole lot easier.
I improve my frontend skills in css and html
What challenges did you encounter, and how did you overcome them?I used media queries to adapt the layout to different devices
To add a gap at the top or bottom use css flex.
justify-content: center; align-content: center;
in the container body or main you want min-height to be 100vh. You can then add a margin-top and margin-bottom in your desktop code, and remove it in your mobile.
You should have used two different types of fonts for the challenge, the headers were one font and the others were another font. Great work, but just missed the little details.
The site is responsive, however you should have made the picture take up the full width of the content.
Using font-weight gives you more control than using <strong> tag, but still good work.
Between nutrition and the table there should be a gap.
Nice job using flex, you could have made better use of it in other parts of your code.
Great work and keep up the good work !
It would be interesting to know how to make the padding-top and padding-bottom smaller for mobile devices without using media query. With clamp()? Has anyone tried this?
I like how you modified the information provided to make it more personal. You also made the buttons hyperlinks I think that's actually pretty cool.
I think you succeeded in completing the project !
You also did a great job using max-width for the card size, this really made everything much more responsive. Also great use of the clamp function to size the text accordingly.
I really like the fact you used variables for the colors used in your CSS.
Also it's nice you went and added a footer with some additional information.
Your html and css are well structured. In the css it may not be as clear which properties are for which portion of the code, I would have to look at your html to compare, so using better naming conventions would be one thing to work on.
Also proportionally the card is smaller on the screen, but still great work.
Good job ! I really liked your approach.
You really went above and beyond by adding a shadow in your code. I think that's actually pretty cool.
I didn't use a section for my card, instead I used a div.
Great work with clear class names, I think I could have implemented this as well.
I would have also included a CSS Reset, it makes things a lot easier, but still great work !
