With the help of Html and css and with just visual studio code

Community feedback

• 

  Alaa Mekibes•2,060

  @alaa-mekibes

  Posted 6 months ago

  Hi @Sammy-dev-eng. Congratulations on completing this challenge 🎉

  Just i see a few points you can fix it :

  1. Body tag:

  • Add padding top and bottom to the body, for example padding: 6.25rem 0; . I and set it to 0 on mobile like this :

  @media (max-width: 375px) {
    body {
      padding: 0;
    }
  }
  

  • Use css Variables for the colors, font size, ... For exemple :

  :root {
    --White: hsl(0, 0%, 100%);
    --Stone-100: hsl(30, 54%, 90%);
    --Stone-150: hsl(30, 18%, 87%);
    --Stone-600: hsl(30, 10%, 34%);
    --Stone-900: hsl(24, 5%, 18%);
    --Brown-800: hsl(14, 45%, 36%);
    --Rose-800: hsl(332, 51%, 32%);
    --Rose-50: hsl(330, 100%, 98%);
    --size-paragraph: 1rem;
    --padding: 6.25rem;
    --margin: 1.5rem;
  /* Your others variables */
  }
  

  • So your final body will be :

  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    text-align: left;
    background-color: var(--Stone-100);
    font-family: 'Outfit', sans-serif;
    color: var(--Stone-600);
    padding: var(--padding) 0;
  }
  

  2. Titles:

  • change the <h1> color to var(--Stone-900) like the original design. You should start with H1 not H2

  • Change "Preparation time" title to var(--Rose-800) and make it H2 consider the order , and give its section .preparation a padding: 20px 30px.

  • Change other titles to h2 and set the color: var(--Brown-800).

  3. Container:

  • Delete max-width: 100%; and width: 100%; from .container adn add flex-basis: 800px i think 800px is good. Don't worry it will be responsive.

  4. Ul and li:

  • You can change the ul points by using list-style-type: square;.

  • You can change the li points by using:

  li::marker {
    color: var(--Brown-800);
  }
  

  • Add padding-left to the ul.

  5. Use table:

  • The last section you use ul, you have to use table.

  Here is my solution to this challenge: Recipe Page.

  I hope you find these tips useful!!

  00

  Marked as helpful