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
- Not the HTML
- How the web works — clients and servers
- Browsers and web design
- Rendering & browser incompatibility
- Without CSS or JavaScript
- Current and legacy browsers
- 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-boxvs.content-boxsizing
- 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
inputelement - Radio, checklist, reset and submit buttons
- The
selectelement - The
textareaelement
- The
- 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 Brussels
- Tuesday 4 Feb 2025 Arts-loi / Kunst wet €1020 Book
- Tuesday 11 Mar 2025 Arts-loi / Kunst wet €1020 Book
- Tuesday 15 Apr 2025 Arts-loi / Kunst wet €1020 Book
Dates for Antwerp
- Tuesday 15 Apr 2025 Antwerp Centraal €1020 Book
- Tuesday 20 May 2025 Antwerp Centraal €1020 Book
- Tuesday 24 Jun 2025 Antwerp Centraal €1020 Book
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.