Course File and Folder 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.
"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. Dealing with files discusses some issues
you should be aware of so you can set up a sensible file structure for your website." - MDN
Prepare
- The file and folder naming conventions 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 defined a standard convention for naming files and folders in addition to other workflows. These conventions may vary as each organization will have their own file management guidelines and 'best' practices.
- Review this example: Google developer documentation style guide
- Read: 📃Dealing With Files - MDN web docs
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:
services.html - Do NOT use spaces in names. Use dashes instead.
Spaces are interpreted obtusely by user agents, therefore, do not use them. The Hypertext Transfer Protocol (HTTP) ignores spaces, except in file names. In file names, it replaces a space with a symbol—"
%20." This makes URL's look confusing and can also lend itself to confusion in the mind of site visitors. So avoid using spaces. Instead, if you have to create a visual space, use hyphens/dashes.Example:design-document.html - Do NOT use special characters.
Special characters often mean specific things to computers, so just avoid using them completely in the naming of files and folders.Special character examples (avoid these):
<,>, \, /, #, ?, ! - Use as short and as meaningful (semantic) of names as possible.
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.Example:
winter-scene-sm.pngvs.image13-v123523brokenbranchlifeimagery w200x200.png - In this class, the standard folder names for asset sub-folders are:
-
- styles - Folders with this name contain our CSS files.
- scripts - Folders with this name contain our JavaScript files.
- images - Folders with this name contain our images.
Whenever an image does not show up or a JavaScript file fails to run, first check the file
name and then, the file path. Sites use relative paths, meaning, the path does not start with
a
protocol like https:// ) for local resources and absolute paths (starts with a
protocol like
https://) for external resources. Understand the relationship between file
locations.
📄 Quick Reminder About File Paths
📄 Quick Reminder About File Paths
Submission
There is nothing to submit. You will be expected to follow these naming conventions and standards.