Skip to content
OverviewSolutions
10
Comments
13

Dêvid Teófilo

@devid8642240 points

Python web dev

Latest solutions

View more solutions

Latest comments

  • Dêvid Teófilo•240
    @devid8642

    Firstly, congratulations on the solution.

    I have some considerations about your project:

    Regarding the structuring of your page, semantically speaking, all this content could be wrapped in an <article>, which could be inside a <main>. See more about HTML semantic tags here.

    Regarding the style, notice that the design predicted that the "add to cart" button has a specific behavior when the mouse passes over it. I don't know if you know it, but it is possible to implement this using the :hover pseudo-class.

    Again, congratulations on the solution and I hope you found my comment helpful.

    Marked as helpful
  • Dêvid Teófilo•240
    @devid8642

    Firstly, congratulations on the solution.

    I have some considerations about your project:

    I just have to say about HTML, semantically speaking all this content could be wrapped in an <article>, which could be inside a <main>. See more about HTML semantic tags here.

    Again, congratulations on the solution and I hope you found my comment helpful.

  • Dêvid Teófilo•240
    @devid8642

    Firstly, congratulations on the solution.

    I have some considerations about your project:

    Regarding structuring the page with HTML: note that the card in question is self-contained content and therefore semantically it would be inside an <article>. Furthermore, it is important to use titles respecting the hierarchy, remember that color and size issues can be resolved later using CSS.

    Regarding styles, I just have to comment on a more effective way to center the card:

    .main {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   height: 100vh;
}

    This is enough to align the card horizontally and vertically using flexbox.

    Again, congratulations on the solution and I hope you found my comment helpful.

    Marked as helpful
  • Dêvid Teófilo•240
    @devid8642

    Firstly congratulations on your solution.

    I have some considerations about your project:

    Regarding HTML, I believe it would be interesting to place the content about nutrients in a table instead of a list, from the point of view of HTML semantics this would be more correct. See more about tables in HTML here.

    As far as style is concerned, it is necessary to make some adaptations so that the page works on mobile. With CSS it is possible to do what we call responsive design, which is a design that adapts to different displays. To do this, the main resource we use are Media Queries. I believe that a good initial step to try to apply them to this page would be to reduce the width of the main for smaller displays.

    Try this and see the result, to test the page on a smaller display you can resize your browser window or even look in the browser's developer tools about responsive mode.

    I hope you found my comment helpful and again congratulations on the solution.

    Marked as helpful
  • Dêvid Teófilo•240
    @devid8642

    Firstly congratulations on your solution.

    I have some considerations about your project:

    It is interesting to structure the page content within a <main> tag instead of a section. As this type of card is self-contained content, it is interesting to place it inside an <article>. And finally, the card footer can be placed inside a <div>, since the <footer> tag is used for the page footer and not for the content footer. See more about the semantic elements of HTML here.

    Regarding the design, I believe it is interesting to make just a few adjustments. For example, increasing the size of texts, adding a border-radius in "Learning", changing the font weight to bold for the date and author's name and finally creating a shadow effect without using borders, to do this research on the box-shadow property.

    Again, congratulations on the solution, I hope you found my comment helpful.

    Marked as helpful
  • Dêvid Teófilo•240
    @devid8642

    Firstly, congratulations on the solution.

    I have some suggestions for your project:

    Consider structuring all the content on your HTML page using semantic tags, in this case <main> and <article> for the card. See more about semantic tags here.

    It's not interesting to use tags like <br> to position like you did, consider doing this in CSS because it breaks your layout. As you centered the card using position, depending on the display, the texts may end up leaving the card.

    I recommend that you remove the <br> and to center the card use the following, considering the card inside <main>:

    main { /* or .container */
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 100vh;
}

    Centering the card without using position and removing <br> will certainly ensure that the layout is more uniform across existing display varieties and facilitate responsive design.

    Even though you applied the sources to the project, you did not upload the assets directory to GitHub and therefore they do not load on the page.

    As this is a simple project, the responsive design probably became a problem due to the layout techniques you chose to use, I recommend using flexbox to center the card and without using <br> to position the texts (research the property text-wrap) you probably won't even need to apply any additional CSS rules in the mobile media query, just change the width of the card.

    I hope you found my comment useful, again congratulations on the solution.

View more comments