Digital Web Development Fundamentals

: 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.

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

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.

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