55319 HTML5 and CSS

5 Days

30 CPD hours

This class is targeted towards the professional developer new to HTML, self-taught HTML developers, graphics designers and those new to HTML development.

After completing this course, you will be able to:
Create HTML5 compliant web pages.
Test and validate HTML and CSS code.
Create CSS for style pages.
Work with experimental vendor prefixes.
Work with fonts and CSS font effects.
Work with color and color tools.
Layout pages and content using DIVs, iFrames and Tables.
Add and format images and CSS sprites.
Create HTML5 forms.
Embed and manage video and audio content.

This course is an in-depth hands-on study of HTML5, CSS3 and modern web and mobile development. The course includes detailed hands-on labs and Q&A labs. The labs include multiple projects, including one beginning to end web site.This material updates and replaces course Microsoft course 20480 which was previously published under the title Programming in HTML5 with JavaScript and CSS3.

Module 1: A Brief History of HTML and the Web

• Welcome!
• History
• Details, Details, Details?
• The Life of a Web Page
• HTTP Status Codes Definitions
• Most Important Things to Know as a Web Developer

Module 2: Core HTML Elements

• HTML and CSS Editors
• Text, Spaces and Tabs
• Working with Tags
• Attributes
• Comments
• Non-Standard Tags
• Every Page Includes?
• File Extensions
• Core Page Elements
• Nesting
• Testing HTML
• HTML and Text

Module 3: Cascading Style Sheets

• Before CSS
• With CSS
• Cascading Style Sheets (CSS)
• Adding CSS to a Page
• Order of CSS Processing
• Experimental Vendor Prefixes
• CSS Units
• The CSS Box Mode

Module 4: Fonts and Text

• Fonts
• CSS for Text
• CSS Text Ticks!
• Working with Lists
• Upgrading and to Windows 7

Module 5: Colors and Backgrounds

• Specifying Colors
• Applying Colors
• Gradients

Module 6: Anchors and Hyperlinks

• HTML and CSS
• Hyperlinks with Images and Other Objects
• Buttons

Module 7: Page Layout

• Page Layout Options
• Tables for Data
• DIVs
• Float
• SPAN
• HTML 5 DIV-like Tags
• IFRAMES

Module 8: Images

• Favicon
• Preparing Images
• Image Files
• The IMG Tag
• Background Images
• Image Best Practices
• CSS Sprites

Module 9: HTML Forms

• A Basic Form
• POST vs. GET
• name vs. id
• Basic Form Elements
• Basic Form Attribute
• Select
• Uploading Files
• HTML 5 Form Enhancements
• DataList

Module 10: Multimedia

• Video and Audio
• HTML 5 Video
• CSS
• JavaScript
• Audio
• Hosting Videos in the Cloud
• Working with Animated GIFs