Website Best Practices Review

Missing required field.
0
Current Score
HTML
CSS
JavaScript

HTML

  1. There is a doctype declaration
    <!DOCTYPE html>
  2. The html tag has a "lang" attribute
    <html lang="en">
  3. The charset is defined
    <meta charset="utf-8">
  4. The style and script tags do not have the "type" attribute.
    <script src="..." ></script>
  5. All tags and attributes are lowercase
    <div> not <DIV>
  6. Attribute values are quoted with double quotes
    <div id="sidebar">...</div>
  7. The document uses consistent indentation of child elements
        
        <div>
            <span>Hello!</span>
        </div>
        
    
  8. Each open tag has a corresponding close tag (if one is required)
    <span>Hello, world.</span>
  9. Tags that are void do not have a close tag nor a trailing slash
    (area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr)
    <hr> not <hr />
  10. All images have alt attributes, except those that are used only for visual styling
    <img src="mydog.jpg" alt="my dog Sparky">
  11. Forced line breaks are used sparingly
    <p>In other words, not this:</p><br><br><br>
  12. Tables are only used for tabular data
    <div>Use divs and CSS instead!</div>
  13. The document does not use any deprecated tags or attributes
    Not this! <body bgcolor="#eee">
  14. The document uses inline styles sparingly or not at all
    Not this! <body style="background-color:#eee">

CSS

  1. Class and ID values are semantic, not presentational
    #login { ... } /* versus #blue-border */
  2. Class and ID values use either camelCase or hyphens for multiple words (and the choice is consistent)
    #searchButton { ... }
    #search-button { ... }
  3. The stylesheet uses CSS shorthand styles when possible
    padding: 10px 5px 2px 5px;
  4. Zero values do not have units specified
    margin: 0; /* not 0px */
  5. Colors use 3 character hexadecimal short-hand when possible
    color:#222 /* not #222222 */
  6. Every declaration ends with a semi-colon, even the last in the block
    p { color:#222; font-size:1em; }
  7. The stylesheet uses single quotes in property values
    input[type='text'] { font-weight:bold; }
  8. The stylesheet uses comments to group styles logically
    /* Footer */
    #footer { ... }
  9. All style declarations are lowercase
    p { color: #eee } not p { color:#EEE }
  10. None of the CSS selectors use more than one ID
    #header .search #quicksearch { ... } /* not good */

JavaScript/jQuery

  1. The code uses proper white space and indentation
        
    $(document.ready(function() {
    $('#test').click(function() {
    console.log('this is not very readable');
    });
    });
        
    
        
    $(document.ready(function() {
        $('#test').click(function() {
            console.log('this is better');
        });
    });
        
    
  2. Each statement terminates in a semi-colon
        
    function alertMe() {
        alert('hello')    //missing semi-colon
    }
        
    
  3. There is only one statement per line
        
    var index = 0; index++; alert(index); // avoid
    
    //this is more readable for anything but the simplest statements
    var index = 0;
    index++;
    alert(index);
        
    
  4. All variables are declared with var
    var index = 0;
  5. The code avoids the eval() statement
    var userInfo = eval(feed); //no!
  6. The code uses single quotes
    var name = 'Bob';
  7. The for... in loop is only used to iterate through properties of objects (not arrays)
        
    for (var prop in myObj) {
        //do something with myObj[prop]
    }
        
    
  8. Functions and unclear statements are documented with code comments
    var zip = elements[1]; //zip code is returned from API in position 1
  9. Variable names are camelCase and are noun phrases
    var firstName = "George";
  10. Function names are lowercase and are verb phrases
    function getName() { return firstName; }
  11. Class names are SentenceCase and are noun phrases
    function Car() { ... }
  12. The code avoids redundant checks for boolean values
    if (y != null && y != '') { ... }
    if (y) { ... } //does the same thing and is much shorter
  13. The strict operator ("triple equals") is used when making comparisons
    if (name === 'Bob') { ... } //not ==
  14. The code within a conditional or iterator block (if, else, for, while etc.) is surrounded by braces
        
    for (var i = 0; i < arr.length; i++) 
        console.log(arr[i]); //this technically will not cause an error but should be avoided
    
        
    
  15. The jQuery code makes use of function chaining where appropriate
        
    $('a.selected')
        .attr('id', 'searchLink')
        .css('color', '#fff')
        .click(function() {
            ...
        });
        
    
  16. No line of code is more than 80 characters
    // for your reference, this sentence demonstrates what 80 characters looks like