@XenoMee
Posted
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 usingorder
property fromflexbox
orgrid
. 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
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 🐾