General information and reminder
Online documentation
Accurate reference documentation can be found on
Mozilla Developer Network (MDN)
Alternatively, the W3Schools website can provide several comprehensive examples and may also be used as reference
W3Schools
Try to double check your information with these website as much as possible. They may be more accurate than general forums.
HTML/CSS Validator
Don't forget to check for HTML and CSS validity
Coding rule
Try to follow as much as possible the following coding rules
General coding rules
- Readability
- A code could be easy to read (not to write)
- Erase all non essential lines
- One logical operation per line: don't try to cumulate operations, don't try to write tricky code
- Simplicity (KISS)
- Prefer simple solution to complex one (simpler to read/maintain).
- Erase all non essential lines
- One logical operation per line: don't try to cumulate operations, don't try to write tricky code
- Don't repeat yourself (DRY)
- Factorize your code in functions (in JS)
- Factorize your appearance parameters using adequate selectors (in CSS)
- Follow standards
- Prefer the use of built-in standard functions rather than external library.
- But, prefer the use of external libraries rather than complex tricky hand-made.
More specific web development rules
- Separation of Concerns (SoC)
- Document structure and semantic should be clearly defined in the HTML file.
- Appearance should be parameterized in the CSS file.
- Logic should be described in the JavaScript file.
- Accessibility
- Check that your website is accessible without JavaScript activated
- Check that your website is accessible without images (ex. in command line)
- Efficiency
Minimize the amount of data to be loaded (minimize bandwith consumption).
- Avoid loading external library and asset you would not use
- Minimize the size of your images (reduce their pixel size to fit their final dimension on screen, save photos as
jpg)
- Prefer the use of CSS graphics than external files for constant/gradient color
- Avoid using unecessary JavaScript
Browser
You may use, and check your webpage on the following browsers
Don't forget also to check
-
responsivness of the website on your mobile for full accessibility.
- your website with
disabled JavaScript
- your website with
disabled images. You may use command line browsers such as
Lynx
Code editor
You may use any text editor you are comfortable with.
- Modern code/text editors:
- Commercial softwares
-
Web Storm (JavaScript editor, free for students)
- Standard available general text-editors
Do not use MS Word (/Libre Office) to edit code. They don't indent and color encode code, and may include extra unwanted
characters.