Design Patterns

  1. General
  2. <!DOCTYPE html>
    <html>
            <head>
                    <!-- Favicon -->
                    <link href="" type="" rel="shortcut icon" />
    
                    <!-- Attach a CSS file -->
                    <link href=".css" type="text/css" rel="stylesheet" />
                    <!-- or Use style tag below, choose only one-->
                    <style type="text/css">
                    	selector {
                    		property: value;
                    	}
                    </style>
    
                    <!-- Character Set -->
                    <meta charset="utf-8" />
    
                    <!-- General Info about the Website -->
                    <!-- name can be replaced by http-equiv -->
                    <meta name="" content="" />
    
                    <!-- Viewpoint -->
                    <meta name="viewport" content="width=device-width, initial- scale=1">
    
                    <!-- Title -->
                    <title>...</title>
    	</head>
    	<body>
    		<!-- Body -->
    	</body>
    </html>
  3. Simple Tag
    <element />
                    
  4. Complicated Tag
    <element attribute="value ...>
        ...
    </element>
                    
  5. Link
    <a href="" title="">...</a>
                    
  6. Image
    <img src=".jpg" alt="" title="" />
                    
  7. Unordered List
    <ul>
        <li>...</li>
    </ul>
                    
  8. Ordered List
    <ol>
        <li>...</li>
    <ol>
                    
  9. Definition List
    <dl>
        <dt>...</dt>
        <dd>...</dd>
        ...
    </dl>
                    
  10. Table
    <table>
        <caption>...</caption>
        <tr>
            <th>...</th>
        <tr>
        <tr>
            <td>...</td>
        </tr>
    </table>
                    
  11. Audio
    <audio controls>
        <source src="" type="">
        <source src="" type="">
        Your browser does not support the audio element.
    </audio>
                    
    Extension Expression
    .ogg audio/ogg
    .mp3 audio/mpeg
  12. Video
    <video width="320" height="240" controls>
        <source src="" type="">
        <source src="" type="">
        Your brower does not support the video tag.
    </video>
                    
    Extension Expression
    .mp4 video/mp4
    .ogg video/ogg
  13. Figure
    Example of figure
    <figure>
        <img src="" />
        <figcaption>
            <p>...</p>
        </figcaption>
    </figure>
                    
  14. Visited Links
    a:link { color: #FF0000; } /* unvisited link */
    a:visited { color: #00FF00; } /* visited link */
    a:hover { color: #FF00FF; } /* mouse over link */
    a:active { color: #FF00FF; } /* active link */
    a:focus { color: #FF00FF; } /* focused link */
                    
  15. AJAX (Need to use Firefox, don't use Chrome!)
    Example:
    $(document).ready(function() {
        $.ajax({ // '$' means it is a jQuery object
            url: "data.xml",
            method: "GET",
            dataType: "xml"
        })
        .done(function(xmldata) { // If it works
    
            // Need to use $() around xmldata to jQueryfy it
            // .find() finds tag with "pokemon"
            // .slice(i, j) gets ith to (j-1)th item
            // .each() loops each item just like for-loop
    
            $(xmldata).find("pokemon").slice(0,3).each( function(index, item) {
    
                // jQueryfy param 'item'
                var $item = $(item);
    
                // Get each item you need
                var $article = $('<article/>', {
                    // '/' means this is a new tag
                    // "key: value" format sets attr
                    // 'id' sets attr of id
                    // .attr() gets value of attr
                    id: 'pokemon-' + $item.attr('id')
                });
                var $name = $('<h2/>', {
                    // 'text' sets text inside tag
                    text: $item.find('name').text()
                });
                var $id = $('<h6/>', {
                    text: "# " + $item.attr('id')
                });
                var $type = $('<h5/>', {
                    text: $item.find('type').text().toUpperCase()
                });
                var $innerArticle = $('<article/>', {
                    text: $item.find('type').text().toUpperCase()
                });
                var $abilities = $('<h6/>', {
                    text: 'ABILITIES'
                });
    
                // Append each item using .append() and .appendTo()
                $article.append($id);
                $article.append($name);
                $article.append($type);
                $innerArticle.append($abilities);
                $innerArticle.append('<br/> haha');
                $article.append($innerArticle);
                $article.appendTo('#topthree');
    
            });
        })
        .fail(function(jqXHR, textStatus) { // If it fails
            alert( "Request failed: " + textStatus );
        });
    });
                    
  16. Picture Slider
  17. Node.js With Databases