Web Design Essentials

2-day standards-based web design course for beginners — WDE

Web Design Training Course 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.

Course contents — 1 The web: how it works

  • 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

Course contents — 2 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

Course contents — 3 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
  • Assemble & layout a CSS style sheet:
    • Everything in rules
    • Whitespace and line-breaks
    • Indentation & CSS comments
  • Setting simple CSS styles:
    • Selecting different elements
    • Text and background colours
    • Selecting typefaces: font-family
    • Font weight, style, decoration
  • Training exercises

Course contents — 4 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

Course contents — 5 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

Course contents — 6 More basic CSS web design

  • The box formatting model
    • Borders, margins, padding
    • Collapsing margins
    • border-box vs. content-box sizing
  • Background images in web design
    • Tiling and positioning
    • Redundancy and fail-over
  • 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
    • Fonts — proportion, scaling, balance
    • Line-spacing — Leading
    • Text alignment and justification

Course contents — 7 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

Course contents — 8 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

Dates for Online courses

Dates for Barcelona

Dates for Milan

Dates for Rome

Dates for Florence

Dates for Frankfurt

Dates for Bologna

Dates for Amsterdam

Dates for Berlin

Dates for Paris

Dates for Cologne

Dates for Brussels

Dates for Dublin

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.

The Web Design Academy Contact us

By form

By Phone

+44 (0)113 234 4611

By email

enquiries@thewebdesign.academy

By snail mail

Suite 3 15 South Parade Leeds LS1 5PQ United Kingdom