WDD 130 | Course File and Folder Naming Conventions

Course File and Folder Naming Conventions

Overview

When working on the web, there are numerous things that affect the operation of the files, such as the browser, the protocol(s), the operating system, the language(s), etc. While many of these are out of your control, you can keep your work consistent and manageable through standard file and folder naming conventions.

"When you're building a website, you need to assemble these files into a sensible structure on your local computer, make sure they can talk to one another, and get all your content looking right before you eventually upload them to a server." - MDN (Mozilla Developer Network Reference)

Prepare

The file and folder naming conventions outlined here will be considered 'best-practice' rules for this course. These rules should be applied to all files and folders created in your course work.

Note that most organizations have their own file management guidelines and best practices, including conventions for naming files, folders, and other workflows. These conventions may vary from one organization to another.
File Path Essential Training

Naming Convention Rules

Use all lowercase syntax.

Platforms and systems handle case sensitivity differently. Case sensitivity is an important concept to understand when managing files and folders.
Example: products.html
Do NOT use spaces in file and folder names. Instead, use hyphens -.

Spaces are handled inconsistently by user agents so do not use them. The Hypertext Transfer Protocol (HTTP) ignores spaces, except in file names. In file names, it replaces a space with this syntax: "%20" which syntax is confusing. Avoid using spaces and instead, if you want to create visual space, use hyphens.
Example: design-document.html
Do NOT use special characters.
Special characters often mean specific things to computers, so do not use them in the naming of files and folders.
Special character examples (avoid these): <,>, \, /, #, ?, !
File and folder names should be as short and meaningful (semantic) as possible.

Short names save you, other developers, and site visitors from having to remember long complicated names for files and folders. When meaningful, names can also help predict the purpose or nature of the file or folder contents.
Example: winter-scene-sm.png vs. image13-v123523brokenbranchlifeimagery w200x200.png
In this class, the standard folder names for sub-folders are:
- styles - Folders with this name contain CSS files.
- images - Folders with this name contain images.

Optional Resources

Dealing With Files - MDN (Mozilla Developer Network Reference)