You'll begin at square one, learning how the Web and web pages work, and then steadily build from there. By the end of the course, you'll have the skills to create a simple site with multi-column pages that adapt for mobile devices. Learn how to use the latest techniques, best practices, and current web standards - including HTML5 and CSS3.

Target Audience:
The course is aimed at anyone who has been charged with setting up a website or developing web content as well as those interested in getting a better understanding of the many technologies used to deliver web content.

  • Delegates should have some technical experience, a working knowledge of the Windows operating environment and be familiar with the concepts and use of the Internet.

  • Some HTML knowledge would be helpful although not essential.

Please note: Before attending this class delegates must have a Microsoft account (signing up one is free). The instructions on how to set up a Microsoft account can be found here.

At the end of this course you will be able to:

  • Build HTML pages with text, links, images, tables, and forms
  • Use style sheets (CSS) for colours, backgrounds, formatting text, page layout, and even simple animation effects
  • Learn about the new HTML5 elements, APIs, and CSS3 properties that are changing what you can do with web pages
  • Make your pages display well on mobile devices by creating a responsive web design
  • Learn how JavaScript works—and why the language is so important in web design

Module 1 - How the Web Works?

  • Web evolution
  • The Internet and Intranet
  • Available WWW Browsers
  • URLs and navigation
  • HTTP and FTP
  • Browser operation
  • HTTP interactions
  • Client Request and Server Response
  • MIME
  • Development tools
  • The language of the web

Module 2 - Basic HTML

  • HTML doctype declaration
  • Headings
  • Paragraphs
  • Lists
  • HTML 5 Doc Outline
  • HTML 5 New Structural Tags

Module 3 - Links

  • Anchor tags & href attribute
  • External links (absolute)
  • Internal links (relative)
  • Anchor link
  • Mailto link
  • Target: attribute

Module 4 - Images

  • File formats
  • GIF, JPEG, PNG
  • Transparent GIFs
  • Inline Images
  • Image configuration
  • Background colour and images
  • Graphical hyperlinks

Module 5 - Tables and Frames

  • How Tables are Used
  • Table Structure
  • Spanning Cells
  • Table Accessibility
  • Wrapping up Tables
  • Frame

Module 6 - Forms

  • The Form Element
  • Form Attributes
  • Grouping Form elements with <fieldset>
  • The Input Element
  • Text Input and TextArea
  • Radio Button and Checkbox
  • The Submit button
  • HTML 5 New Input Type

Module 7 - CSS

  • Cascading Style Sheet
  • Embedded, inline and linked stylesheets
  • Basic Selectors
  • Advanced and CSS 3 Selectors
  • Visual Enhancements (Borders, shadow, Fonts and opacity)
  • Measurement Units

Module 8 - The Box Model

  • The box model
  • Working with margins, borders and padding
  • Content and Padding Box
  • Understanding element width and doc flow
  • Clear and Floats
  • Static, Relative and Absolute Positioning

Module 9 - CSS Transition, Transforms and Animation

  • CSS Transitions
  • CSS Transforms
  • Keyframe Animation

Module 10 - Mobile Web Design

  • The Web on mobile devices
  • Progressive Enhancement over Graceful Degradation
  • Responsive design
  • Mobile first design
  • CSS Media Queries
  • Accessibility
  • Site Performance

Module 11 - Introduction to Foundation

  • Introduction to grid based systems
  • Evaluating the benefits of prototyping
  • Building prototypes using Foundations

Module 12 - Introduction to JavaScript

  • Introduction
  • Adding JavaScript
  • Types
  • Flow of Controls

Module 13 - Further JavaScript

  • Arrays, Function and Objects
  • Accessing the DOM
  • Using Events

Module 14 - Introduction to jQuery

  • What is jQuery
  • Adding jQuery to a page
  • jQuery UI
  • jQuery Plugins
  • jQuery Mobile
  • The jQuery wrapper
  • Selectors and events
  • jQuery chaining and animation
  • Widgets, including Accordions, Tab and Datepickers

Module 15 - Ajax

  • What is Ajax?
  • Ajax Enabling Technologies
  • Client and Server Development models
  • Abstraction Through jQuery
  • Load
  • $.get
  • $.ajax

Sorry, we don't have any available dates! Please complete this form to be notified about new dates

Hide form
Please type in a preferred location or region...