Cheat Sheet

HTML5 Cheat Sheet

Cheat Sheet via Make a Website Hub

Basic HTML5 Restaurant Menu Template

Description:

An instructor friend of mine was creating a homework exercise for a basic HTML class. He's been teaching photography for a while and hasn't done a lot HTML coding recently, so he asked me to give him a hand.

After looking at his requirements, I came up with the following menu template. Here are the main features of the template:

1. It's an HTML5 Document.
2. No classes or ID's are used to target page elements, just CSS selectors.
3. Menu items are in a table for accessibility, but laid out visually with CSS so it doesn't look like a table.
4. This menu is fully responsive without a single media query. All widths are percentage based.

Notes:

It's a nice simple menu template in HTML5 and CSS3. It utilizes normalize.css to smooth out browser inconsistencies. To keep it simple, it is IE9+ compatible (modern browsers only). As it was designed for class use, the code is very well commented.

The demo page can be viewed here:

Food Menu Demo

The files can be downloaded here:

FoodMenuDemo.zip

Export SVG with Cut and Paste from Illustrator

Here's a handy tip: If you want to export part of an Adobe Illustrator file as an SVG, select that part, copy it to the clipboard, and paste it into a text only application (e.g. textedit in plain text mode).

It turns out that whenever you copy an element in Illustrator, it's stored in the clipboard as an SVG.

Basic HTML5 page template

Description:

This is my basic HTML5 page template. I hope it will help you get started when building your own web sites. If you have any suggestions for improvement or think I may have missed something, please feel free to let me know in the comments.

Notes:

Lines 2 - 5 add a class to the HTML element if the browser is IE and if it's earlier than IE 9, it will add a class for the version (IE 8, IE 7 or IE 6). This will allow you to target HTML at IE specifically and if needed, a specific version of IE.

Lines 8 - 12 are the standard head elements for any page including the basic meta tags for character set, site description, and author. You may add more depending on you requirements of course, but these are considered the bare minimum for best practice.

Line 15 is the meta for view port control on mobile deceives. It prevents mobile deceives, like smart phones, from auto-scaling your site down to fit the screen. This is particularly important for responsive sites. This version of the tag sets the initial scale to 1:1, but allows the user to zoom from there.

Lines 17 - 19 are the links to the CSS style-sheets. The first link (line 18) is to the Google CDN for normalize.css, my choice for CSS reset. You may want to host it directly on your site, or you may prefer a different CSS reset, if you do, it should go here. Line 19 points to your local style sheet. Don't forget to update the path.

lines 21 - 23 add the HTML5 Shiv for basic HTML5 compatibility for IE9 and earlier.

Lines 25 - 31 are for your favicons. You should update all the paths to point to your favicons. Line 26 is for your sites favicon as used by the browser.

Lines 28 through 31 are for Apple touch icons. If someone adds a link to your site to the homepage on their iOS device, it will use one of these icons (based on screen resolution). You will need to adjust the paths to point to your icons.

Lines 37 - 41 are the JavaScript links. All JavaScript links should be at the bottom of the page, just before the ending body tag. This ensures that all HTML elements are loaded before the JavaScript tries to manipulate them.

Line 40 links to the jQuery CDN on Google. Make sure that you get the right version of jQuery for your needs. Line 41 tests for the presence of jQuery (should be found if it was successfully download from the CDN). If jQuery is not found (CDN failed to load) it will add the link that points to your local copy of jQuery. Ensure you have the right version number and change the path to point to your local copy of jQuery.

Of course if you don't need jQuery, you can remove lines 40 and 41. If you have other jQuery libraries (angular.js, respond.js, etc.), this is where you should place them on the page.

Code:

