Recipe page (non-semantic html)

Community feedback

• 

  Petrit Nuredini•2,860

  @petritnuredini

  Posted over 1 year ago

  Congratulations on completing your Recipe Page project! Your dedication and hard work are evident. Here are some best practices and improvements to consider:

  1. Semantic HTML:

     • Use semantic elements such as <header>, <section>, <article>, and <footer> for better structure and readability.
     • For the recipe, consider using <article> for the main recipe and <section> for sub-sections like ingredients and instructions.
     • Utilize <figure> and <figcaption> for images with captions.

  2. Refactoring CSS:

     • Group common styles to reduce repetition. For example, text styling that repeats can be assigned to a common class.
     • Use CSS variables for colors and fonts to make future changes easier. Learn more about CSS variables here.

  3. Handling Images:

     • Use responsive images with srcset and sizes attributes to ensure images look good on all devices.
     • Consider lazy-loading images for better performance.

  4. HTML Structure:

     • Organize your HTML structure logically. Group related elements together and use indentation consistently.
     • Avoid deep nesting where possible to keep the structure clean and readable.

  5. Centering and Spacing:

     • Use Flexbox or CSS Grid for more efficient and responsive layouts.
     • For centering, flexbox with justify-content and align-items can be very effective.

  6. Accessibility:

     • Ensure all images have meaningful alt attributes.
     • Use proper heading levels (<h1> through <h6>) for better accessibility.

  7. Responsive Design:

     • Test your page at various viewport sizes and make necessary adjustments.
     • Use media queries effectively to ensure a good user experience on all devices.

  Keep up the great work and continue to refine your skills. Every project is a step forward in your development journey. Remember, practice and continuous learning are key to improvement. Keep coding and exploring new challenges!

  For further learning and improvement, consider resources like MDN Web Docs and CSS-Tricks.

  00