Recipe Page

Community feedback

• 

  P

  Jan•290

  @Jan-Dev0Posted 2 months ago

  Nice effort on your first design! Here are a few suggestions that might help improve the structure and styling of your project:

  1 Improve HTML Structure:

  • Use Container Elements: To better organize your content, consider using a <main> element to wrap all your sections. This helps group related content together:

  <main>
   # Your content here 
  </main>
  

  • Semantic Elements: Use <section> elements to separate different parts of your content, and wrap the entire content in an <article> element:

  <article>
    <header>
     #  Image and header 
    </header>
    <section>
      <h1>Simple Omelette Recipe</h1>
      <p>An easy and quick dish...</p>
    </section>
    # Additional sections 
  </article>
  

  2 Use of HTML Elements:

  • IDs vs. Classes: It's generally better to use classes rather than IDs for styling, as classes are more versatile:

  <div class="img-box"></div>
  <div class="item-box">
    <div class="text">
      <h2>Preparation time</h2>
    </div>
  </div>
  

  • Semantic Tags: Use <strong> for emphasizing text rather than <b>:

  <strong>Total:</strong> Approximately 10 minutes
  

  3 CSS Practices:

  • Use Flexbox: Flexbox can be very useful for layout and centering content. It makes managing layouts much easier:

  body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
  }
  section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
  }
  

  • Avoid height: 100% and width: 100%: These properties may not always be necessary, especially when using Flexbox or Grid. Relative units like rem or em often work better for responsive design:

  section {
    max-width: 80%;
    margin: auto;
  }
  

  Overall, you're on the right track. Keep experimenting with these suggestions, and you'll continue to improve.

  0