@R3ygoski
Posted
Hello Khalid, good job on conclude your project, it's very good.
About media query, I highly recommend to use mobile-first workflow, because it's more intuitive, and easy to use, in this workflow you start from small screens, like mobile (320px or 375px), and then you add media query to adapt for larger screens, it's more intuitive because you just need to use min-width, it's help a lot.
About Accessibility, this is a very big topic, but I will focus in Semantic HTML and Font-size, I noticed you was not using semantic HTML, I will show an example how you could adapt your project to semantic HTML:
I choose this snippet to show you:
<div class="recipe">
<div class="recipe-img">
<img src="./assets/images/image-omelette.jpeg" alt="omelette">
</div>
Here instead of using <div class="recipe"> you could use <article>, instead of use <div class="recipe-img">, you could use <figure>. If you want to see more about Semantic HTML, here's a link: W3School - Semantic HTML.
Now about font-size, I highly recommend you to use rem units, because it's can adapt to users font size settings, on the other hand px are absolute, they don't change they size based on users font size settings.
Again, congratlations for you project, it's very good, keep practing and improving. If something I said was unclear, please, comment below and I will try to help in better possible way.
Marked as helpful
