Skip to content
MAD9014 - Cross-Platform Web Development

Conventions

Filenames

Section titled “Filenames”
  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.
  4. HTML homepages are always called index.html. This is the default name for every folder.
  5. Put your JavaScript files inside a js folder.
  6. Put your CSS files inside a css folder.
  7. Put your image files inside a img folder.
  8. Put your audio and video files inside a media folder.
  9. Put your local font files inside a fonts folder.

HTML

Section titled “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>

CSS

Section titled “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, cqi, 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 or their purpose on the page. Avoid things like p1 or mydivs.

JavaScript

Section titled “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

Section titled “Git”
  1. Start every project by creating a repo on Github. Then locally run git init and git remote add origin <repo-address>.
  2. Use git commit frequently.
  3. Commit messages should always be meaningful. Avoid things like "Updated script".
  4. git status will help you see how much you have edited since your last commit.
  5. Always start with git pull.

Comments

Section titled “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.