Day one

Introduction

• The role of HTML

• The role of CSS

• Web standards and mandatory elements

• Understanding a robust HTML5 template

• The purpose of the head element

• Understanding Meta Data

• About element attributes

Beginning to Code

• Overview of a HTML editor

• Making code easy to read – best practice

• Working with the title tag

• Write your first body content and test

• Adding headings and sub headings

• Overview of structural elements

• Adding structure to the page

• Working with paragraphs

• Using local formatting for bold, italic and underline

• Adding line breaks and rules

• Using special characters

• Adding comments

Images & Video

• Overview of supported image file types

• About image optimisation

• Embedding images

• Image Accessibility

• About Video file formats

• Streaming HTML5 video

• Providing video fallback content

HTML Lists

• Using the Definition List for terms and descriptions

• Grouping related key-points with Unordered Lists

• Structuring hierarchical points with Ordered Lists

• Ordered list bullet options

• Nesting Lists

Hyperlinks

• Linking pages together

• Linking to external websites

• Creating links within a page

• Creating Image links

Questions and answers

Day two

Data Tables

• Overview of data tables

• Inserting a table

• Adding a caption

• Structuring rows

• Adding table headers and table data

• Merging columns

Front End Forms

• Overview of how data is sent to the server

• Embedding a form

• Providing fields for user input

• Inserting radio buttons and checkboxes

• Creating select list menus

• Adding reset and submit buttons

• Understanding form action and method attributes

• Emulating form processing by sending to a static page

• Using inbuilt form validations

Overview of CSS

• What is the Cascade?

• What can CSS do?

• Where to put the CSS code

• Separating content from design

• Syntax and structure

Applied CSS

• Working with External CSS

• Understanding the Element selector

• Working with fonts

• Understanding hexadecimal colour theory

• Styling text colours with hexadecimal and colour names

• Using text alignment

• Styling paragraphs

• Styling headings

• Styling hyperlinks

• Understanding the Class selector

• Creating and applying Class styles

• Using the span element

• When to use the ID attribute

• Creating and applying ID styles

Questions and answers