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

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