Course at a glance
Included in these subscriptions:
- Dev & IT Pro Video
- Dev & IT Pro Power Pack
| Release date | 9/7/2012 | |
| Level | Beginner | |
| Runtime | 1h 57m | |
| Closed captioning | Included | |
| Transcript | Included | |
| eBooks / courseware | Included | |
| Hands-on labs | Included | |
| Sample code | Included | |
| Exams | Included |
Course description
With the advent of multimedia on web pages it became clear that the standard HTML4 was no longer sufficient for web page development. Enter HTML5 and CSS3 in connection with JavaScript. This course covers the changes to HTML that now can embed audio and video playing without using a plug-in. The course will also cover many new features such as Structural Tags, Input Field Types, and Canvas Elements. The course also includes the new CSS3 Transitions, local storage of user preferences, history management, and drawing and animating graphics with WebGL.
Prerequisites
This course assumes you have prior experience with HTML4, CSS and JavaScript.
If new to HTML and CSS start with volume 1 courses:
HTML and CSS Vol 1, Part 1 of 5: Basics
HTML and CSS Vol 1, Part 2 of 5: Flexbox and Fonts
HTML and CSS Vol 1, Part 3 of 5: Animations and Icons
HTML and CSS Vol 1, Part 4 of 5: Layout and Elements
HTML and CSS Vol 1, Part 5 of 5: Forms
Meet the expert
Dustin Tauer is an Adobe Certified Master Instructor and has a degree in Informational Systems and Technology. He currently teaches development classes focusing on technologies like HTML, CSS, JavaScript, Flash, and Flex. When he’s not training, he’s working on development projects ranging from mobile applications to rich internet applications to instructor-led curriculum.
Course outline
What is New in HTML5
Introduction (11:06)
- Introduction (01:05)
- Overview (00:48)
- More Descriptive Markup (01:10)
- Better Interfaces with CSS3 (01:14)
- Backward Compatibility (01:23)
- Demo: Feature Support (02:35)
- Demo: HTML5test.com (02:32)
- Summary (00:17)
Structural Tags and Attributes (18:39)
- Introduction (00:32)
- New Structural Tags (01:52)
- New Doctype (00:24)
- New Element Tags (02:49)
- Demo: Webpage with new Tags (12:40)
- Summary (00:21)
Custom Data Attributes (15:14)
- Introduction (00:37)
- Custom Data Attributes (00:42)
- Pop-up Window (01:41)
- Demo: Custom Data Attribute (11:56)
- Summary (00:16)
HTML5 Form Input Types (11:59)
- Introduction (00:41)
- New Input Types (01:47)
- Virtual Keyboards (00:57)
- Demo: Input Types (03:19)
- Demo: E-Mail Box (01:17)
- Demo: Range Box (00:56)
- Demo: Date Box (01:38)
- Demo: Search Box (01:07)
- Summary (00:14)
Forms, Audio, Video and Pseudo Classes
User Friendly Web Forms (08:47)
- Introduction (00:37)
- Additional Attributes (01:10)
- Autocomplete Attribute (00:50)
- Demo: Placeholder (03:32)
- Demo: Autofocus (01:04)
- Demo: Autocomplete (01:14)
- Summary (00:17)
Advanced Form Validation (17:31)
- Introduction (00:42)
- HTML5 Web Forms (00:26)
- Required Attribute (00:36)
- Pattern Attribute (01:47)
- Demo: Form Validation (03:12)
- Demo: Patterm Attribute (03:45)
- Demo: Valid E-Mail (03:44)
- Demo: Error Notification (02:48)
- Summary (00:27)
Embedding Audio and Video (16:00)
- Introduction (00:47)
- Overview (01:18)
- Codecs (00:55)
- Container Formats (01:07)
- Audio Tag (01:37)
- Video Limitations (01:49)
- Demo: Embedding Audio (04:56)
- Demo: Embedding Video (03:02)
- Summary (00:26)
Pseudo Classes (18:03)
- Introduction (00:41)
- Overview (00:35)
- nth-of-type Pseudo Class (00:32)
- nth-child Pseudo Class (01:29)
- Other CSS3 Pseudo Classes (01:05)
- Demo: Pseudo Classes (13:22)
- Summary (00:16)