Files, directories and naming conventions

README.md

Files, directories and naming conventions

File and directory management will be one of your first challenges as a programmer. As you work on your craft, you will be generating many files and projects (hopefully) and your goal as a developer is to be able to find your code when you need it.

Prerequisites

• Dealing with files
• Absolute vs Relative file paths
• Terminology: Files, directories and paths

---

File naming conventions/guidelines

• Files should be named consistently
• Filenames should be short but descriptive (<25 characters)
• Use alpha numeric characters when possible
• Use underscores or hyphens instead of spaces
• In general, use lower case characters. Note: exceptions include README files, operating system directories (Users, Desktop, Documents, etc)

Examples

• GOOD
  • /Users/tony/Documents/work/resume-2021.pdf
  • Users/tony/Documents/school/projects/project-1/index.html
• BAD
  • /Users/tony/Desktop/Resume 2021.pdf
    • In general, don't store common files in your Desktop or Downloads folders. This is what the Documents folder is for.
  • Users/tony/Documents/ABC University/Class Projects/Project 1/index.html
    • Using spaces is considered bad practice for paths that you will be accessing from the command line.

---

Setting up your Project workspaces

A Git "repo" is really just a fancy folder, although, it's important that you don't create a repo inside another repo so file organization is important.

Personal/professional/school Projects

It's recommended that you create a dedicated workspace folder that will contain a flat list of repos (fancy directories) for your projects. If you have multiple contexts (i.e. personal vs work) that deal with code, you can make a separate folder for each.

Example structure:

personal-projects/
  ├─ portfolio-website/
    ├─ css/
    ├─ images/
    ├─ js/
    └─ index.html
  ├─ cool-idea-1/
  ├─ flexbox-experiment
  └─ moms-baking-website/

Daily code

For coding boot camps, courses and coding challenges that create "throw-away" code each day, it often makes sense to organize your code by date so it doesn't get in the way of your longer-term projects:

dailies/
  ├─ 2021-10-04-intro-to-git/
    ├─ hello-world/
    ├─ my-first-website/
    └─ etc/
  ├─ 2021-10-05-git-collaboration/
  ├─ 2021-10-06-intro-to-html/
  └─ 2021-10-07-etc-etc/

Or maybe it makes more sense to organize by course or module:

school-projects/
  ├─ html-101/
  ├─ css-101/
    ├─ d01-typography/
      ├─ excercise-1/
      └─ excercise-2/
    ├─ d02-flexbox/
    ├─ d03-css-grid/
    └─ d04-etc/
  └─ js-101/

Choose a system that works for you but be consistent!

---

Other directory structure conventions

Static websites

The first type of project you will probably create is a static website. Below is an example of a common structure you'll see for most web projects. Notice that there's an index.html file in the root of the project. This is required for services such as GitHub Pages.

web-root
  └─ css/
    ├─ fonts.css
    ├─ main.css
    └─ reset.css
  └─ images/
    ├─ logo.png
    └─ profile-pic.jpg
  └─ js/
    └─ client.js
  ├─ about.html
  ├─ contact.html
  ├─ products.html
  └─ index.html

Express project

Other technologies (like Node below) will require their own directory structure. Follow the documentation for your given technology for more details.

project-root
  ├─ models/
  ├─ node_modules/
  ├─ public/
  ├─ routes/
  ├─ views/
  ├─ package-lock.json
  ├─ package.json
  └─ server.js