Best Practices
Conventions to Follow
# Conventions and Best Practices
# Filenames and Folders
- Keep all your file and folder names lowercase.
- Do NOT use spaces in your file or folder names. Instead use hyphens, underscores, or periods. Whichever you choose, do it consistently.
- Use meaningful names that other developers can understand.
- HTML homepages are always called
index.html
. This is the default name for every folder. - Put your CSS files into a
css
folder. - Put your JavaScript files into a
js
folder. - Put your images into a
img
folder. - Put your local fonts into a
fonts
folder. - Put audio and video files into a
media
folder.
# HTML
- Use lowercase for your tags and attributes.
- Use double quotes for around all attribute values.
- Use the HTML5 declaration and root tag for every webpage.
<!DOCTYPE html>
<html lang="en"></html>
1
2
2
# CSS
- Use
rem
units for font-sizes and media query break points. - Use
ch
units for line lengths in paragraphs or form labels. - When creating mastheads and banners that need a height, use
vh
values. - The Viewpoint units
vw
,vh
,vmin
, andvmax
are good for layout min and max sizes. - CSS classnames should be descriptive and indicate the part of the interface they style. Avoid things like
p1
.
# JavaScript
- Add lots of comments. Explain your code to yourself and others.
- Variable names should be meaningful. Avoid abbreviations.
- Variable names made from multiple words should use camelcase.
- 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
- Use
git commit
frequently. - Commit messages should always be meaningful. Avoid things like
"Updated script"
. git status
will help you see how much you have edited since your last commit.- Always start with
git pull
. - Push to Github early.
- Invite your instructor to your
private
repo early. - Test early. Test often.
# Comments
- 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.