1:  <!DOCTYPE html>  
2:  <!--[if lt IE 7]><html class="ie ie6" lang="en"><![endif]-->  
3:  <!--[if IE 7]><html class="ie ie7" lang="en"><![endif]-->  
4:  <!--[if IE 8]><html class="ie ie8" lang="en"><![endif]-->  
5:  <!--[if (gte IE 9)|(IE)]><!--><html lang="en"><!--<![endif]-->  
6:    
7:  <head>  
8:       <!-- Basic page elements -->  
9:       <meta charset="UTF-8">  
10:       <title>Document</title>  
11:       <meta name="description" content="Add a site description here">  
12:       <meta name="author" content="your name here">  
13:    
14:       <!-- basic mobile elements -->  
15:       <meta name="viewport" content="width-device-width, initial-scale=1">  
16:    
17:       <!-- CSS links -->  
18:       <link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />  
19:       <link rel="stylesheet" href="css/styles.css">  
20:    
21:       <!--[if lt IE 9]>  
22:            <script src="dist/html5shiv.js"></script>  
23:       <![endif]-->  
24:    
25:       <!-- Favicons -->  
26:       <link rel="shortcut icon" href="images/favicon.ico">  
27:    
28:       <link rel="apple-touch-icon" href="touch-icon-iphone.png">  
29:       <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">  
30:       <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">  
31:       <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">   
32:    
33:  </head>  
34:  <body>  
35:    
36:    
37:  <!-- Add all script links just before the body tag -->  
38:    
39:  <!-- jQuery -->  
40:  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>   
41:  <script>window.jQuery || document.write('<script src="js/1.11.1/jquery.min.js">\x3C/script>')</script>   
42:  </body>  
43:  </html>  

The file can be downloaded here:

HTML5 page template

HTML Canvas Demo

Description:

This is a simple web app for drawing boxes on a canvas object. It allows for changing the stroke and fill color and size of the boxes and calculates the box area and perimeter on the fly. It can also undo up to 10 times. It includes mouse and touch events and will therefore work on tablet devices (though multi-touch is not utilized).
This simple web app could be the basis for a more robust web based drawing program. All the JavaScript is well documented.

Notes:

The page layout is not responsive, so a minimum screen size of 1024 x 768 is recommended.

The demo page can be viewed here:

Canvas Demo

The files can be downloaded here:

canvas_boxes_demo.zip

Attribution

All the code was written by me. The fonts are provided via Google Fonts. The textures are from subtle patterns.

Course Evaluation Web App Demo

Description:

This is a simple web app designed to calculate an average score from grades in a class. It does all calculations with JavaScript. It could be adapted to work for most classes and is a simple demonstration of the usefulness of JavaScript for basic client side data processing.

All JavaScript is well documented.

Notes:

While there is no indication, clicking on the word average in any of the attendance, assignments, or evaluations sections will calculate the average for that section only.

The demo page can be viewed here:

Course Evaluation Calculator Demo

The files can be downloaded here:

course_eval_calc_demo.zip

Attribution

All the code was written by me.

PHP Tic-Tac-Toe

Description:

A simple Tic-Tac-Toe game written in PHP to demonstrate the use of PHP classes. Of course this is just for the purposes of demonstrating the code patterns, as PHP is not the language to write a Tic-Tac-Toe game in. This is because every turn requires an interaction with the server. It's just a bit of fun that's a good learning tool.

Notes:

As this demo is written in PHP, a server side language, you will need a web server to run this demo. Opening the index page in your browser won't work.

The demo page can be viewed here:

PHP Tic-Tac-Toe Demo

The files can be downloaded here:

php_ttt.zip

Attribution

All the code was written by me. The fonts are provided via Font Squirrel. The background image of the beach and sand is available through iStockphoto.com and is copyrighted work. You may re-purpose all the code, but the background image is copyrighted and my not be reproduced unless you purchase a license.

JSON Parsing Demo

Description:

The following test project parses a JSON file of Presidents and their Vice Presidents. It also merges local data (images of the Presidents) with the data provided in the JSON file. It displays the results in a table (and a table within a table for the Vice Presidents). A simple search / sort function is also provided.

The JSON file is retrieved using an AJAX request and stored in a local variable. Everything is processed using only JavaScript (neither jQuery nor any other JavaScript library is utilized).

Graphics and CSS files to style the page are included along with a copy of the JSON file. The JavaScript is well documented.

Notes:

Because the data is retrieved using an AJAX request, a web server is required to make everything function. Simply opening the index.html file in your web browser will not work. A local server, such as MAMP would work well or a basic Linux server would also do the job.

