Responsive Recipe Page using HTML and CSS

Community feedback

• 

  Krushna Sinnarkar•1,100

  @krushnasinnarkarPosted 4 months ago

  Report: Suggestions Based on Submitted Solution and Improvements Needed

  Fix non-standard tags: The <break> tag is not standard HTML. Use <br> or CSS for spacing.

  Alt text for images: Ensure that the alt attribute for the image provides a useful description.

  <img class="omelette" src="./assets/images/image-omelette.jpeg" alt="A delicious omelette on a plate">
  

  Improve spacing and padding to make it more similar to the design: Ensuring that text and interactive elements are easily readable and usable on small screens will improve the overall user experience. Check the design specifications and adjust the spacing and padding to match the intended design.

  Remove Underline from Heading and Align Left: According to the design specifications, the heading "Simple Omelette Recipe" should not be underlined and should be aligned to the left instead of centered.

  h1 {
      font-family: 'young serif', serif;
      text-align: left;
  }
  

  Change the background-color and color of prepTime: The current background color does not match the design specifications. Update the background color to ensure consistency with the design. Also the text color for the preparation time section should be updated to match the design specifications.

  prepTime {
        background-color: hsl(330, 100%, 98%);
        color: hsl(332, 51%, 32%);
  }
  

  Make Total, Preparation, and Cooking as Bullet Points: Currently, these items are presented as paragraphs. Updating them to be bullet points will improve readability and align with the design.

  <div class="prepTime">
      <h2>Preparation time</h2>
      <ul>
          <li><b>Total:</b> Approximately 10 minutes</li>
          <li><b>Preparation:</b> 5 minutes</li>
          <li><b>Cooking:</b> 5 minutes</li>
      </ul>
  </div>
  

  Update Color for Instruction List Numbers: The current numbering color does not match the design specifications. Updating the color using the ::marker pseudo-element, which allows you to style the list markers (numbers or bullets) directly.

  .instructions ol::marker {
      color: hsl(14, 45%, 36%);
  }
  

  Update Color for Bold Text in Instructions: The bold text in the instructions should use the specified color to match the design specifications.

  .instructions li b {
      color: hsl(24, 5%, 18%);
  }
  

  Marked as helpful

  0

  ---

  

  MachoCamacho1•70

  @MachoCamacho1Posted 4 months ago

  Thank you for your input! I will make sure to look into it.

  @krushnasinnarkar

  0