How to set a relative path to the current folder?

The Art of Relative Paths

Nuts and Bolts of Relative Paths Syntax

• Use . to represent the current directory
• Add ./ prior to linking a file directly in the current directory
• The ../ expression lets you move up one directory level
• Starting with a single / refers to the root directory not the current one

Doctype and Its Impact on Relative Paths

• Doctype can impact how your browser handles relative paths
• Prior to going live, test your links with different doctypes to prevent surprises

Web Server Interpretations

• Different web servers can have variances in how they interpret paths
• To avoid path resolution differences, test on a local environment and a live server

Skilled Navigation

• You can navigate directories using relative paths without needing to specify the folder name
• To prevent broken links, verify the correctness of your paths whenever your website files are moved or restructured

Shelf the Files Right

Crafting precise and dependable links ensure resources are fetched efficiently as your website expands:

• Consistent naming conventions aid in path predictability
• Double-check links post moving files to ensure they're not on a "404 vacation"
• Enable dev tools in browsers for a speedy debug session on path issues

Paths Worth Pondering

Root-relative paths

• Begins with /, rooted at the domain's base, ignoring the current folder
• Example: /images/logo.png -- Counts floors from the basement, irrespective of which room you're in

Protocol-relative paths

• Starts with //, adopts the page's protocol (http to https)
• Handy when including assets matching the page's security protocol

Pro-tips & Gotchas

• Though the ./ can often be skipped, being explicit has its perks
• Using ./ is like saying "Hey, don't mix up my ./file for a /route!". It's just safer this way.
• Modern development tools auto-resolve paths, understanding the nuts and bolts is still crucial for DIY debugging