Recipe page Challenge

Community feedback

• 

  Jenna•230

  @NandiniCooppenPosted 10 months ago

  Hello thilisadiki,

  Congrats on completing your first challenge👏

  To center the card properly, you might want to use CSS flexbox or grid.

  Example using CSS Flexbox:

  Add the following code to the body:

  body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
  }
  

  You can thus remove the margin from your style :

  .main-card {
      margin: 6rem auto;
  }
  

  Helpful links:

  CSS Flexbox :

  Link1

  Link2

  CSS grid:

  Link1

  You might want to have a look at the following as well:

  Read about accessibility here

  Read about semantics here

  Read about headings here

  I hope these will be helpful to you 😉

  Good luck going forward and happy coding 🙂

  0
• 

  Dêvid Teófilo•240

  @devid8642Posted 10 months ago

  Hello, firstly congratulations on the solution and continue improving it (I see that you have already centered the card), but I would like to bring a few more points for you to consider:

  Regarding the structuring of the content, that is, the HTML: consider using appropriate titles according to their semantics and not the design they present, as this can be adjusted with CSS. So the first title of the page, for semantic and SEO reasons, could be an <h1> instead of an <h2>. Another important point is the table, consider using <th> instead of <td> for table headers.

  Regarding design and layout, I believe you are still working on it, if you have any questions feel free to comment here.

  0