Recipe page

Community feedback

• 

  Petrit Nuredini•2,860

  @petritnurediniPosted 10 months ago

  Congratulations on completing your Recipe Page project! 🎉 Your dedication and hard work have paid off, resulting in a visually appealing and functional page. It's great to see you putting your skills into practice, and I have a few recommendations to help you enhance your project further.

  • Semantic HTML: Good use of semantic elements like <main> and <article>. Consider using <section> for the preparation time, ingredients, and instructions to further improve the structure and accessibility of your page. 📄

  • Responsive Images: In your CSS, you've made great use of media queries for responsive design. To further optimize, consider using the srcset attribute in your <img> tags. This will allow you to serve different image sizes based on the viewport, which is especially useful for mobile devices. 🖼️

  • CSS Best Practices:

    • Avoid over-qualifying selectors (e.g., h1.heading-primary can be just .heading-primary). This keeps your CSS more maintainable and your stylesheet smaller.
    • Utilize shorthand properties where possible to make your CSS more concise.
    • Consider organizing your CSS properties consistently (e.g., positioning, box model, typography, visual) for easier readability. 🎨

  • Performance: Ensure that your images are optimized for web use. Large images can significantly slow down page loading times, especially on mobile devices. Tools like TinyPNG can be helpful. 🚀

  • Accessibility:

    • Ensure that all interactive elements are accessible. For example, if any of your headings or images are clickable, they should be implemented as buttons or links.
    • Use alt attributes in images not just for description but also to convey the function if the image is interactive. 🖼️

  • Font Loading: It's great to see you using Google Fonts. Ensure that fonts are loaded efficiently to minimize render-blocking. You can use font-display: swap in your @font-face rule to enhance text visibility while fonts are loading. 🆎

  • Table Accessibility: For the nutrition table, ensure that it is accessible. Use <th> tags appropriately and consider adding scope attributes to your headers for better screen reader support. 🍽️

  • Cross-Browser Testing: Test your page across different browsers to ensure compatibility and a consistent user experience. 🌍

  • Keep Learning: Frontend development is an ever-evolving field. Keep learning new techniques, best practices, and technologies to continue growing as a developer. 🌱

  References for further learning:

  • For semantic HTML and accessibility: MDN Web Docs
  • For responsive images: Responsive Images Guide
  • For CSS best practices: CSS Guidelines
  • For performance optimization: Web Performance
  • For cross-browser testing: BrowserStack

  Keep up the excellent work, and remember, each project is a step forward in your journey as a developer. Looking forward to seeing more of your creations! 💻🌟

  Marked as helpful

  1
• 

  UG•140

  @0x-UGPosted 10 months ago

  Well done bro! This is clean. I'm following a course and we've not yet begun learning mobile designs yet. I can't wait to start.

  0