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

Website Deployment Checklist

Description:

This is my take on a website deployment checklist. Feel free to adapt it to your own projects. Hopefully this will act as a good stating point for you. If I've missed anything, please add your suggestions to the comments. Thanks!

• Proofread, check Spelling and Grammar (Yes, again)
• Have you ensured all HTML5 is semantically correct
• Have you checked all links to ensure no broken links exist?
  W3C Link Checker
• Have you evaluated all small images for base64 encoding?
  http://www.base64-image.de/
  https://www.nccgroup.com/en/blog/2014/06/image-optimisation-tips-no-8-be-aware-of-base64-encoding-but-approach-with-caution%E2%80%A6/
• Have you double checked all browser prefixes in CSS?
  http://cssprefixer.appspot.com/
• Have you linted everything?
  http://www.jslint.com/
  http://validator.w3.org/
  http://csslint.net/
• If using a CSS preprocessor (SASS/Compass, LESS, Stylus, etc.), have you switched to production mode from development mode?
• Have you compressed and concatenated your CSS?
  https://incident57.com/codekit/
  http://gruntjs.com/
• Have you compressed and concatenated your JavaScript?
  https://incident57.com/codekit/
  http://gruntjs.com/
• Did you build custom error pages (e.g. 404 page)?
  http://www.searchenginejournal.com/importance-of-404-error-page-top-404-designed-pages/64899/
• Have you tested usability / accessibility?
  http://wave.webaim.org/
• Have you verified basic site accessibility / usability with CSS & JavaScript disabled?
• Have you tried to navigate the site using screen-reader software to verify usability / accessibility?
  http://www.nvaccess.org/
  http://www.freedomscientific.com/Products/Blindness/Jaws
• Have you ensured images have appropriate ALT tags?
  http://www.feedthebot.com/tools/alt/
• Have you updated your version control system (GIT, subversion, etc.) with the latest changes prior to deployment?
  http://git-scm.com/
• Have you added the favicon?
  http://blog.teamtreehouse.com/how-to-make-a-favicon
• Have you added the necessary Meta Data?
  https://support.google.com/webmasters/answer/79812?hl=en
• Have you added the necessary code for analytics (e.g. Google Analytics)?
• Have you added the site map document?
  https://www.xml-sitemaps.com/
• Have you added the robots document?
  http://www.robotstxt.org/robotstxt.html

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.