Web Design Essentials

2-day standards-based web design course for beginners — HTML-02

Web Design TrainingCourse Overview

This web design course provides the foundations for creating robust, reliable, search engine-friendly, usable, accessible and attractive web sites.

The training course covers all the essential components of website design and site navigation — e.g. headings, menus, columns, boxes, tables, forms, multimedia, etc. — but also strongly emphasises:

  • A fundamental understanding of how technologies like HTML and CSS are supposed to work — rather than popular (often bad) practice
  • Thorough knowledge of, and compliance with, W3C web standards

Plenty of web designers — and web design courses — get by without much concern for either of these, but we would contend that the best demonstrate both in abundance.

Web Design TrainingCourse Contents

Overview: HTML & web design

  • Origins of the web and web design
  • Aims and functions of HTML5
    • Share across ‘incompatible’ systems
    • Read and write on different systems
    • Encoding content, meaning and structure
    • Not designing screens
    • Not designing pages
  • Stylesheets do the web design
  • How the web works — clients and servers
  • Browsers and web design
  • Web design for non-screen media output
    • Paper, sound, braille, assistive technologies
  • Reliability, validation and standards
  • Training exercises — testing web design for:
    • HTML & CSS validity
    • Image & CSS failover
    • Javascript failover
    • Cookie-free failover
    • Responsive web design

Basic HTML: design foundations

  • HTML Elements
    • Tags, content, attributes and nesting
    • Almost everything is part of an element
    • Elements have tags
    • Elements usually have content
    • Elements often have attributes
    • Elements are nested
  • Default — browser-based — web design
  • Essential HTML5 metadata
  • Paragraphs
  • Whitespace and line breaks in HTML5
  • Headings, sections and subsections
  • Phrase mark-up in HTML5
  • Interactive hypertext links
  • Embedded images
  • Lists: ordered & unordered
  • Preformatted text
  • Special characters in HTML5
  • Training exercises

Simple web design with CSS

  • HTML5 plus CSS equals web design:
    • Why separate content from style?
    • Style everything from one CSS file
    • Linking CSS stylesheets to web pages
  • The absolute basics of CSS syntax:
    • What is a CSS rule?
    • Components of a CSS rule:
      • Selectors, block, properties, values
    • Punctuation: what it does, why it matters
  • Assembling and laying out a CSS style sheet:
    • Everything in rules
    • Whitespace and line-breaks
    • Indentation
    • CSS comments
  • Setting simple CSS styles:
    • Selecting different elements
    • Colours
    • Background colours
    • Selecting typefaces: font-family
    • Font weight, style, decoration
  • Training exercises

Images in web design

  • Digital images: bitmaps vs. vectors
  • Web bitmap formats: GIF vs. JPEG vs. PNG
  • The web vector format: SVG
  • Plugin-based vector formats
    • PDF, Flash, Silverlight
  • Performance issues
    • Image size vs. number
    • Bandwidth vs. latency
  • Image trade-offs: size vs. quality
  • Creating images
  • Training exercises

Tables: for tabular data only

  • Using tables for tabular data
  • Basic table structure
  • Cell content alignment
  • Images in data cells — almost standards mode
  • Styling tables in CSS
  • Cells that span rows or columns
  • Making table-based layouts less rubbish:
    • More accessible
    • Increase perceived download time
    • Faster to render

More basic CSS web design

  • The box formatting model
    • Borders
    • Margins and padding
    • Collapsing margins
    • Formatting sides differently
    • The non-standard IE box model
  • Background images in web design
    • Image tiling
    • Image position
    • Redundancy
    • Combining background images with background colours and foreground text
  • Selecting page components
    • More flexibly and precisely
    • List selections — selector grouping
    • HTML class attributes
    • CSS class selectors
    • HTML id attributes and CSS id selectors
    • <div> and <span>
    • Descendant selectors
  • Text styling in web design
    • Typefaces and font select
    • Proportional and elegant font sizes
    • Other font properties
    • Line-spacing — Leading
    • Text alignment and justification

User input: designing web forms

  • User input via forms
  • Forms send input data to server-side scripts
  • Scripts send back customised HTML
  • HTML5 form elements
    • The input element
    • Radio, checklist, reset and submit buttons
    • The select element
    • The textarea element
  • Processing forms in the browser
    • JavaScript & client-side scripting
    • The risks and rewards
    • Ensuring JavaScript failover
    • Server-side back-up & redundancy
    • Partial page updates — AJAX applications
    • Usability and accessibility issue
  • Training exercises

Multimedia in web design

  • The plug-in problem
  • Codec and container format problems
  • Ensuring failover, usability and accessibility
  • Embedding multimedia with the object element
    • Normal movies, e.g. MPEG formats
    • Flash: the HTML-correct way
    • SVG — vector graphics
  • Inline SVG
  • Embedding multimedia the HTML5 way:
    • The video element
    • The audio element
  • Training exercises

Web Design TrainingCourse Schedule

Web Design TrainingFurther Details

Course Objectives

On completion of this web design training course, you will be able to:

  • Design bullet-proof web pages
  • Design a functionally complete website
  • Produce cross-browser compatibile web design
  • Produce web design which is usable and accessible — for all types of user
  • Produce web design that works on all media — e.g. PCs, tablets, phones, audio, printers, etc.
  • Produce web design that works on the web and in email
  • Code HTML5 and CSS3 based web design which is:
    • Highly readable
    • Easily debugged — and editable by hand
    • Fast-loading
  • Code web design which is W3C web standards compliant

Target Audience

Anyone who wants high-quality web design without being dependendent on external suppliers/contractors e.g.

  • Bloggers and hobbyists
  • Web design professionals
  • Web content copy writers
  • Marketing and communications staff
  • Web application developers and programmers

Training Pre-requisites

Basic computer literacy — but a bit more than just the ability to use a Mac or Windows computer.

Web design requires a good grasp of how computerised files and folders (directories) are laid out in a filesystem. So that you can find and save files in the right places without needing software to do the job for you, and so that you can provide the correct names and addresses in your web design.

If in doubt, call us.

Training Style

This HTML web design course is delivered through hands-on exercises and expert tuition in the basic principles and best practice of HTML5 coding.