WIBES HTML5 & CSS3

Class 1:
Introduction to web design, Present day web design examples, make a basic html file. How web works.

Class 2:
Activity: Create a single page html page. Contents will be given in a single text file and a cheatsheet with basic HTML tags Tags Dissection. <h1> to <h6>, <p></p>, <a><>. <br /> Tag pairs and single tags. Basic CSS - <style></style>

Class 3:
Activity: Improving the previous site - Multiple pages, Hyperlinking and formatting of pages. Hyperlinking, Relative and absolute addresses, page hierarchies. Block and inline elements. Nested elements Lists, custom lists*

*HTML5 & CSS3 features

WIBES HTML5 & CSS3

Class 4:
Activity: Add images to page and fit its size as required. Also deciding on the format of image to be used on various occasions. (GIF,PNG or JPG). <img /> attribute, image maps Image formats, properties. Image quality and speed, Basic photo editing. Photo editing Softwares

Class 5:
Activity: Create an HTML5 page and validate it DOCTYPE,. Need for HTML5, CSS Styles - embedded or inline. Selectors.

Class 6:
Activity:Changing styles of multiple pages all at once using external stylesheets Classes,ids, inheritance css properties: border, margin, padding

Class 7:
Fonts, Font Family, @font-face Web colours - calculation methods, Hex values, rgba, gradients, multiple backgrounds

WIBES HTML5 & CSS3

Class 8 & 9:
Activity: Make a blog page with HTML5 semantics <div></div>, <span> </span>, Semantic attributes in HTML5. microdata

Class 10:
pseudo-classes, css shorthand, cascade. Float. and positioning elements. provision for navigation for the visually challenged.

Class 11 & 12:

CSS Positioning, z-index. Transforms, transitions and animations. Liquid and frozen designs

Class 13:
Activity: Table creation including colspan & rowspan. Discussion: Why tables shouldn't be used for designs Tables - <table></table> table CSS properties

WIBES HTML5 & CSS3

Class 14:
Activity: Create a contact form Forms HTML5 elements New attributes, inputs and controls

Class 15:
Activity: A Video page with flash fallback. Multimedia, <object> </object>, flash embedding HTML5 Video and Audio. Codecs supported and formats supported

Class 16:
Activity: Develop a mobile site Multiple stylesheets, stylesheets for various media - print/mobile.

Class 17 & 18:

Activity: createpages with frames and iframes Frames,. Introduction to Canvas, geolocation, Drag and drop API, offline web apps. CSS rules, combining selectors, css validation

WIBES HTML5 & CSS3

Class 19:
SEO, Site hosting options and methods

Class 20:
Introduction to Javascript. Resources and tutorial sites.

Summary
20 classes and 11 Hands-on activities Classes per week: 4 x 45 mins. Weekly online exercises. 1 Final Testpaper. Requirerments: Lab with internet connectivity, Dreamweaver, photoshop.

Books to follow

Prepared by: Amrith Krishna | ask.amrith@gmail.com | WIBES | FISAT | Syllabus Draft 1.0