When to use forward slash in file path?

You might ask, Why am I writing this blog?
Because I recently struggled for like hours. While building my capstone project 2, everything was going fine locally but when I merged my branch to main and checked site on Github pages then nightmare began. My responsive web app suddenly became static web app(links were not working, image were broken and on clicking DevDuckling it was showing '404') I messed up in file paths of links and images

I will quickly explain when you do not need and need to use / and ../
In below will be the example code, I have used my favorite anime characters as file names.

So Makima wants to have Naruto's picture in her file. She would look for path which is above current folder. Then she might use ../

<section>
<h1>../ means file is present in (one level above or above current folder)</h1>
<img src="../naruto.jpg" alt="naruto">
</section>

Now Makima wants to have Jiraiya's picture in her file. She would look for path which is on root file(top level). Then she might use /

<section>
<h1>/ is top most level that is root file</h1>
<img src="/jiraiya.jpg" alt="jiraiya">
</section>

In VS code press ctrl + space key gives you suggestions that is helpful.

Thank-you for reading this blog! I will try to write next blog soon and forgot to mention it was my first blog to dev.to haha. If anyone has suggestions, happy to apply on next blog! As every famous creator says react, comment, share and follow. Happy codding!