Introduction to HTML5We’re happy to announce commencement of a new six-week HTML5 course at eClasses.org, starting September 16, 2013.

In this course we’ll look at HTML5 from a task-oriented perspective, by learning not only the HTML code for specific tasks, such as, say, formatting text, creating simple shapes or form fields, and so on, but also how to apply CSS3 and JavaScript to create real-world Web objects, Web pages, and Web sites. We’ll spend less time on terms and theory and more time on how to design. When you finish this class, you’ll have the core knowledge required for advancing on to using HTML5 to create special effects, sophisticated animations and interactivity, Web forms that configure themselves based on user input, and Web applications that actually do things, rather than just sit there and look pretty.

Here’s the course syllabus:

Week 1: Introduction to HTML5

  • What is HTML5?
  • What are Cascading Style Sheets?
  • What is JavaScript?
  • Anatomy of an HTML Page
  • Metadata
  • A Good Body
  • Bring it All Together
Week 2: HTML5 Sections, Containers, Boxes, and Shapes
  • HTML5’s Built-In Sections
  • Adapting to Display Size and Device Type
  • Creating Custom Containers
  • Decorative Boxes and Shapes
  • CCS3 and HTML5’s Built-In Containers
  • Custom CSS3 Fills and Gradients
Week 3: HTML5 and Text
  • HTML’s Built-In Paragraph Selectors
  • Inline, Internal and External Styles
  • Creating Custom Paragraph Styles
  • HTML5’s Multicolumn Text Boxes
  • CSS3 Text Special Effects
  • Downloadable Fonts
Week 4: Working with Images, Digital Video, and other Embeds
  • Graphics on the Web – Overview
  • Graphics and Device Screen Sizes
  • Embedding Images with HTML5
  • Formatting images with CSS3
  • Digital Video on the Web
  • Display Size, Frame Rate and Bandwidth
  • Embedding Digital Video in HTML5
  • Embedding YouTube Videos in HTML5
  • Embedding Google Maps and Other Web Apps
Week 5: Interactivity with HTML5
  • What is Interactivity?
  • Simple Text Hyperlinks
  • HTML5 Buttons
  • Inter-Page Navigation with Anchors
  • Text List Menus
  • Button Menus
  • Drop-Down Menus
  • Other Types of Interactivity
Week 6: HTML5 Forms
  • What You Can do with HTML Forms
  • Text Form Fields
  • Drop-Down Menus and Other Forms Lists
  • Radio Buttons
  • Check Boxes
  • Radio and Check Box Arrays
  • Calendars, Sliders, Selectors and Other HTML5 Form Elements

Introduction to CSS3Several years ago, cascading style sheets (CSS) revolutionized Web design. CSS freed Web designers from depending on woefully inadequate HTML tables to create highly stylized Web pages. It provided us with the means to format and reformat multiple pages from one single set of styles, thereby liberating us from the tedious task of formatting one page at a time. Enter CSS3, the next generation of Web design. Special effects, animations, transitions, gradients – all the content we’ve traditionally fallen back on graphics and animation software to achieve are now at our fingertips through CSS code. CSS3, the first revision to cascading style sheets since the advent of handheld smartphones and tablets, is here, now, ready for prime time. Don’t miss William Harrel’s Introduction to CSS3 eClasses.org. The first session starts April 16, 2012. See you there!

This is a complete, hands-on class in creating Websites with CSS3. Here’s what we’ll cover:

Syllabus


Week 1 – Introduction to CSS3

  • What are Styles?
  • What are Style Sheets?
  • How do Style Sheets Cascade?
  • Evolution of CSS
  • CSS and HTML
  • CSS—A  Bunch of Rules
  • The Anatomy of a CSS Rule
  • Why CSS3?

Week 2 – CSS3 and HTML5

  • What is HTML5?
  • HTML5 Page Structure
  • HTML5’s Built-In Containers
  • Create an HTML5 Page
  • CSS3 and HTML5 Working Together
  • CSS3 and Earlier Versions of HTML

Week 3 – In Depth CSS

  • Class, Type, ID and Compound Selectors
  • Inline, Internal and External Styles
  • CSS Containers
  • CSS Rules for Adapting to Display Size and Device Type
  • CSS Print Media Formatting

Week 4 – Formatting a Page with CSS3

  • CSS3 Page Sections and Includes
  • Format Boxes with CSS3
  • Format Text with CSS3
  • Format Images and other Media with CSS3

Week 5 – CSS3 Special Effects

  • CSS3 Shadow and other Text Effects
  • CSS3 Box Shadow and other Box Effects
  • CSS3 Color Gradients and Fills
  • CSS3 Menu and Navigation Formatting Effects
  • CSS3 Background Effects
  • Use WebKit, Mozilla and other Browser Extensions with CSS3

Week 6 – CSS3 Animations, Transitions and Transformations

  • Create and Animate Simple 2D Shapes
  • Create Page and Object Transitions
  • Create Object 2D and 3D Transformations
  • WebKit and other Browser Extension Transformations

Week 7 – CSS3 and Mobile Devices

  • CSS3 Formatting Based on Screen Size and Device Type
  • Integrate CSS3 and JavaScript
  • Integrate CSS3 and jQuery
  • Media Quires
  • Viewport
  • Device Orientation

Week 8 – CSS3 Advanced Techniques

  • Fluid, Multicolumn Pages
  • Stylized Links
  • Format Form Fields with CSS3
  • CSS3 Sprites
  • CSS3 Drop-Down Menus