Introduction to HTML5 and CSS3

In this resource students build up a template making it ideal as a quick fire introduction to HTML5 and CSS3 or incorporation into a larger web project.

The focus is on creating well structured markup using HTML5 and applying an external stylesheet to create all visual style so no images are used in the tutorial. Rules from CSS2 are used for the majority of the layout and CSS3 rules are used to apply gradients, drop shadows, rounded corners along with  a few little industry tricks to make things interesting. Students are encouraged to experiment with the stylesheets and get used to quickly customising the presentation of web documents.

What it covers

The tutorial covers the technical aspects of building a simple, static web document that could be used to build a full web site. It is split up into two distinct areas:

  1. creating HTML 5 to structure the content
  2. creating the CSS to visually style the content

The HTML5 section covers setting up a template that will form the basis of the web site. It walks students through simple mark up and how it is used before they apply a visual style. For courses focusing on the development of a visual style or other aspect of web design the full HTML template is available as part of this resource and could be provided to the students.

The CSS section shows students how to set up an external CSS file and the rules for styling all elements in the HTML template and covers a range of commonly used styles and conventions for supporting older browsers.

The resource includes:

  1. A PDF that includes a walkthrough tutorial and reference sheets for both the HTML5 and CSS
  2. The files for the complete template

Download a sample of the PDF tutorial.

Product Images: