WDD 231 | File and Folder Naming Conventions

W01 Learning Activity: Naming Conventions

Overview

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

Prepare

The following file and folder naming conventions are the best-practice rules for this course. You will be expected to apply them to all files and folders created in your course work.

Note that most organizations have defined a standard convention for naming files and folders in addition to other workflows. These conventions may vary as each organization will have its own file management guidelines and best practices. Regardless of the choice, having consistency across an organization is very important.

Naming Conventions

Use all lowercase letters, for example, products.html

Platforms and systems handle case sensitivity differently. Windows and macOS usually treat Photo.JPG and photo.jpg as the same file, but most web servers, including GitHub Pages, do not. A page can work on your computer and break once published.
Do NOT use spaces in names. Use dashes instead, for example, design-document.html

Spaces are not allowed in URLs, so browsers encode each one as %20. This makes URLs hard to read and easy to mistype. Use hyphens instead.
Do NOT use special characters in names, for example, <, >, \, /, #, ?, !

Special characters often mean specific things to computers, so just avoid using them completely in the naming of files and folders.
Use names that are as short and as meaningful (semantic) as possible, for example, winter-scene-sm.png is better than image13-v123523brokenbranchlifeimagery w200x200.png

Short, meaningful names save you, other developers, and site visitors from having to remember long complicated names for files and folders. When meaningful, they also help predict the purpose or nature of the file or folder contents when working with those files or folders.
In this class, the standard folder names in each site folder are:
- styles – Folders with this name contain the CSS files.
- images – Folders with this name contain the images.
- scripts – Folders with this name contain the JavaScript files.

Optional Resources

Dealing With Files – MDN