Responsive omelette recipe page

Community feedback

• 

  RogerTito455•160

  @RogerTito455Posted 3 months ago

  Hey there, great job on the code! You've done well in structuring your HTML and CSS. Here's some feedback to help you polish it further:

  HTML: Main Element:

  You've done well wrapping the content in a <main> element, which is excellent for accessibility. However, make sure that the <header> and <footer> elements are placed outside of <main> if you had them. This practice helps screen readers better understand the structure of your page. Image Alt Text:

  The alt text for your image could be improved for clarity and accessibility. Instead of "Omelette picture," consider something more descriptive like "A plated simple omelette." Avoid phrases like "picture of" because screen readers already announce that it's an image. Typo Corrections:

  There are a few typos in the HTML content. "Preperation" should be "Preparation," "tdis" should be "this," and "buffer" should be "butter." These small errors can detract from the professionalism of your page. Consistent Tag Usage:

  You're reusing the recipe-page__ingredients class for multiple sections. It's better to use a unique class for each section, like recipe-page__instructions and recipe-page__nutrition, to avoid confusion and improve maintainability. CSS: CSS Reset:

  Good job including the CSS Reset! It ensures that your styling is consistent across different browsers. Font Family Fallback:

  While you have specified the correct font-family, adding a fallback font ensures your text remains readable even if the primary font fails to load. Modify the line to: font-family: 'Outfit', sans-serif;. Body Padding:

  I like that you've centered the content using flexbox, but adding a padding of 1rem to the body will ensure that the card doesn't touch the edges on smaller screens. Min-Height on Body:

  Instead of setting a fixed height: 100vh; on the body, use min-height: 100vh; to prevent content from being cut off if it exceeds the viewport height. Rem Units for Responsiveness:

  You've used rem units effectively, but the width: 30%; on .recipe-page can be more consistent with other sizes by setting it to max-width: 20rem; to maintain a more consistent look across different screen sizes. Image Styling:

  On the image, you've used aspect-ratio which is great. Add display: block; and change width: 100%; to max-width: 100%; to prevent the image from overflowing its container. Class Naming and Selectors:

  Consider adding specific classes to elements instead of relying on descendant selectors like .text-container h2. For example, use .recipe-page__title directly on your <h2> to improve readability and maintainability of your code. Media Queries:

  You've included a media query for screens smaller than 1024px, which is good practice. Ensure you're using rem or em for media query breakpoints rather than px for better scalability. Miscellaneous:

  Some CSS properties could benefit from additional tweaking, like reducing the padding inside .recipe-page__header__time or increasing the gap between list items for a cleaner look.

  Marked as helpful

  0

  ---

  

  Abdukhoshimov Khondamir•40

  @iCloudBMXPosted 3 months ago

  @RogerTito455 Thanks for your feedback.

  0