HTML5 Brunch Season 2 - "HTML5 Digital Classroom" Exercises

by: Bing Mei

Lesson 1: Defining HTML5

• No exercises for this lesson

Lesson 2: Fundamentals of HTML, XHTML, & CSS

• Smoothie World
• Test

Lesson 3: Formatting Text with CSS

• Fonts
• Sizing
• Lists

Lesson 4: Introduction to CSS Layout

• Layout

Lesson 5: Advanced CSS Layout

• Advanced Layout

Lesson 6: Using HTML5 Markup

• HTML5 Markup

Lesson 7: Creating HTML5 Forms

• Contact Form
• Order Form (as tested, HTML5 new features work on Google Chrome but not IE9)

Lesson 8: Introduction to JavaScript and jQuery

• Subscribe
• Toggle with jQuery

Lesson 9: Working with Video and Audio Elements

• Index (using HTML5 video tag)
• Controlling video with JavaScript (works fine on Chrome but not always on IE9)
• Audio (using HTML5 audio tag)

Lesson 10: Working with Canvas

• Drawing a Rectangle
• Drawing Circles
• Drawing Curves
• Adding Text
• Using Colors, Styles, & Gradients
• Adding Images to a Canvas
• Using Transforms
• Drawing with Loops

Lesson 11: Styling with CSS3

(As tested, the following scripts work well with Google Chrome but not always with IE9)

• Using CSS3 border-radius & border-image
• Adding multiple background images
• Using transparency and opacity
• Using CSS3 gradients
• Creating CSS3 transitions
• CSS3 animation
• Using web fonts

Lesson 12: CSS3 Media Queries and the Future of CSS3

(The following scripts were only tested on Google Chrome)

• Mobile-optimized Layout (Using CSS3 media queries)
• CSS3 Multi-column Layout
• CSS3 Flexible Box Layout

Lesson 13: Offline Storage in HTML5

• Using localStorage (works on Chrome)
• Using Application Caching (works on both Chrome and IE9)

Lesson 14: HTML5 Geolocation

• Getting User’s Location
• Displaying User's Location on Google Maps
• Creating a HTML5 Geolocation and Google Maps mashup

Lesson 15: HTML5 Drag and Drop

• Shopping Cart (works on both Chrome and IE9)
• Moving Checkers (works on Chrome)