Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • chrisk71 40

    @chrisk71

    Submitted

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

    I learned a bit about styling ordered/unordered lists and media queries. I'm still struggling to understand how to size things to match the design, as well as best practices for the overall HTML structure, i.e. using a tag vs. tag.

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

    I struggled with trying to use a table for the nutritional info but watched a YT tutorial by edsHTML and was able to style the section much easier afterwards.

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

    Any feedback is appreciated!

    Aleksandr 150

    @FunTomDev

    Posted

    I like the solution, but you should've used other styles for your bigger text. Despite that, I see no issues.

    0
  • @GabrielNoss

    Submitted

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

    I've begun to understand the concepts of CSS, and I think it's time to begin with a challenge with JavaScript

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

    No challenge

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

    If you have any comments to help improve the code, just let me know

    Aleksandr 150

    @FunTomDev

    Posted

    It is not a great practice to put some weird styles on your <body> tag. As I see you have set your body to be margin: auto on both left and right but normally <body> element (as an element that SHOULD contain your whole page) should have default or maximum screen size. Instead you should've set your <main> element to be centered and do it not by using margin-left:auto & margin-right: auto, but instead by using absolute position with transform: translate or by setting display flex on parent element (<body> in your case which is still not a good solution - should have other parent element). If you choose to set display:flex on your element, you should do it on your <main> tag, which should (as <body>) have width and hight set to 100% and then your div.card will be the element that is being adjusted to the center of the page.

    0
  • @Saimgkdn

    Submitted

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

    none

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

    none

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

    none

    Aleksandr 150

    @FunTomDev

    Posted

    The html and css files are both readable. I think the only issue with the solution is working without a reference file to know the sizes of each element on the page. Despite that I think it's a solid work and it is well done based just on given design image.

    0
  • @Abdellahmaarifa

    Submitted

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

    .

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

    making the font size responsive without the use of media queries. This helped : https://dev.to/vulcanwm/responsive-text-without-media-queries-4enc

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

    .

    Aleksandr 150

    @FunTomDev

    Posted

    Everything is great in your project, but I think you've lost some settings and that's why your card doesn't match the sizes of the card presented in the original design. If you seek and find those mismatches I think you will do better.

    Marked as helpful

    0
  • Aleksandr 150

    @FunTomDev

    Posted

    There are some issues I see in your solution. First of all (despite the text on top :)) your box-shadow is a lot more 'visible' than it should be. Your title text is a lot bigger than it should be and the main box is a little bit thinner than it should be in the design - this makes your text wrap in a different way than it should.

    Marked as helpful

    0