Recipe Page Challenge

Community feedback

• 

  P

  Adrian Trandafir 🎮•330

  @XenoMeePosted 10 months ago

  Hello Gabriella 👋! Your solution looks great and like the design.

  Congrats for completing this challenge! 👏

  I have a few suggestions to improve your solution :

  1.HTML 📄

  • You can wrap your whole recipe component by using article tags since its content have enough context to stand on its own and doesn't rely on any other information.
  • You can place the recipe image below the h1 and first paragraph and visually change its placement using order property from flexbox or grid. Doing this will enhance your page accessibility so that people who use a screen reader know that this is a recipe website and get their interest.
  • For the Preparation time text, you can use h3 tags and also place the container below the Ingredients container while visually changing its order so that it's above. This keeps the markup semantic and also follows the heading rules.

  2.CSS

  • Try to build the website using the Mobile First approach and scale to desktop version.
  • For your article container, you can set a max-width instead of a % width. That way, you allow it to shrink for small devices and cannot grow more than the max-width value you set.

  Hope this information helped you! 😊

  Happy coding!

  Marked as helpful

  1

  ---

  

  P

  Gab•170

  @gab-holikPosted 10 months ago

  Hey Adrian 👋

  Thank you so much for the feedback and taking the time to check my code. I really appreciate it. I just updated my code based on your suggestions. I initally thought visually changing the order of the content might actually cause accessibility issues, but it makes sense to do it. Thank you again 🐾

  1
• 

  Alex-Gamarano•350

  @Alex-GamaranoPosted 10 months ago

  Hi Daniella, It depends...

  The <strong> element is used to identify text that is of greater importance than the surrounding text.

  <strong> tags are an important part of search engine optimization. They can help highlight certain words and phrases and help search engine algorithms. They can also help improve the reading flow of web content and enhance the user experience. Styling a word or piece of text with CSS might not be practical. However your design might require a direfent font-weight relation. Then you should use CSS to adjust.

  Best regards,

  Marked as helpful

  1

  ---

  

  P

  Gab•170

  @gab-holikPosted 10 months ago

  Hey Alex,

  Thanks a mill. It makes sense to use the <strong> element to highlight the importance of certain words when needed.

  1
• 

  Petrit Nuredini•2,860

  @petritnurediniPosted 10 months ago

  Congratulations on completing your "Recipe Page" project! It's a great accomplishment to build a web page that's both functional and visually appealing. Here are some best practices and suggestions to refine your project further:

  1. HTML Structure and Semantics:

     • Use semantic HTML elements to enhance the structure and accessibility of your content. For example, consider using <article> for individual recipes or <section> for different parts of the recipe like ingredients and instructions.
     • Example: <section class="header"> can be <header class="recipe-header">.

  2. CSS Styling and Responsiveness:

     • Consistent Styling: Ensure consistent styling across different sections for a cohesive look.
     • Responsive Design: Your use of media queries is commendable. Continue testing on various devices for a seamless user experience.
     • Typography: Experiment with font sizes for better readability on smaller screens.

  3. Accessibility:

     • Alt Text: Good job including alt text for images. Ensure it's descriptive to improve accessibility for screen reader users.
     • Keyboard Navigation: Ensure that the site is navigable via keyboard, especially for interactive elements.

  4. Performance Optimization:

     • Optimize Images: Consider using modern image formats like WebP for better loading times.
     • Minify CSS and HTML: For production, minifying files can improve load times.

  5. Code Quality and Organization:

     • Modular CSS: Consider breaking your CSS into smaller, more manageable files, especially if your project grows.
     • Comments: Use comments to describe sections of your HTML and CSS for better readability.

  6. SEO Best Practices:

     • Meta Tags: Include descriptive meta tags in your HTML for better SEO.
     • Page Title: Make sure the page title is descriptive of the content.

  7. Learning Resources:

     • For HTML and CSS best practices, check out MDN Web Docs.
     • For responsive design tips, CSS Tricks is a great resource.
     • To learn more about accessibility, visit Web Content Accessibility Guidelines (WCAG).

  Keep up the great work and continue to challenge yourself with new projects. Each project is a step forward in your web development journey. Don't hesitate to share your work and seek feedback from the community. Your progress is impressive, and I can't wait to see what you create next! 🌟👩‍💻🚀

  Marked as helpful

  1

  ---

  

  P

  Gab•170

  @gab-holikPosted 10 months ago

  Hey Petrit,

  Thank you so much for reviewing my code and for the super helpful tips. I love this community. You always learn something new and useful. I took your advice and updated my code. Even changed the image from jpeg to webp. I definitely need to learn a lot more about opimazation and accessibility. Thank you so much again for your help and pointing me in the right direction 🐾

  0