You did well to use JavaScript. I wanted to too but I told myself I had to try without it and it wasn't an easy task. Congratulations on your project, it is pixel perfect.
Hello, I'm looking at the code of your project and I would like to help you improve it.
First of all, congratulations on completing this project.
Secondly, I'll give you some ideas to improve it:
Try to set the width to 100% on your image so that it takes up the entire width or use a background image in cover mode then you adjust the width according to the device.
For your class="line", you could have directly used the self-closing <hr> tag. It does the job well.
For the nutrition section, I would have rather used a <table> tag
And to really increase the readability of the semantics, I will use <section> tags for each section of the page ** Ingredients ** Instructions ** Nutrition **
I don't know what to say about this project. You are using a list. Personally, I just put links. Maybe for semantics it's better to put a list. Otherwise, I think it would be wise to add a <main> tag for semantics.
The solution offers semantic HTML. The layout is truly almost pixel perfect. On the other hand, I don't understand why you used a list for your card. Can you explain it to me?
Je pense qu'utiliser un preprocessor comme Sass pourrait améliorer la lisibilité du code et la maintenabilité. Je ne sais pas si c'était fort utile d'utiliser des Grid mais pourquoi pas. C'est une très belle réalisation, très proche du template.