Introduction to HTML5 and CSS3

Adobe Bootcamp HTML icon
Students will gain knowledge of the latest and greatest approaches to website design and consistency. Using hands-on lab exercises, they will build a small business web site of their own. Students will work with images and learn to add formatting and style with CSS to encourage consistency and easy editing in web site design.

Course Objectives

  • Understanding HTML5
  • Build effective web sites with HTML5
  • Comprehend the benefits of CSS3 to web pages
  • Acknowledge browser variations in handling CSS

Prerequisites:

  • Practical working knowledge of Mac OS X or Windows

Course Outline

Note: The curricula below comprise activities typically covered in a class at this skill level. The instructor may, at his/her discretion, adjust the lesson plan to meet the needs of the class.

An Overview of HTML5

  • Defining HTML5
  • HTML5 markup
  • Key HTML5 elements
  • Web forms
  • New HTML5 elements
  • An overview of HTML5 APIs and supporting technologies
  • Geolocation in action
  • Web Workers
  • Web storage
  • CSS animations
  • CSS transitions
  • CSS 2D and 3D transformations
  • CSS3 backgrounds, borders, RGBa colors, gradients, drop shadows and rounded corners
  • @font-face web fonts
  • HTML5 is in a state of transition
  • Who is using HTML5 today?
  • Identifying HTML5 sites

Fundamentals of HTML, XHTML, and CSS

  • Web languages
  • Web page structure is based on HTML
  • The details of XHTML syntax
  • Doctype lets the web browser know what to expect
  • The W3C and page validation
  • HTML structure
  • Placing images in HTML
  • The role of CSS
  • Styling a heading
  • Understanding class styles and the element
  • Three ways to use styles
  • Internal versus external style sheet
  • What makes styles cascading

Formatting Text with CSS

  • The importance of typography on the Web
  • The challenges of fonts on the Web
  • Setting a font-family
  • Sizing text with CSS
  • Pixels and points are not the best choices
  • Using a combination of percent and the em measurement
  • Using margins to modify space between your text
  • Setting paragraph line-height
  • Transforming text with CSS
  • Working with HTML lists
  • Styling HTML lists

Basic (X)HTML Formatting

  • Making Text Bold or Italic
  • Changing the Size of Text and Using a Monospaced Font
  • Using Preformatted Text
  • Quoting, Superscripts, and Subscripts
  • Marking Changed Text

Introduction to CSS Layout

  • Working with the CSS reset file
  • A brief history of layout techniques on the Web
  • An overview of page layout options
  • Understanding the <div>
    element: creating a two-column fixed-width CSS layout
  • Understanding the CSS float property
  • Creating columns with the float property
  • Working with the clear property
  • Creating a list-based navigation using floats
  • Adding text styles
  • The effect of margins and padding on your fix-width layout
  • A review of using margins and padding for layout
  • Styling your footer with a background image

Advanced CSS Layout

  • Building your page layout
  • Removing the background color
  • Working with CSS background images
  • Using hacks to solve layout problems
  • Enhancing your CSS navigation bar
  • Moving internal styles to the external style sheet
  • Creating a style for the active page
  • Adding images to your sidebar
  • Working with absolute positioning

Using HTML5 Markup

  • A review of semantic markup
  • HTML5 fundamentals
  • The HTML5 DOCTYPE declaration
  • The different categories used for HTML5 content
  • Using the new header element in HTML5
  • Adding support for HTML5 elements in browsers
  • Adding the HTML5 <nav> elements
  • Adding the other HTML5 sectioning elements
  • HTML5 document outlines
  • Adding the footer element
  • Adding the article and aside elements
  • Additional HTML5 elements
  • Revisiting familiar HTML elements

Creating HTML5 Forms

  • The need for updated forms
  • Reviewing how forms work
  • The components of a form
  • Adding new HTML5 input types and attributes
  • Creating an order form with new HTML5 input type and attributes
  • HTML5 form features under development
  • Providing fallbacks for browsers that don’t support HTML5 features

Introduction to JavaScript and JQuery

  • Interactivity on the Web
  • Adobe Flash
  • JavaScript
  • JavaScript basics
  • JavaScript events
  • Placing your JavaScript into an external document
  • The Document Object Model
  • JavaScript frameworks
  • Hiding an element with JQuery
  • Adding an event trigger to show effect

Working with Video and Audio Elements

  • Adding video
  • Adding support for more browsers
  • Adding fallback support for older browsers
  • Controlling a video with JavaScript
  • Adding audio

Working with Canvas

  • Understanding the Canvas element
  • The benefits of the Canvas element
  • Drawing paths
  • Drawing rectangles
  • Drawing lines and circles
  • Drawing curves
  • Adding text
  • Using colors, styles and gradients
  • Adding images
  • Using transforms
  • Creating a drawing loop

Styling with CSS3

  • Understanding the role of CSS3
  • Using CSS3 border-radius and border-image
  • Adding multiple background images
  • Working with CSS3 transparency and opacity
  • Using CSS3 gradients
  • CSS3 gradients potential for the future
  • CSS3 transforms, transitions, and animations
  • CSS3 transforms and transitions
  • Working with CSS3 animations
  • Working with web fonts
  • Using @font-face to specify a web font
  • Using a web service to generate multiple fonts
  • Alternative methods for adding web fonts

CSS3 Media Queries and the Future of CSS3

  • The role of CSS3 media queries
  • Using CSS3 media queries to deliver a mobile-optimized layout
  • Upcoming developments of CSS3
  • The CSS3 multi-column layout
  • The CSS3 Flexible Box layout module
  • The CSS3 template layout module
  • Adding template-based position to CSS3

Offline Storage in HTML5

  • Offline storage in HTML5
  • HTML5 storage types
  • localStorage methods
  • localStorage example
  • Advanced data storage
  • Application caching
  • The cache manifest file
  • Cache manifest structure
  • Updating the cache
  • The applicationCache object

HTML5 Geolocation

  • Understanding Geolocation
  • Getting the user’s location
  • Displaying the user’s location with Google Maps
  • Browsers lacking HTML5 Geolocation
  • Creating a HTML5 Geolocation and Google Maps mashup
  • Adding Google Map markers to your geolocation page

HTML5 Drag and Drop

  • Drag and Drop on the Web
  • Cross-browser drag and drop
  • Transferring data with a drag-and-drop operation