Web Development Training Course

The Graphics Network

Training and Development for Windows, Linux and the Web

01285 713297 info@tgn.co.uk

Web Development Using HTML5, CSS3 and JavaScript

This highly practical 5 day course is designed to give a comprehensive introduction to the range of technologies involved in a developing a website - HTML, CSS, JavaScript, and jQuery. The latest versions (HTML5, CSS3) are assumed in this outline, but the course can also be presented using previous standards if required. Each of the course sections is also available separately. No prior experience is required in these technologies.

The 5 day course costs £3200 in total for up to 6 students, plus VAT and the instructor's reasonable expenses. Each student beyond 6 would cost £25 for the additional course materials. If you are interested in this course, please contact us by email at enquiries@tgn.co.uk or by phone on +44 (0)1285 713297.

Course Outline:

Introduction to HTML

Browsers and servers. Identifying pages - URLs. HyperText Markup Language. HTML, XML, XHTML and HTML5. Standards.

Getting Started

HTML basics. Paragraph formatting. Comments. Headings. Styles. Logical versus physical styles. Nesting elements. Deprecated tags. Titles. Attributes. Using colours. RGB and hexadecimal. Special characters in HTML.

Hyperlinks and Images

Lists. Hypertext links - the anchor tag. Relative and absolute URLs. Hyperlink guidelines. Opening a new window. Linking within a document. Hyperlink targets and frames. Using other protocols. Images and formats. Images, text and hyperlinks. Image maps.


Using tables. HTML table structure. The table header and footer. The table body. Cell padding and spacing. Cell sizing and formatting. Tables and images.

HTML5 Enhancements

Syntax simplifications. Semantic markup. New elements in HTML5. Audio and video. Accessibility. Canvas and SVG. Off-line applications.

Forms and Scripts

Getting data back. The form method. Submit and reset buttons. Input controls. Labels. Naming and identifying controls. At the server. Password controls. Check boxes and radio buttons. Text areas and selects.

HTML5 Forms

Placeholders and focus. Auto completion. New form controls. Dates and times. Validation and highlighting.

Cascading Style Sheets

Content and presentation. Embedding a style sheet. A basic style rule. Multiple selectors. Class selectors. Using the class. IDs and ID selectors. Font styles. Shorthands. Text alignment and indentation. Text transforms. Media types and printing. Using an external file. Borders. Using span. Div - the universal container. Fluid or fixed layouts. The CSS box model. Margins and padding. Floating elements. Float and images. Using CSS for layout. Hyperlink pseudo classes. List styles. Backgrounds and repetitions.


CSS modules and incremental enhancement. Modernizr. Borders, curves, gradients and backgrounds. Responsive web sites. Media queries. Images everywhere. New selectors. Fonts and font kits. Improvements to the box model. Multi-column text. Transitions, transforms and 3D. Calculation, counters and generated content.

Search Engine Optimization

Document type declaration. Completing the HTML start tag. Content type. The title tag. Description and keyword tags. Search engine spiders and crawlers. Page content. Link popularity. A look at Google. Free submission to search engines.

How scripting works

Scripting and HTML. Scripting languages and the origins of JavaScript. Recent enhancements to JavaScript.

Language fundamentals

Blocks and functions. Variables and operators. Control flow.

Basic scripting

Forms, fields and field validation. Event handling. Writing to the document.

Objects and object models

How objects work. Predefined objects. Browser and document objects. The ubiquitous getElementById method. Cookies.

Bringing pages to life

How HTML and JavaScript fit together. Cascading Style Sheets and named styles. Absolute and relative positioning. Compatibility considerations. Changing styles and style rules dynamically. Graphical and dynamic pages.


AJAX - Asynchronous JavaScript and XML. The XMLHttpRequest object. The onReadyStateChanged function. JSON - JavaScript Object Notation. Examples.


What jQuery is. The jQuery function and its $ shorthand. Selecting and modifying elements. Event handling. Animations. Using jQuery for AJAX.


The MVC pattern. Expressions and attributes. Binding. Modules, controllers and models. Event handling. Single page applications.

Additional features

Bootstrap for layout and mobile. Knockout for data binding. Drawing using HTML5 Canvas. Web sockets. SVG.