The demo page can be viewed here:

JSON parse - Presidents List Demo

The files can be downloaded here:

json_parse.zip

Attribution:

The original images of the presidents were gathered from wikimedia commons, the frame and sepia tone effects were added by me. The provided JSON file is based on sample data from University College of the University of Denver, original author Michael Schwartz. The fonts are provided via Google Fonts

Web tools

Description:

This is a list of the main tools that I use for web Development. While I will occasionally use other resources, these are the ones I use on a regular basis.

Sublime Text

My favorite code editor. Having look at and used many other code editors, sublime text is the editor I use for 99.9% of my work. It strikes the right balance between basic text editor and full blown development environment. With the robust plug-ins available, you can customize it to provide the functions you need without the the overhead and clutter of the things you don't need or want.

Speaking of plug-ins for sublime text, here are the ones I think are essential:

• Package Control - Install this first. Package control allows you to download, install, and manage all your other plug-ins with ease. It's like npm for node.js or apt-get in Ubuntu. It should be the first stop when adding plug-ins to sublime text. Get it here.
• Emmet - The fastest way to code HTML & CSS. Works with editors besides sublime text. View the demo
• Side​Bar​Enhancements - Provides enhancements for working with files in sublime text. Find, move, copy, delete files right from within the sidebar. You can copy file paths, encode images as data:uri base64, and a whole lot more. Install with Package Control.
• SublimeLinter - In-line code checking while you work. The fast, easy way to quality control your code. Install with Package Control.
• GIST - allows you to create code snippets that can be saved to and retrieved from GIT hubs GISTs. Great for storing and sharing reusable code through github. Install with Package Control.
• Code Highlighting - There are a number of languages supported by the built in code highlighting in sublime text, but for those that it doesn't support natively, you can install a package that will cover whatever language your coding in. I have installed packages for SASS, HTML5, jQuery, and more. Just look in Package control to find what you need.

Please don't think this is in any way a comprehensive list of sublime text plug-ins, there are literally hundreds of packages that cover a wide range of capabilities. Please note as well that a lot of these packages can be used with other editors (like text-mate), if sublime text isn't right for you.

MAMP

I develop on the Mac and so I need a local web server to work with. MAMP Pro is my choice for a simple local web server setup. MAMP (Mac, Apache, MySql, PHP) is super simple to setup and configure and is solid and stable. The latest version (V3) has added support for python and perl. They are now available on windows as well. Check them out here.

Code Kit

I used to use grunt.js to automate code compiling, auto-browser refreshes, file concatenation and minification, but not anymore. The latest version of code kit (v2) does everything I need and more. In addition to all the tasks above, it can install and manage packages using bower, which is built in. It has its own built in basic web server, but works with MAMP for more advanced capabilities. And it does all this from a simple GUI interface, no command line needed. Watch the demo video here.

SASS / Compass

SASS or Syntactically Awesome StyleSheets is an extension of CSS that adds innumerable capabilities to CSS, like the use of variables, nested rules, mixins, and in-line imports. It makes coding CSS fast and easy, and more importantly, it makes it easy to make changes. You can get SASS here. Compass is a framework for use in SASS. They have built the code that you would have built using SASS, and packaged it for you. You can learn more about Compass here.

GIT / Tower

Tower is a GUI interface for GIT. It makes using GIT and accessing github easy. If you didn't know, GIT is used for software version control. If your coding, but haven't used version control software, drop what your doing and take a look at GIT here. Once you have that sorted, Tower is the best GUI interface for GIT. Check out the screen cast here.

VMWare Fusion

VMWare Fusion is what I use to run virtual machines. I can download various versions of Windows and Internet Explorer from modern.IE and run them in VMWare Fusion for testing. I can also install and configure a Linux web server if I need a special configuration for a project. It's my indispensable tool for cross platform testing. Get it here.

Adobe Creative Cloud

For content creation, nobody beats Adobe and with the Adobe Creative Cloud Master Collection, you have everthing you need to create content for the web, or any other design project. Check it out here.