Start by understanding HTML5 general structures. Create a page template based on lecture material or some other good source.
Study elementary HTML5 from http://www.w3schools.com/.
Start with the Canvas element, and create a nice, personal drawing within the canvas. You can embed several trials on your page, and show how you learnt new things. Remember to document your solutions with commenting.
Alternatively, you can follow the tutorial by William Malone.
Be prepared to present the results in classroom.
Combine the basic HTML5 structure with CSS stylesheets. Design a page, such as the opening page for our campus library or cafeteris, that is nicely displayed on three different screen sizes: a large PC screen, on a tablet and on a smart phone. You have to decide which content is important for all and which content you can omit from smaller screens.
There is an example of wireframing with HTML5 that uses the basic HTML5 structure and CSS for design.
Google Web Designer is a complete tool for HTML5 design.
Check also design templates by HTML5up
You can find a code example in Tuubi documents that shows how page content can be changed off-line. Create a page based on it. There is also a link to the book website where the codes are distributed, but it is always better to type yourself in order to get some memory traces of the code.
Other features in HTML5: If you want to try some other new features such as dragging and dropping, form input types, etc., you can submit your (commented) trials and you will be awarded points for the effort.
|
Created by: Jaana Holvikivi Last update: 18.1.2014 |