Best Practices

Conventions to Follow

# Conventions and Best Practices

# Filenames and Folders

  1. Keep all your file and folder names lowercase.
  2. Do NOT use spaces in your file or folder names. Instead use hyphens, underscores, or periods. Whichever you choose, do it consistently.
  3. Use meaningful names that other developers can understand.
  4. HTML homepages are always called index.html. This is the default name for every folder.
  5. Put your CSS files into a css folder.
  6. Put your JavaScript files into a js folder.
  7. Put your images into a img folder.
  8. Put your local fonts into a fonts folder.
  9. Put audio and video files into a media folder.

# HTML

  1. Use lowercase for your tags and attributes.
  2. Use double quotes for around all attribute values.
  3. Use the HTML5 declaration and root tag for every webpage.
<!DOCTYPE html>
<html lang="en"></html>
1
2

# CSS

  1. Use rem units for font-sizes and media query break points.
  2. Use ch units for line lengths in paragraphs or form labels.
  3. When creating mastheads and banners that need a height, use vh values.
  4. The Viewpoint units vw, vh, vmin, and vmax are good for layout min and max sizes.
  5. CSS classnames should be descriptive and indicate the part of the interface they style. Avoid things like p1.

# JavaScript

  1. Add lots of comments. Explain your code to yourself and others.
  2. Variable names should be meaningful. Avoid abbreviations.
  3. Variable names made from multiple words should use camelcase.
  4. Having more lines of code that are easy to read and understand, is better than trying to use shortcuts to save a couple bytes and ending up with code that is hard to read and understand.

# Git

  1. Use git commit frequently.
  2. Commit messages should always be meaningful. Avoid things like "Updated script".
  3. git status will help you see how much you have edited since your last commit.
  4. Always start with git pull.
  5. Push to Github early.
  6. Invite your instructor to your private repo early.
  7. Test early. Test often.

# Comments

  1. Add lots of comments to your CSS and JavaScript and Git Commits. The comments help other people when reading your code and help you when you come back to edit your code.
Last Updated: 4/18/2023, 12:51:40 PM