Mobile-first responsive recipe page

If you want to learn about naming conventions in CSS I encourage you to learn BEM. If you don't know about it here is a VIDEO that might help.

And as for semantic HTML code here are some tips:

• Use HTML5 Elements: Replace generic <div> tags with <section>, <article>, or <footer> where appropriate.
• Use <figure> and <figcaption>: Wrap images in <figure> and add <figcaption> for captions.
• ARIA Roles: Add ARIA roles like role="main" for better accessibility.
• Semantic Table Structure: Use <thead> and <tbody> in tables for better structure.
• Reduce Redundant Classes: Minimize unnecessary classes to simplify CSS.
• Consistent Heading Levels: Ensure heading levels (<h1>, <h2>, etc.) are sequential and logical.
• Accessibility: Add alt text for images and ensure color contrast meets accessibility standards.

Hope you found this comment helpful 💗

Good job and keep going 😁😊😉