Recipe Page

Hello Srishti👋

Congratulations on successfully completing the challenge! 🎉

It's great to see you making these project regularly, I wish I had the consistency like that 😴.

Anyway,

First Of All, A word of advice,

When you want to receive a clear and correct answer, You should ask clear and correct question or explain your problem clearly. It's most important in Coding as well.

Here in your sentence

I really struggled with figuring out the correct tag for preparation time section. I was thinking of using tag but thought maybe it won't be apt for this so ended up using section tag but then the heading for prepartion time was smaller compared to other hedings so had to use for that but then that would mean having an tag before so I put prepation time section in the end in html and then used css to bring it at the top.

I really lost track of what you were saying 🙄. So Keep working on it.

Now for your answer 😎.

For this Question

I would like help with the preparation time section how could i have done that or did I do it correctly or not?! And also the semantics of other things as well.

• Your preparation section is well written, with all the h3 and li.
• The semantics of other things looks good as well
• I would like to know why did you choose to use article for this? Just curious.
• Other than that everything looks good.

Great Job

Now For This Question

And also the image thing for mobile I used media query to make position absolute was that the right approach?!

• Well I would say, at the end of the day, if its working, its good 😂.
• Though Using position: absolute may not be the best approach.

-The reason you needed to use position: absolute was simply because you have this in your code,

(max-width: 38em) { main { width: 100vw; border-radius: 0; padding-top: 43vw; } }

• this padding is stopping your image to stick to the top

Another is

main { width: 51vw; background-color: hsl(0, 0%, 100%); padding: 2rem; border-radius: 1rem; }

• Here this padding is stopping your img to cover all the width of the mobile screen.

Here is what you should take into consideration

• You can just simply separate the image from the rest of the part, and can create two div, one will have the img inside of it and another will have the rest of the part.

• By doing this you can manipulate the margin and padding of the both div independently. Which will help you make the design responsive more easily.

• You can just remove all the margin from the div that has img inside of it and make it cover all the width of the screen on smaller devices.

• That was one approach that I used, You can see it here Github

Well that was all, It sure took a lot of time to write this.

If you need any feedback or suggestions, I am happy to help

I'll be looking forward to your next project, until then

Good Work, Keep Grinding and Have Fun Coding!

@rahulkumar215 Hi, first of all thank you for the thorough response! And now that you mention I can see how that part sounds confusing. I sort of started rambling during that part😅😅.. I'll word my problem better next time!

I was trying to ask about whther I could have used aside tag for the preparation time section.

As to why I used article tag, I thought that since the recipe page is like an independent, complete content on its own so it might be apt to use article tag.

I knew something was off with using position:absolute. It wasn't the best approach for this. The appraoch that you suggested sounds so much more better and more instictive to deal with the image. It's so simple and I made mine so hard! 😅😅 Thank you for sharing the code as well that helped too.

I'll keep your tips in mind for the next project! Thank you so much for spending your time looking through the code and giving a thorough response!