HTML5 and CSS3, Part 2 of 3
Interactive

HTML5 and CSS3, Part 2 of 3

This course is for those with prior experience with HTML4, CSS and JavaScript who are wanting to learn more about the new features of HTML5 and CSS3 in connection with JavaScript.

LearnNow Online
Updated Oct 25, 2018

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.

Each LearnNowOnline training course is made up of Modules (typically an hour in length). Within each module there are Topics (typically 15-30 minutes each) and Subtopics (typically 2-5 minutes each). There is a Post Exam for each Module that must be passed with a score of 70% or higher to successfully and fully complete the course.


Prerequisites

This course assumes you have prior experience with HTML4, CSS and JavaScript.


Meet the expert

Dustin Tauer

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.

Video Runtime

130 Minutes

Time to complete

170 Minutes

Course Outline

CSS3 Design

Multi Column Layouts (06:56)

  • Introduction (00:32)
  • Overview (00:29)
  • Browser-Specfic Prefix (00:57)
  • Demo: Multiple Columns (04:40)
  • Summary (00:16)

Media Queries (10:37)

  • Introduction (00:47)
  • Overview (00:21)
  • CSS3 Media Queries (00:50)
  • HTML4 Media Queries (01:05)
  • Device-Specific Conditions (00:41)
  • Separate Style Sheets (00:44)
  • Demo: Media Query (05:43)
  • Summary (00:23)

Rounded Corners (06:19)

  • Introduction (00:32)
  • Rounded Corners (00:58)
  • Demo: Rounded Corners (04:30)
  • Summary (00:18)

Adding Shadows (12:41)

  • Introduction (00:46)
  • Overview (01:31)
  • Gradients (01:14)
  • Transformations (00:40)
  • Demo: Drop Shadow (02:15)
  • Demo: Transformations (01:52)
  • Demo: Gradient (03:59)
  • Summary (00:22)

Using Real Fonts (06:53)

  • Introduction (00:43)
  • Overview (00:38)
  • Fonts Module (01:22)
  • Defining the Font (01:06)
  • Demo: Attach Fonts (02:39)
  • Summary (00:22)

CSS3 Transitions (10:33)

  • Introduction (00:50)
  • Transition Properties (01:58)
  • Transition Timing Property (01:08)
  • Demo: Transitions (06:20)
  • Summary (00:14)

Native Drag and Drop (10:01)

  • Introduction (00:30)
  • Overview (00:18)
  • Drag and Drop Events (01:11)
  • Demo: Drag and Drop (07:40)
  • Summary (00:20)

Drawing, Saving Preferences and Storage

Drawing on the Canvas (14:03)

  • Introduction (00:32)
  • Canvas Element (01:38)
  • Demo: Drawing on a Canvas (11:36)
  • Summary (00:16)

Advanced Canvas Drawing (17:43)

  • Introduction (00:36)
  • Demo: HTML5 Canvas (06:57)
  • Demo: Additional Elements (03:37)
  • Demo: New Design (03:00)
  • Demo: Cut Out (03:15)
  • Summary (00:15)

Saving Preferences (18:41)

  • Introduction (00:46)
  • localStorage (00:29)
  • localStorage Values (01:07)
  • Demo: Save Values (03:16)
  • Demo: localStorage Settings (06:49)
  • Demo: Fonts Changes (01:35)
  • Demo: Load Settings (04:19)
  • Summary (00:17)

Session Storage (16:01)

  • Introduction (00:44)
  • Overview (00:48)
  • Demo: Session Storage (05:20)
  • Demo: apply_to_page (03:06)
  • Demo: Access Settings (04:00)
  • Demo: Call Settings (01:40)
  • Summary (00:20)
;