6 for 5... Six lesson class for HTML5

HTML5 is all the rage and it sometimes feels like everyone is talking about it.Yet what if you're just starting down that road? What if you'd just like to learn a little about HTML5? Or maybe you'd like to teach others a bit about HTML5?

New! HTML 5 and CSS: Six Complete Lessons

HTML 5 coupled with CSS is emerging as the new hot development language. I am delighted to announce that we have created six complete lessons that cover the most interesting and dynamic new features of HTML 5 that are ready to drop into a web development or intro programming course. Each lesson comes with instructor PowerPoint slides, a complete reading assignment with hands-on examples, including the files and assets to use in each assignment. A single lesson has enough content for a 75-100 minute class session, and the hands-on examples are great for either a lab session or homework assignment.

The six lessons are:

Lesson 1 – Defining HTML 5
Lesson 2 – Fundamentals of HTML 5, XHTML, and CSS
Lesson 3 – Introduction to CSS Layout
Lesson 4 – Using HTML 5 Markup
Lesson 5 – Working with Canvas
Lesson 6 – HTML 5 Multi-Media and Drag and Drop

This content is available to faculty (and students/hobbyist/pros) at no charge and can be downloaded from here: http://www.mis-laboratory.com/faculty/

So what are we talking here?  Well we've got the materials for the instructor, students and all the supporting files/examples too. Here's a WinDirStat snap;

SNAGHTML31d97209

To give you a feel for the curriculum, here's Lesson 1 from the curriculum outline;

Lesson 1: Defining HTML5

Learning Objectives: In this lesson, students learn the features and capabilities that are part of the HTML5 specification and related technologies. Students will be able to understand the difference between HTML5 syntax and HTML 4.0 and/or XHTML 1.0 syntax. Additionally, students will be able to identify the key features of HTML5, including the new HTML5 elements, multimedia elements, the Canvas element, web forms and more. Another objective is that students have the ability to distinguish between the features that are technically part of the HTML5 specification and those that are related technologies; such as Geolocation, Drag and Drop and CSS3.

  • The benefits of HTML5
  • Key features
    • New markup and layout elements
    • The <video>, <audio>, and <canvas> elements
    • Web forms
    • Revised elements based on HTML 4.0
  • An overview of HTML5 APIs and supporting technologies
    • Geolocation
    • Web Workers
    • Web storage
    • CSS3 animations and transitions
    • CSS3 backgrounds, borders, RGBa colors, gradients, drop shadows, and rounded corners
    • @font-face web fonts 25
  • HTML5 is still a work in progress
    • Browser Support
    • Where HTML5 is being used today

And here's the summary of the other lessons;

Lesson 2: Fundamentals of HTML, XHTML, and CSS

Learning Objectives: In this lesson, students learn the fundamentals of HTML, XHTML and CSS in order to understand the foundations of creating the style and structure of their web pages. Students learn how to use document types (DOCTYPE) to help them validate their web pages and for use as a troubleshooting tool. Additionally, students build a simple web page in order to understand how to add images, create hyperlinks and work with both internal and external style sheets.

Lesson 3: Introduction to CSS Layout

Learning Objectives: In this lesson, students learn the fundamentals of creating a two column, fixed-width layout using HTML and CSS. Students learn the function of a CSS “reset” file and how to add it to their pages. The core concepts of CSS layout are covered in this lesson. This includes the use of the <div> element, as well as the CSS float and clear properties, to create columns on the page.

Lesson 4: Using HTML5 Markup

Learning Objectives: In this lesson, students learn how to use the new HTML5 elements for layout purposes. All of the major new sectioning elements are covered as well as a review of HTML 4 tags that have been revised for HTML5. Students will learn how to convert a pre-existing web page that uses HTML 4 elements into an HTML5 page by replacing <div> elements with the new HTML5 elements. Additionally, working with HTML5 form elements and adding multimedia with the HTML5 video and audio elements is covered.

Lesson 5: Working with Canvas

Learning Objectives: In this lesson, students learn about Canvas, the two-dimensional drawing API included with the HTML5 specification. Students will learn how to create artwork on a web page, including adding shapes, text, fill and stroke colors, gradients, images and basic animations using JavaScript. This lesson also introduces students to the fundamentals of interactivity with JavaScript.

Lesson 6: HTML5 Drag and Drop

Learning Objectives: In this lesson, students learn how to use Drag and Drop, an API related to the HTML5 specification. Specifically, students will learn how to create a basic shopping cart interface using drag and drop objects.

Here's a snap of the Lesson 1 deck;

image

image

The 22 page Instructor Guide;

SNAGHTML31e3a874

And the 19 page Lesson 1 student materials;

SNAGHTML31e4c70c

In short, we're talking a pretty complete HTML5 course. If you're a teacher, trainer, student, professional dev, hobbyist, just someone who wants to learn or teach HTML5, this free resource needs one thing... You!

 

Here’s a few more links you might find interesting:

Follow the Discussion

Comments Closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums,
or Contact Us and let us know.