HTML and CSS solution, Website Responsive

Hello there! Congratulations on completing your first challenge. 🎉

I noticed it was finished a couple of months ago, and I'm pleased to be the first to provide feedback.

I'll consider your previous comments and the areas where you seek assistance as valid. Please don't hesitate to ask if you require further clarification. This also presents a wonderful opportunity to revisit this challenge and enhance it with the experience you've gained since then.

Before jumping into responsiveness, please correct the color of 'Preparation Time' to color: hsl(332, 51%, 32%);. This will improve the readability of the title.

Regarding responsiveness, we have a few things to be mindful of:

• We should allow our content to shrink and grow based on the content but also be able to control the max and min width and height of elements.

  • Example:

    .card {
      max-width: 375px; /* The maximum width that a .card could have is 375px, but the card still able to have a 360px. */
      width: 100%; /* By setting the width with 100%, we ensure our .card will always occupy all available space on the screen, in that case 375px */
    }
    

• As we know our contents could grow and shrink based on the width, we essentially want the same thing to happen with our height. By setting a fixed height, we ended up getting contents overflowing the limits of the parent. So, in most parts, we'd want to set a height of 100%, so the height of the .card will increase based on the wrapping of the content (a text as an example).

I found these two great documentation resources to know a little bit more about the max-width and width properties:

1. Web.dev - Sizing Units
2. MDN - max-width reference

I also have a few things about your HTML and CSS:

• We should avoid using divs as much as possible in our code since it is generic HTML and doesn't have much accessibility for screen readers.

  • Instead of using a <div> to represent and create the card style, you could use an <article> tag.
  • Prefer to use <section> when dealing with the same article but in different sections, like 'Preparation Time', 'Ingredients', and 'Instructions'.

• About your CSS, prefer to use classes and specify selectors to style, as it maintains great readability (example: article.card { ...your_css_code }) and also prevents having the same id on the page.

  • By using the CSS specifier, you could have generic styling for sections inside the article and could style the sections specifically based on the needs, as an example, change the background-color of the 'Preparation Time' section.
  • Using more selectors, you could remove the last border of the table by using the :not selector combined with :last-child. Example:

    section.recipe table tbody tr:not(:last-child) {
      border-bottom: 1px solid var(--light-grey-color);
    }
    

    or you could use :last-child to remove the border:

    section.recipe table tbody tr:last-child {
      border-bottom: none;
    }
    

And you can learn more about semantic HTML and CSS selectors here:

• Semantic HTML:
  • Web.dev
  • W3 Schools
• CSS Selectors:
  • Freecodecamp.org article
  • W3 Schools
  • MDN Web Docs
  • MDN Web Docs - CSS Specificity

I hope this feedback helps you to improve your skills further. Keep up and happy coding!

good job