Exploring HTML5 and CSS3

Supporting: Contact Hour 3.

If you need to revise the basics of HTML and CSS, you may wish to try these revision exercises first.

Preparation

Read the Blog Posting that supports the case study presented during Contact Hour 3.
Download the code and unizp and open it in Aptana Studio.
Study the HTML and the CSS stylesheets.

Sketch the structure of the site as revealed in the project file viewer. Can you suggest an alternative structure that would be better for a site with a large number of pages?
Sketch a tree diagram of the structure of the HTML document.
Make a list of the tags that are new to you and use the W3C documentation to make a note of their intended purpose
Consider the form element attributes. Which of these are new to HTML5?
Consider the stylesheet reset.css: what is the purpose of this file?

Create a new HTML5/CSS site template by extracting the key features of the example.
Find the exercise that you submitted for the EG-146 exercise last year.
Convert this example to HTML5 ensuring that you use the article tag for your blog posts and the other new structural tags that HTML5 adds as appropriate.
IF you wish, extend this exercise to recode the web site exercise that was submitted for EG-153.

Explore the HTML5 Rocks site. For any examples that you visit, view the source code and identify the new HTML5 tags. If possible try the examples in different browsers and see what happens. What happens in IE 6, 7 and 8?
Visit this alternative examples page. Don't forget to view source!
Visit the CSS3 examples page at Design Shack and see if they work equally well across all the browsers that you have access to. Read the associated tutorials and try out some of the techniques on your own web pages.
Checkout my delicious bookmarks that are tagged html5+eg-259 and css3+eg-259. Bookmark any that you find useful!