Webpage Design

Introduction

Course code : DESI1183
Course co-ordinator : David Watson
Course weighting : 40 credits

This course covers the design and implementation of web pages and small websites. It is concerned with the client-side technologies, XHTML and CSS and includes an introduction to JavaScript and jQuery. The course also covers an introduction to the server-side technologies, PHP and MySQL since even small sites can benefit from the use of dynamic techniques. It also aims to develop an understanding of webpage aesthetics and looks at the use of colour, images, typography and general graphic design principles, although these are covered in more detail during the Applied Art for the Web course. It also covers the web design process, from client brief through to deployment and promotion. As such, it can be considered a general introduction to web design which is why this is the first course taught on the Web Design & Content Planning programme.

With a group of students from diverse backgrounds, a programme such as Web Design & Content Planning requires some common currency among those taking part. This course acts as a foundation for further study and discussion. As such, we will cover some basic aspects of web design. This is not to undervalue what you already may know but to ensure that everyone has the same basic understanding of the issues.

This course is about the technical and aesthetic aspects of web design in equal measure. The course is not about learning how to use any particular piece of software. It is about gaining a fundamental understanding of how the web works and how to create webpages to a high standard. Web design is very much the same as other design disciplines and many of the topics covered are equally relevant to areas such as graphic design and so, some of the references may not necessarily be specific to web design but are relevant nonetheless.

Aims and Outcomes

To understand what the web is and how webpages are composed.
To learn how to approach the design of simple websites.
To develop the skills needed to implement the design.
To understand how to conform to web standards and how to test webpages.
To learn how to be self-critical and how to assess the work of others.

Format

The course runs during Term 1 and consists of four main elements - workshops, online dialogue, coursework and projects.

Workshops

The workshops will focus on "webpage design" in the widest sense of the words. We will cover both technical and aesthetic aspects during the workshops and lively dialogue is encouraged. The various topics are given on the timetable although this is only meant to be indicative and may change to suit specific requirements. Detailed tutorials etc. may be given at the workshop sessions or made available on-line. It must be stressed that complete coverage of the topics under consideration cannot be dealt with during the workshops and you will need to allocate time to follow up each workshop with further study.

Online Dialogue

Online teaching and support is available from a number of resources. Firstly, you may contact the course tutor by email. However, for general comment and discussion, students should engage with the course tutor, other tutors and other students on the programme at the online forum. This is a public forum, specifically set up for this programme but it also has a number of private areas where course and programme specific topics can be discussed. It is well used and a popular method of communication among the other students. Your questions will be answered either by the course tutor or by other members of the forum. Use of the forum is an integral part of the learning process and you are expected to become active members. We see the forum as being a way of documenting current trends and news and a place for discussion. The forum already contains a large amount of information and is a valuable resource tool as well as an excellent "forum" for debate.

Online activity also includes blogging and commenting on other students' blog posts. You will be provided with a personal blog for the submission of written work but you may also use the blog to publish any relevant material.

Coursework

Each week you will be given one or more tasks and some recommended reading to be completed for the following week when feedback will be given. Some tasks will build on work completed the previous week so it's important not to fall behind. Coursework will be assessed at the end of the course. You will be provided with web some web space with FTP access so that you can put your coursework online. This enables tutors and students to look at coursework outside of normal teaching times and allows you the flexibility to work whenever convenient.

Projects

In addition to the weekly coursework, there are 2 projects that must be completed by the dates given in the course schedule and made available online using the web space provided. In general, project briefs are issued after relevant topics have been covered in the workshops to ensure that all students are able to complete the work. A studio crit is held the week before submission so that help, advice and feedback can be given before project work is submitted. It is particularly important to meet deadlines for project work as they constitute 50% of the assessment for this course.

Student Websites

All student websites can be seen at www.webdesignstuff.co.uk. Access to coursework and project work is password protected. Access credentials can be found in the private area of the forum.

Schedule

The course schedule gives an overview of the timetable, weekly topics and submission dates for this course. There may be occasional changes, so check back frequently.

2011-12 Session
Date	Room	Title
28th Sep 2011	T301	What is web design? (1.00pm to 3.30pm)
28th Sep 2011	T301	Web design process and tools (3.45pm to 6.00pm)
5th Oct 2011	T301	Web Thesis Project final presentations (1pm to 6pm)
12th Oct 2011 (am)	M057	The structural layer – XHTML
12th Oct 2011 (pm)	T301	The structural layer – XHTML
19th Oct 2011 (am)	M057	The presentation layer – CSS
19th Oct 2011 (pm)	T301	The presentation layer – CSS
26th Oct 2011 (am)	M057	Images and colour
26th Oct 2011 (pm)	T301	Images and colour
2nd Nov 2011 (am)	M057	CSS Typography *
2nd Nov 2011 (pm)	T301	CSS Typography *
9th Nov 2011 (am)	M057	Page layout and structural elements
9th Nov 2011 (pm)	T301	Page layout and structural elements
16th Nov 2011 (am)	M057	Standard methods and good practice **
16th Nov 2011 (pm)	T301	Standard methods and good practice **
23rd Nov 2011 (am)	M057	The future now – CSS3 for fun *******
23rd Nov 2011 (pm)	T301	The future now – CSS3 for fun *******
30th Nov 2011 (am)	M057	The behavioural layer – JavaScript and jQuery †
30th Nov 2011 (pm)	T301	The behavioural layer – JavaScript and jQuery †
7th Dec 2011 (am)	M057	PHP for site modularity ††
7th Dec 2011 (pm)	T301	PHP for site modularity ††
14th Dec 2011 (am)	M057	PHP, databases and dynamic content †††
14th Dec 2011 (pm)	T301	PHP, databases and dynamic content †††

* Small Business Website project brief issued
** Small Business Website project interim crit
*** Small Business Website project submission and crit
† Website Makeover project brief issued
††Website Makeover project interim crit
†††Website Makeover project submission and crit

All face-to-face sessions are 3 hours long and take place on Wednesday mornings (am); beginning at 10.00am in M057 or afternoons (pm); beginning at 2.00pm in T301 unless otherwise indicated.

See the programme teaching schedule for an overview of all courses.

Course Documents

These documents contain all the information about the course, projects, weekly coursework and references. All documents are provided in PDF format. Some documents are also provided in appropriate alternative formats. In order to view the PDF files, you will need the Adobe Reader. The PowerPoint Show (.ppsx) files can be viewed using the Microsoft PowerPoint Viewer if you don't already have PowerPoint installed.

There are currently 40 files in this section

File Listing
Filename	Size (KB)	Date Modified
Class 01 - Coursework.pdf	89.2	29th Sep 2011
Class 01 - What is Web Design.pdf	5,094.1	28th Sep 2011
Class 01 - What is Web Design.ppsx	5,175.2	28th Sep 2011
Class 02 - Coursework.pdf	169.3	29th Sep 2011
Class 02a - The Web Design Process.pdf	2,020.2	28th Sep 2011
Class 02a - The Web Design Process.ppsx	2,070.4	28th Sep 2011
Class 02b - Domain Names and Web Hosting.pdf	706.1	28th Sep 2011
Class 02b - Domain Names and Web Hosting.ppsx	830.5	28th Sep 2011
Class 03 - Coursework.pdf	92.2	12th Oct 2011
Class 03 - The Structural Layer.pdf	785.6	12th Oct 2011
Class 03 - The Structural Layer.ppsx	750.9	12th Oct 2011
Class 04 - Coursework.pdf	109.9	18th Oct 2011
Class 04 - The Presentation Layer.pdf	604.5	18th Oct 2011
Class 04 - The Presentation Layer.ppsx	662.6	18th Oct 2011
Class 05 - Coursework.pdf	91.3	25th Oct 2011
Class 05 - Images and Colour.pdf	2,071.6	25th Oct 2011
Class 05 - Images and Colour.ppsx	2,171.1	25th Oct 2011
Class 06 - Coursework.pdf	88.2	8th Nov 2011
Class 06 - CSS Typography.pdf	1,348.1	1st Nov 2011
Class 06 - CSS Typography.ppsx	1,667.6	1st Nov 2011
Class 07 - Coursework.pdf	85.7	9th Nov 2011
Class 07 - Page Layout.ppsx	5,067.8	12th Nov 2011
Class 07 -Page Layout.pdf	4,156.6	12th Nov 2011
Class 08 - Coursework.pdf	86.0	15th Nov 2011
Class 08 - Navigation with CSS.pdf	753.4	17th Nov 2011
Class 08 - Navigation with CSS.ppsx	873.3	17th Nov 2011
Class 09 - Coursework.pdf	84.5	23rd Nov 2011
Class 09 - CSS3 for Fun.pdf	298.9	23rd Nov 2011
Class 09 - CSS3 for Fun.ppsx	621.1	23rd Nov 2011
Class 10 - Coursework.pdf	108.0	1st Dec 2011
Class 10 - The Behavioural Layer.pdf	386.1	5th Dec 2011
Class 10 - The Behavioural Layer.ppsx	436.1	5th Dec 2011
Class 11 - Coursework.pdf	87.4	6th Dec 2011
Class 11 - PHP for Site Modularity.pdf	1,016.4	6th Dec 2011
Class 11 - PHP for Site Modularity.ppsx	414.8	6th Dec 2011
Class 12 - Coursework.pdf	86.7	13th Dec 2011
Class 12 - MySQL Databases with PHP.pdf	666.9	13th Dec 2011
Class 12 - MySQL Databases with PHP.ppsx	401.1	13th Dec 2011
Project 1 - Small Business Website.pdf	90.2	3rd Nov 2011
Project 2 - Website Makeover.pdf	87.2	1st Dec 2011

Reference Documents

These documents are useful references. They are mostly extracts and sample chapters from some of the books on the reading list. You will find references to some of these documents in the weekly reading recommendations.

There are currently 14 files in this section

File Listing
Filename	Size (KB)	Date Modified
Build Your Own Website The Right Way.pdf	9,102.3	2nd Mar 2011
CSS Anthology 2nd Ed sample chapters.pdf	5,409.4	2nd Mar 2011
CSS Anthology sample chapters.pdf	2,201.0	2nd Mar 2011
Designing Without Tables sample chapters.pdf	2,802.4	2nd Mar 2011
JavaScript Anthology sample chapters.pdf	1,913.6	2nd Mar 2011
Modern Web Design sample chapters.pdf	1,120.5	2nd Mar 2011
Simply JavaScript sample chapters.pdf	1,828.5	2nd Mar 2011
The Art and Science of CSS sample chapters.pdf	3,863.0	2nd Mar 2011
The Glass Wall.pdf	8,073.0	2nd Mar 2011
The Photoshop Anthology chapter 1.pdf	4,509.6	2nd Mar 2011
The Photoshop Anthology chapter 2.pdf	3,542.9	2nd Mar 2011
The Photoshop Anthology chapter 3.pdf	4,117.5	2nd Mar 2011
The Ultimate HTML Reference sample chapter.pdf	1,531.2	2nd Mar 2011
Web Standards Creativity sample chapters.pdf	1,981.2	2nd Mar 2011

Worked Examples

Documents in this section are designed to illustrate some of the ideas discussed during the workshops. New examples will be added as and when appropriate.

There are currently 13 files in this section

File Listing
Filename	Size (KB)	Date Modified
nav_back_highlight.gif	0.7	2nd Mar 2011
nav_back_normal.gif	0.7	2nd Mar 2011
sprite.png	1.9	2nd Mar 2011
week_3_index.html	0.4	2nd Mar 2011
week_3_main.css	0.4	2nd Mar 2011
week_4_sprite.html	1.1	2nd Mar 2011
week_5_font_embed.html	2.1	2nd Mar 2011
week_5_typography.html	6.0	2nd Mar 2011
week_6_border_trick.html	2.7	2nd Mar 2011
week_6_page_design_styled.html	6.6	2nd Mar 2011
week_6_page_design_styled_image.html	6.8	2nd Mar 2011
week_6_page_design_unstyled.html	5.3	2nd Mar 2011
week_6_page_layout.html	3.0	2nd Mar 2011

Working with list item floats

There are currently 9 files in this section

File Listing
Filename	Size (KB)	Date Modified
centred-flush-h1.css	0.5	24th Nov 2011
centred.css	0.3	25th Oct 2011
change-order.css	0.5	24th Nov 2011
cow-parsley.jpg	22.5	25th Oct 2011
globe-artichoke.jpg	13.8	25th Oct 2011
hawthorn.jpg	13.7	25th Oct 2011
index.html	3.4	24th Nov 2011
left.css	0.3	25th Oct 2011
right.css	0.3	25th Oct 2011

CSS 3-column layout (faux columns)

There are currently 4 files in this section

File Listing
Filename	Size (KB)	Date Modified
column-bottom.png	1.3	17th Nov 2011
column-middle.png	0.9	17th Nov 2011
column-top.png	1.3	17th Nov 2011
index.html	3.9	17th Nov 2011

CSS navigation

There are currently 7 files in this section

File Listing
Filename	Size (KB)	Date Modified
nav-back-hover.png	1.0	14th Nov 2011
nav-back.png	1.0	14th Nov 2011
no-floats.html	1.1	17th Nov 2011
no-images.html	2.3	15th Nov 2011
single-image.html	1.0	15th Nov 2011
sprite.png	1.1	14th Nov 2011
two-images.html	1.0	15th Nov 2011

CSS3

There are currently 1 files in this section

File Listing
	Filename	Size (KB)	Date Modified
	index.html	1.6	22nd Nov 2011

JavaScript and jQuery

There are currently 15 files in this section

File Listing
Filename	Size (KB)	Date Modified
javascript_01_change_page_background.html	2.5	24th Nov 2011
javascript_02_change_colour.html	2.2	5th Dec 2011
javascript_03_change_multiple.html	2.7	24th Nov 2011
javascript_04_change_text.html	2.1	24th Nov 2011
javascript_05_hide.html	1.9	24th Nov 2011
javascript_06_new_window.html	1.8	24th Nov 2011
jquery_00_inline_event_handler.html	2.9	24th Nov 2011
jquery_01_id_selector.html	3.8	24th Nov 2011
jquery_02_class_selector.html	3.5	24th Nov 2011
jquery_03_toggle.html	3.1	24th Nov 2011
jquery_04_slidetoggle.html	3.2	24th Nov 2011
jquery_05_tabs.html	5.1	24th Nov 2011
jquery_06_accordion.html	2.9	7th Dec 2011
jquery_07_accordion.html	4.5	12th Dec 2011
window.html	0.9	24th Nov 2011

Assessed Elements

This course includes 4 assessed elements; coursework, online activity and two projects. Details of these elements are given below. Each of the elements has a slightly different weighting and this is indicative of the degree of difficulty and/or the amount of work required. The weighting is as follows:

Coursework: 40%
Online activity: 10%
Small Business Website: 25%
Website Makeover: 25%

Project outlines are given below but the full brief for each project is available is the Documents section of this page.

Project Details

Small Business Website

You will design and produce a basic website for a small business concern. This project will give you the opportunity to implement some of the techniques and design ideas you have developed during the first part of the course. This project will be used to help demonstrate some of the issues involved with the development of small websites including: the design process, colour and typography, site structure and navigation, standards compliant and semantic coding. You will be given a detailed brief when the project is introduced.

Website Makeover

Some websites are built from scratch, but increasingly, web designers have to learn how to redesign existing sites. For this project, you will take an existing website and redesign it using the same content. This will give you the opportunity to critically assess the current site and to make improvements where you think they are required. You should undertake an analysis of the inherent problems with the existing design and provide an explanation of how these have been resolved in your new design. You will be given a detailed brief when the project is introduced.

Online Resources

There are literally hundreds of good web design sites on the web but a few are outstanding with excellent content added on a regular basis. I recommend that you read both A LIST Apart and Smashing Magazine regularly.

Website Architecture - The programme website
Website Architecture Forum - The programme forum
Opera Web Standards Curriculum - complete set of tutorials for learning web design
Learn HTML and CSS: An Absolute Beginner's Guide - Sitepoint
The Ultimate HTML Reference - Sitepoint
The Ultimate CSS Reference - Sitepoint
A LIST Apart - Essential reading for people who make websites
Digital Web Magazine - More essential reading for website makers
Smashing Magazine - Excellent web design magazine with daily articles
CSS Tricks - Excellent CSS tutorials by Chris Coyier
Echo Echo.Com - Excellent general resourse site with tutorials and articles
Added Bytes - Articles, tools and great advice from Dave Child
Sitepoint - Book extracts, articles and tutorials
Web Style Guide - Compulsory reading; the online version of the book
W3 Schools - Probably the best web coding tutorial and reference site on the web
World Wide Web Consortium - Dry and dense but they build the foundations of the web
Lorem Ipsum - If you need some text padding for design layouts, use this handy generator

Class 1 Links ~ What is web design?

The World Wide Web - Wikipedia
Process - Web Style Guide
Page Design - Web Style Guide
How the web went world wide - BBC News

Class 2 Links ~ Web design process and tools

Domain Name - Wikipedia
Nominet - The Internet registry for .uk domain names
UK Top Hosts - Hosting reviews and articles
How domain name servers work - Howstuffworks
Domain Name System - Wikipedia
Getting your content online - Opera Web Standards Curriculum
35 Useful Source Code Editors Reviewed - Smashing Magazine

Choosing a Domain Name

Tips on choosing a good domain name - The Site Wizard
Top 10 tips for choosing a business domain name - Byte Start
How to Choose a Domain Name for your Website - Quick on the Net
12 Rules for Choosing the Right Domain Name - SEOmoz
12 Excellent Tools for Picking a Domain Name - Six Revisions

Domain Detective Tools

DomainTools - Get detailed information on any domain
Domain Crawler - More detailed information on any domain

Domain Name Registration

Web Hosting

Clook Internet UK - Small independent host offering a full range of options.
WebFusion - Popular value host with lots of options
Heart Internet - Another popular value host with lots of options
Fasthosts - Very popular host with own infrastructure and wide range of options
Eco Web Hosting - A carbon neutral option
Memset - Dedicated Servers and Cloud Hosting

Class 3 Links ~ The structural layer - XHTML

W3Schools - Online Web Tutorials
HTML Dog - Excellent HTML tutorial for beginners by Patrick Griffiths
W3C Markup Validation Service
W3C Link Checker Service
Semantics in HTML - 3-part article by John Allsopp

Video tutorials

HTML: Validation

Class 4 Links ~ The presentation layer - CSS

Beginner's guide to CSS - Friendly Bit
Selectutorial - Excellent CSS Tutorials
W3Schools - Online CSS Tutorials
HTML Dog - Excellent CSS tutorial for beginners by Patrick Griffiths
W3C CSS Validation Service
CSS Hacks - A useful listing of hacks for different browsers
Creating Sexy Stylesheets - 10 top tips for improving your CSS
The 30 CSS Selectors you Must Memorize - net tuts+
CSS Zen Garden - the beauty of CSS design

Interactive Colour Pickers

Color Palette Creator - Slayer Office
Color Scheme Designer - Excellent tool
EasyRGB.com - Lots of useful colour tools
Color Palette Generator - Create colour schemes from images

Images and CSS

CSS Background Tutorial - tizag.com
CSS Float Image - tizag.com
Floating an image to the right - Floatutorial

Class 6 Links ~ CSS Typography

Typography

CSS Typography: The Basics - Six Revisions
CSS Typography: Techniques and Best Practices - Six Revisions
CSS Typography: Examples and Tools - Six Revisions
The Ultimate Guide to CSS Typography - three{styles}
10 Examples of Beautiful CSS Typography and how they did it… - 3.7 Designs
px – em – % – pt – keyword - CSS Tricks*
I Love Typography - Excellent blog by John Boardley
Typography on the Web - Opera Web Standards Curriculum
Typography - Web Style Guide
Text Styling with CSS - Opera Web Standards Curriculum
The Elements of Typographic Style Applied to the Web - Excellent primer by Richard Rutter
Microsoft Typography - Useful information on Windows fonts
The Anatomy of Web Fonts - Sitepoint
Accessible Web Typography - an introduction for web designers
Ipsum Lorum - Need some body text as a filler?
CSS Typography - Digital Web Magazine
Six ways to improve your web typography - net tuts +
What Font Should I Use? - Smashing Magazine

Font Services

Web font hosting services - An Overview - sprungmarker
Google Web Fonts - Free fonts fron Google
Typekit - Adobe's font service
Fonts Live - by Monotype
Font Deck - Home grown, excellent UK-based service
Font Squirrel - The free font service
Fonts.com - The original font delivery service with a massive catalogue

Class 7 Links ~ Page layout with CSS

CSS Positioning and Floats

CSS Positioning 101 - A List Apart
CSS Floats 101 - A List Apart
Floats video tutorial - Treehouse
The Mystery Of The CSS Float Property - Smashing Magazine
All About Floats - CSS Tricks
Floatutorial: simple tutorials on CSS floats - Max Design
Floats and Clearing - Opera Web Standards Curriculum
Create Sidebars of Equal Height with Faux Columns - Line 25
Force Element To Self-Clear its Children (clearfix) - CSS Tricks
Sample CSS Page Layouts - Max Design
Ruthsarian Layouts
Little Boxes - The Noodle Incident
In Search of the Holy Grail - A List Apart
CSS3 module: Multi-column layout - W3C Working Draft

Video tutorials

HTML & CSS: Clear fixes

Grid-based page design

Page Structure - Web Style Guide
Page Design - Web Style Guide
Five simple steps to designing grid systems - Mark Boulton
Grid design basics: Grids for Web page layouts - Craig Grannell
Establishing Your Grid In Photoshop - Smashing Magazine
Headers, Footers, Columns and Templates - Opera Web Standards Curriculum
Design by Grid - Articles and resources
The 960 Grid System - Roll your own…

Class 8 Links ~ CSS for Navigation

Lists for Navigation

CSS Design: Taming Lists - A List Apart
Listamatic - one list, many options
Turning a list into a navigation bar - 456 Berea Street
Sliding Doors of CSS - A List Apart
30 Exceptional CSS Navigation Techniques - Six Revisions
CSS-Based Navigation Menus: Modern Solutions - Smashing Magazine
Nifty Navigation Tricks Using CSS - Sitepoint

CSS Image Rollovers

Simple CSS Rollover (no images) - Max Design
CSS Image Rollovers - Webvamp
Making CSS Rollover Buttons - Elated

Class 9 Links ~ CSS3 for fun

The No-Pressure Introduction to CSS3 - onextrapixel
CSS3.info - They say: Everything you need to know about CSS3
CSS3 Tutorial - W3Schools
20 Useful Resources for Learning about CSS3 - Six Revisions
CSS3 - What is it? - 6 part tutorial from Design Shack
CSS3 Generator - A simple way to create rules by selecting effects
Learning CSS3: A Reference Guide - Smashing Magazine
Basic CSS3 Techniques you should know - Six Revisions
CSS3 Techniques you should know - Six Revisions

Video tutorials

Various CSS3 video tutorials - Treehouse
CSS3: Introduction
CSS3: Border radius
CSS3: Advanced box shadows
CSS3: Multiple backgrounds
CSS3: Attribute selectors

Class 10 Links ~ The behavioral layer - JavaScript and jQuery

Video tutorials

jQuery for Absolute Beginners: The Complete Series - net tuts+
jQuery Tutorials for Beginners - Niall Doherty
jQuery for absolute beginners - part 1
jQuery for absolute beginners - part 2
Create an accordion with jQuery

Creating a jQuery accordion menu/navigation

Exactly How to Create a Custom jQuery Accordion - net tuts+
Accordion Madness - Learning jQuery
Making accordion menu using jquery - Roshan's Blog
Accordion - jQuery UI
30 jQuery Accordion Menus, Tutorials And Best Examples - 1st Web Designer

Ajax

Ajax - Wikipedia
Ajax: A New Approach to Web Applications - adaptive path

Class 11 Links ~ PHP for site modularity

PHP Tutorials and Introductions

Getting Started - php.net the official PHP site
PHP For the Absolute Beginner - Zend Developer Zone (excellent tutorials)
PHP Tutorial - W3Schools - up to their usual high standard
PHP Tutorial - Free Webmaster Help - very good introduction
PHP Tutorial - Learn PHP - Tizag.com - nice simple and clear tutorials
Learn PHP Online - Excellent site dedicated to teaching PHP to the beginner
PHP Cheat Sheet - Added Bytes
Good PHP Tutorials - Useful range of articles and tutorials at intermediate level
The PHP Basics - Good video tutorials for PHP beginners

Dates and Times with PHP

PHP date Manual - definitive listing of date parameters
PHP date() Function - W3 Schools
PHP date function - Tizag.com
How to Create a Time Based CSS Style Sheet Switcher - net tuts+

Random Images with PHP

Drop-Dead Easy Random Images via PHP - Perishable Press
Random Images with PHP - Devlounge

Current Page Navigation with PHP

Keeping Navigation Current With PHP - A List Apart
User-friendly Contextual Navigation with Simple PHP Includes - Brainstorms & Raves

Modular websites with PHP includes (server side includes)

The include function - tizag.com
include() - PHP Manual
PHP include() and require() - W3Schools
Building a website using PHP Includes - stevedawson.com
PHP Include tutorial - Learn PHP Online

General PHP resources and articles

PHP Articles - Digital Web Magazine
Server Side Articles - A List Apart
Tutorials, articles and scripts - The PHP Resource Index
PHP resources and scripts - Hotscripts.com

Class 12 Links ~ PHP, databases and dynamic content

General MySQL resources and articles

MySQL - The official home
MySQL information - Wikipedia
MySQL Cheat Sheet - Added Bytes
phpMyAdmin - The world's favourite MySQL management interface

MySQL tutorials

MySQL Tutorial - tizag.com
PHP/MySQL tutorial - Free Webmaster Help
MySQL Introduction - W3Schools
MySQL Introduction - Virtual Workshops - excellent and comprehensive

PHP & MySQL useful stuff

Connect to MySQL database - PHP MySQL Tutorial
Build a query and extract data - Tutorials Point
Dates in PHP and MySQL - Richard Lord - excellent, clear tutorial

PHP & MySQL security

PHP Security Guide - PHP Security Consortium
Writing Secure PHP - Added Bytes - excellent 4 part article

There are literally hundreds of open source and pay-for web applications that use PHP and MySQL. The lists below merely indicate the most popular and those that you should know about.

Forum Software

Forum Software Reviews - Excellent site for news, information and reviews
phpBB - The most popular open source forum solution
Simple Machines - Another well respected open source solution
vBulletin - The most popular commercial forum software
IP.Board - (Invision Power Board) Commercial forum software with a well designed interface
Xenforo - The latest board on the block

Blog Software

WordPress - By far the most popular open source blog software
TextPattern - A good second choice
b2evolution - Open source blog software with bells and whistles
ExpressionEngine - Robust and extendable system - not open source but free for personal use
Movable Type - Very popular pay-for blog software but uses Perl, not PHP

CMS (Content Management System) Software

Joomla! - Very popular open source CMS, high on function and style
Drupal - Also very popular, high on architecture and flexibility
Expression Engine - Popular "retrofit" CMS giving great design freedom
Perch - Small, light and simple to use
CMS Builder - Simple to use but powerful CMS

Portal Software

PHP-Nuke - The grandad of open source community CMS and portal software
XOOPS - open source CMS and portal solution for community sites

Wiki Software

MediaWiki - The open source software used for Wikipedia, say no more
TikiWiki - A next best option for open source wiki software

PHP script libraries

Hotscripts PHP scripts - Just about anything you need can be found here
PHP Resource Index - if you can't find what you're looking for at Hotscripts, look here

Further topics

Filters: hacks and conditional comments

Keep CSS Simple - Digital Web Magazine
About Conditional Comments - MSDN
Call to action: The demise of CSS hacks and broken pages - IEBlog
How to… use conditional comments - Blue Anvil
Valid downlevel-revealed conditional comments - 456 Berea Street
Using IE conditional comments for CSS - CVW Web Design Blog

Cross-browser checking

Test your web design in different browsers - Browsershots

Web design for mobile devices

CSS Mobile Profile 2.0 - The latest standard in CSS for mobile devices
Nokia Web Browser Design Guide - Excellent series of articles with some good advice
Make Your Site Mobile Friendly - Very good article from Vitamin magazine

Key Texts

We are very fortunate that there are now many excellent books on the topic of web design and to some extent, selecting a list of “key texts” is a matter of personal preference. However, the books below have been chosen specifically to match the structure and content of this course and to appeal to students at an introductory level. Students who want to broaden and deepen their knowledge may want to progress to those texts listed in the Further Reading section.

Two of the texts listed here form an either/or choice. For those students who are completely new to web design and don't know their HTML from their CSS, I recommend the Head First HTML with CSS and XHTML book. For those who already have some experience of web coding, I suggest The Essential Guide to CSS ans HTML Web Design. You don't need to read both of these books.

Since web design is a fast evolving discipline, it's a good idea to keep up with current trends by reading online magazines (see below) and blogs. However, it's still nice to receive your news, reviews and articles in paper format. As far as printed magazines are concerned, there is only one worth mentioning and that is .net magazine. It's an excellent publication, covering all the areas of concern for students on this programme and I recommend that you subscribe to it. The online magazines listed below are just the most useful of many currently publishing useful material, so this should be considered a partial list only.

Essential Text Books

Above the Fold by Brian Miller ¦ details
Head First HTML with CSS and XHTML by Elizabeth Freeman and Eric Freeman ¦ details
The Essential Guide to CSS and HTML Web Design by Craig Grannell ¦ details
Web Standards Solutions (2nd Ed.) by Dan Cederholm ¦ details
Web Style Guide (3rd Ed.) by Patrick J. Lynch and Sarah Horton ¦ details
Design Elements: A Graphic Style Manual by Timothy Samara ¦ details
The Book of CSS3 by Peter Gasston ¦ details
jQuery: Novice to Ninja by Earle Castledine and Craig Sharkie ¦ details
PHP Solutions: Dynamic Web Design Made Easy (2nd Ed.) by David Powers ¦ details

Reference Books

The Ultimate HTML Reference by Ian Lloyd ¦ details
The Ultimate CSS Reference by Tommy Olson and Paul O'Brien ¦ details

Essential Magazines

.NET Magazine (published monthly) ¦ details
A List Apart (online) ¦ details
Smashing Magazine (online) ¦ details
Six Revisions (online) ¦ details
Impressive Webs (online) ¦ details
Mashable (online) ¦ details

Essential Text Books

The books in this section form a core of texts that cover all the topics addressed during the Webpage Design course. During the course, you will be asked to do weekly reading and in most cases, it will be from these books. Many of them are available from the library but you should probably aim to own a copy of at least 3 or 4 of them, with Craig Gannell's Essential Guide to CSS and HTML Web Design or Head First HTML and Above the Fold being top of your list.

Above the Fold by Brian Miller

Above the Fold is an ideal book for the web design newbie. Although it doesn't cover any particular topic in any great depth, it gives a great overview of the visual web design process and covers everything from the history of the web to the use of analytics via web page anatomy, typography, site planning, marketing and SEO. This book won't teach you how to code but it makes the perfect companion to your favourite book on HTML and CSS. It's printed in full colour with lots of really informative illustrations and lots of examples of websites that clearly illustrate the points made in the text. The book is a quick and easy read but there's enough here to make it a great reference too.

From the introduction: “The phrase ‘above the fold’ reminds us that there are both close similarities and vast differences between print and Web design. The principles of space usage, typography, and other elements of effective hierarchical communication are essential to both print and Web design, but the methods of achieving these principles involve different skill sets and consideration for the end user. That's what this book is about – the fundamentals of graphic design and the specific considerations a designer makes for effective web communication. And it's the reason Above the Fold is a fitting title.”

If I have one small criticism, it is that the book shows a bias towards the author's particular area of expertise (typography) but for those who need a visual design primer for the web that takes in other considerations like standard IAB banner sizes, this book is perfect.

Above the Fold is available at Amazon.co.uk

Avery Hill Library copies: 10 ~ view catalogue entry

Head First HTML with CSS and XHTML by Elizabeth Freeman and Eric Freeman

I have to hold my hands up and concede that when I first came across this book, I was very sceptical about its style and how well it was able to communicate its message. Well, I was just plain wrong. Head First HTML, in spite (or possibly because) of its quirky delivery style is a brilliant book for beginners. It is ideally suited to those who have never heard of HTML or CSS but who want to learn how to build websites the right way.

From the back cover: “We think your time is too valuable to waste struggling with new concepts. Using the latest research in cognitive science and learning theory to craft a multi-sensory learning experience, Head First HTML with CSS and XHTML uses a visually rich format designed for the way your brain works, not a text-heavy approach that puts you to sleep.”

The curious thing is, this doesn't look like a professional-level book but it does take a professional-level approach to the subject of web design. Just like the best modern books on the subject, it stresses the importance of semantic markup, of separating content from presentation, and of code validation. It also is very careful not to assume any previous knowledge and begins by suggesting some simple software tools (text editors) for coding and later, a great introduction to FTP. Many other books would simply assume you already knew this stuff or expect that you'd pick it up along the way.

So this is a fantastic book for absolute beginners but not designed for those who already have some basic experience of web design – there are plenty of other excellent books out there for you.

Head First HTML with CSS and XHTML is available at Amazon.co.uk

Preview Head First HTML with CSS and XHTML at Google Books

Avery Hill Library copies: 12 ~ view catalogue entry

The Essential Guide to CSS and HTML Web Design by Craig Grannell

At long last, here is a book that talks about “a modern, modular approach to standards-compliant web design” in a clear, logical and friendly manner. No small feat because contemporary web design practice is complex and a good understanding of a whole range of topics is required in order to master the art.

Craig Grannell approaches the topic by looking at various aspects of web design, with chapters like “Working with Type” and “Page layouts with CSS” rather than the more prosaic approach of many code-based books. The initial chapters of the book give a comprehensive background and primer to HTML and CSS but avoid the mistake of looking at code in the abstract. All through the book, code examples are illustrated with the rendered result so that the reader can make a clear connection between code and image.

This is an excellent book that covers a lot of ground (it even includes some useful JavaScript techniques) and is probably the best single volume introduction for anyone serious about web design. If I have one criticism it is that the book is a little dry and there are few concessions for absolute beginners but it is highly recommended for those who want to improve their web design skills.

The Essential Guide to CSS and HTML Web Design is available at Amazon.co.uk

Preview The Essential Guide to CSS and HTML Web Design at Google Books

Avery Hill Library copies: 4 ~ view catalogue entry

Web Standards Solutions (2nd Ed.) by Dan Cederholm

OK, so you learned about XHTML and you learned about CSS and you even learned about how they can work together. But what about technique and method? What is the best practice for creating navigation bars? Never fear, Dan Cederholm is here to show you how.

In truth, many of the methods described in this book are now standard practice for the seasoned web designer but for the beginner who has just got to grips with XHTML and CSS, this book is invaluable. The book focuses on best practice coding for the most common page elements such as headings, navigation, forms, page layout, styling text and, of course, image replacement. The book is well written and although it deals with some complicated issues, it does so in an easy and engaging way.

Web Standards Solutions (2nd Ed.) is available at Amazon.co.uk

Preview Web Standards Solutions (2nd Ed.) at Google Books

Avery Hill Library copies: 13 ~ view catalogue entry

Web Style Guide (3rd Ed.) by Patrick J. Lynch and Sarah Horton

The Web Style Guide (3rd Ed.) by Patrick J. Lynch and Sarah Horton is a relatively slim volume but it packs a lot in. The book is concise and clear and covers all the basic considerations of site and page design. In fact, this is the book you should read first if you are considering building a web site. It covers topics such as site hierarchy, page layout, typography and web graphics to name but a few. The book contains lots of example sites and explanatory diagrams, illustrated in full colour. This book is a perfect compliment to coding texts by covering the non-technical areas of web design.

Despite the fact that this book is now a few years old, it is not out-of-date because the authors have been careful not to focus on the technologies used for building websites nor the browsers used for displaying them. Rather, they consider the generic design elements of webpage and website design. These basic design principles hold true, irrespective of the technological context and in this 3rd edition, they bring the book up-to-date by considering the disign of contemporary webpages.

This book is excellent and it's even available free on the web in a HTML version at www.webstyleguide.com.

Web Style Guide (3rd Ed.) is available at Amazon.co.uk

Avery Hill Library copies: 16 ~ view catalogue entry

Design Elements: A Graphic Style Manual by Timothy Samara

Timothy Samara's book is a primer that illustrates and discusses all the basic principles of graphic design in a direct and easily digestible format. The book consists of 5 chapters; “Form and Space”, “Color Fundamentals”, “Choosing and Using Type”, “The World of Image” and “Putting it All Together”. Each one is lavishly illustrated with excellent examples that clearly illustrate the topic under consideration. Although the book is not specifically targeted at web designers, it covers the universal principles of graphic design that are as applicable to web design as they are to traditional analogue media design.

In addition to the 5 chapters, the reader will learn the author's “Twenty Rules for Making Good Design”, a very good checklist of what to do and what to avoid. Although a book of this nature cannot contain everything that may be relevant, this book comes close and is the best one-volume introduction to graphic design I have seen.

Design Elements: A Graphic Style Manual is available at Amazon.co.uk

Preview Design Elements: A Graphic Style Manual at Google Books

Avery Hill Library copies: 12 ~ view catalogue entry

The Book of CSS3 by Peter Gasston

The Book of CSS3 is not a book for CSS beginners, it is written for those who are already comfortable writing semantic markup with clear CSS2.1 for presentation.

From the back cover: “The Book of CSS3 distils the dense technical language of the CSS3 specification into plain English and shows you what CSS3 can do right now, in all major browsers. With real-world examples and a focus on the principles of good design, it extends your CSS skills, helping you transform ordinary markup into stunning, richly-styled web pages.”

This is an important book that guides you along the cutting-edge of CSS as it is used now and how it may be used in the future – the CSS3 specification is not finalised and the various modules are in different states of development, so it's important to understand what can be used now, what should be used with caution and what cannot be used. You would be forgiven for asking, “if CSS3 is in such a state of flux, why use it at all?” Well, the simple answer is that what there is of it at the moment is proving to be so useful to web designers that it is well worth adding it to your toolkit. Although CSS3 is a work in progress, it actually solves current web design problems that previous versions of CSS cannot.

Fortunately, this book is clearly written. Peter Gasston not only describes how CSS3 can be used but also demonstrates “bulletproof” methods of deployment that removes any doubt about its effectiveness in different browser environments. Reading the book, you get the impression that you're in a safe pair of hands and it will give you the confidence to create beautiful websites that just work.

The Book of CSS3 is available at Amazon.co.uk

Avery Hill Library copies: 12 ~ view catalogue entry

jQuery: Novice to Ninja by Earle Castledine and Craig Sharkie

These days, no web designer worth their salt needs to bother learning how to use JavaScript when there are fantastic JS libraries around like jQuery. This book assumes that you can write well-formed, semantic HTML and you are able to style websites using clear and concise CSS rules, so it's not for the absolute web design beginner. However, it doesn't assume any knowledge of JavaScript or any previous experience of jQuery.

From the introduction: “If you're a front-end web designer looking to add a dash of cool interactivity to your sites, and you've heard all the buzz about jQuery and want to find out what the fuss is about, this book will put you on the right track.

By the end of this book, you'll be able to take your static HTML and CSS web pages and bring them to life with a bit of jQuery magic. You'll learn how to select elements on the page, move them around, remove them entirely, add new ones with Ajax, animate them... in short, you'll be able to bend HTML and CSS to your will!”

This is a very readable book and jQuery newbies will be using the library in no time and adding simple behaviour to their websites soon after. As the title suggests, the reader can take this as far as they want but for a good, straightforward introduction to the world of jQuery, this is one of the best books around.

jQuery: Novice to Ninja is available at Amazon.co.uk

Avery Hill Library copies: 12 ~ view catalogue entry

PHP Solutions: Dynamic Web Design Made Easy (2nd Ed.) by David Powers

Here is a book on PHP for people who don't need to be PHP gurus. Most books on the subject tend to assume that you want to learn to use the scripting language like a pro but there are plenty of web designers out there (myself included) for whom PHP is just a convenient way of making websites more modular and a bit dynamic. This book then, is for the rest of us.

In this book, David Powers doesn't blind us with esoteric code, he just gives us enough to do the simple stuff that will make the difference and turn our sites from dull, static affairs into interesting, dynamic places.

From the back cover: “PHP Solutions starts at the ground level showing you how to set up PHP, how to write scripts, and how you can include them in your web pages… You don't need to know PHP or MySQL to follow this book, but even if you do you won't find yourself wading through needless exercises. The emphasis throughout is on discussing the most practical solutions to everyday problems faced by web designers and developers.”

PHP Solutions: Dynamic Web Design Made Easy (2nd Ed.) is available at Amazon.co.uk

Preview PHP Solutions: Dynamic Web Design Made Easy (2nd Ed.) at Google Books

Avery Hill Library copies: 6 ~ view catalogue entry

Essential Reference Books

You may not need these books in the first instance but as your work develops, you may find that you need something more comprehensive than the references that are often appended to most text books.

The Ultimate HTML Reference by Ian Lloyd

It may seem a bit geeky to have a whole book that just tells you what all the HTML tags are, what they do and what parameters they can use; oh, and how the various flavour of browser render them, but when the chips are down, a book like this can save your life. Well, not your life, obviously but it could save your sanity.

Since buying this book, I have found myself coming back to it again and again - it really is the authority. Not only does it contain references to all the tags you use every day but it also contains references to those tags and parameters you never knew existed. In short, this book helps you increase the width your knowledge of HTML and not just the depth. The Ultimate HTML Reference is available in a free online version at Sitepoint.

The Ultimate HTML Reference is available at Amazon.co.uk

Avery Hill Library copies: 3 ~ view catalogue entry

The Ultimate CSS Reference by Tommy Olson and Paul O'Brien

This book is possibly even more useful than its HTML partner because the browser support for CSS is much more variable than that for HTML and this book documents which browsers support the various CSS properties and which do not. Again, this can be a real sanity-saver for those occasions when the browser is just not rendering a page the way you intended.

The book is organised by property type but fortunately also includes an alphabetic index, so you always have two chances of finding what you need. There is also an excellent first chapter (What is CSS?) that describes how CSS works, the syntax of CSS rules and how to link CSS with your HTML pages. The Ultimate CSS Reference is available in a free online version at Sitepoint.

The Ultimate CSS Reference is available at Amazon.co.uk

Avery Hill Library copies: 6 ~ view catalogue entry

Essential Periodicals

The Web is ever-changing. New ideas in webpage design come and go and you need to keep up-to-date. Sadly, most web design text books are out-of-date after 2 or 3 years and the best way to stay in touch with emerging ideas and technologies is to subscribe to regularly published magazines. The magazines described below (paper and online) are some of the best around. Great new material on Web Design is being published all the time and it's a good idea to subscribe to RSS feeds and newsletters so that you at least get a digest of what's available.

.NET Magazine (published monthly)

.NET magazine has been around for a while but over the past few years it has matured into a magazine aimed at professional web designers and serious amateurs. The monthly articles are always relevant, well researched and full of useful information. The magazine has benefited from the work of an advisory panel of net worthies, including Andy Budd and Andy Clarke.

Each month also includes a number of technical articles on various topics relevant to the course by some excellent technical writers, including Craig Grannell. It is the best paper-based web design magazine and I recommend you take out a subscription.

In recent times, .NET has developed a really useful online version of the magazine with new articles published daily. It's well worth visiting regularly or adding to your list of RSS feeds.

A List Apart (online)

A List Apart "for people who make websites" is an e-zine that published new articles monthly. All content is free and there is now an extensive archive of articles on a range of relevant topics.

The articles are informative and well written and are often by well-known web luminaries like Dave Shea and Jeffrey Zeldman. This is all good stuff and free, so just read it and/or subscribe to the RSS feed.

Smashing Magazine (online)

Smashing Magazine is a fantastic resource. Articles are published daily and its focus is graphic design for the web. That's not to say there aren't plenty of technical articles on CSS, usability and interface design - there are, but it's a great place to go for inspiration and design ideas. The site also has a tutorials section, covering many graphic techniques and applications like Photoshop. The Smashing Network includes useful and relevant articles from other web blogs and magazines so it's a good central information hub.

Six Revisions (online)

Six Revisions is another excellent resourse that publishes new content almost daily. Topics vary widely; there is a bias towards graphic design (in a good way) but there is plenty on coding too. All the content is of high quality and all relevant to this programme. Tutorials are archived, so if you need to learn how to make web buttons in Photoshop, how to use visual weight in your designs or how to reset your CSS, there's a tutorial for that.

Impressive Webs (online)

Impressive Webs is a bolg/magazine that publishes content every few days. It has a more technical focus and there are very useful articles and tutorials covering all the relevant coding languages; HTML, CSS, PHP etc. Content is well written and the topics are always at the cutting edge of web design. It's a great place to see new techniques for using CSS3 and HTML5 for example and for advice on how browsers behave with these new technologies.

Mashable (online)

Mashable describes itself as a news site for social media and Web tips. In truth, it's rather more than that, covering a wide range of Web industry and technology news. As such, it's a great way of keeping up-to-date with what's going on in the online world. News items cover all the big players such as Google, Apple, Facebook, Microsoft and the like. News articles are published frequently (too many each day to read everything) but just scaning through the headlines is a good way to get an overview and then dip in to the ones of particular interest.

A Web Design Toolkit

Although most web designers will prefer to work with applications like Dreamweaver and Photoshop for maximum flexibility and functionality, it isn't really necessary. A perfectly adequate toolkit can be had for free. The applications listed below are all you need to create brilliant web pages.

Notepad++ - Excellent open source code editor with syntax highlighting.
FileZilla Client - Probably the best free/open source FTP client.
Paint.NET - Amazing free image and photo editor, similar interface to Photoshop.
Firefox - The open source and standards compliant browser.
Web Developer Toolbar for Firefox - Indispensable set of browser utilities for web designers.
Firebug for Firefox - Edit CSS live in a browser window; ideal for those pixel-perfect moments.
Code Burner for Firefox - Excellent HTML and CSS reference guide from SitePoint.

Aptana Studio Write your XHTML and CSS code in Notepad++, create and edit your images in Paint.NET, preview the results in Firefox and then upload to your web server using FileZilla.

If you prefer working in an integrated development environment, take a look at Aptana Studio. In a nutshell, it's Dreamweaver without the WYSIWYG editor and because it's open source, there is a free version.

Tutorials

FTP (File Transfer Protocol)

Files are copied from your local computer to the web server using a protocol known as FTP. To make the transfer, you need an FTP client - a software application. FTP clients such as FileZilla, Cyberduck and SmartFTP are commonly used for uploading files to web servers. However, software applications like Dreamweaver have their own built-in FTP client and can also be used for uploading files.

FTP Security

Some hosting services require that you unlock FTP on the web server before uploading files. This is a security feature and although it's an extra step in the process, it is good practice to keep your website as secure as possible by restricting FTP access.

If your website is hosted with Eco Web Hosting, you will need to login to your control panel and unlock FTP before atempting to upload files with your FTP client. There are 2 options for unlocking: time and IP address. In most cases, the simplest method is to unlock FTP for a set time period, during which you can upload files to the server. When the set time has elapsed, FTP is automatically locked again. The alternative method is to unlock FTP using your IP address. Unlocking this way means that files can only be uploaded from your current IP address. This method is a good option if you have a fixed IP address but as most broadband ISPs use dynamic IP addresses (they change every time your router reconnects to the Internet), it may not be convenient. This is especially true if you upload files to your site from different physical locations.

Connecting to your webspace with FileZilla

If you are using Eco Web Hosting, make sure you have unlocked FTP (see above) before you begin.

Enter the host name e.g. "www.webdesignstuff.co.uk".
Enter your username in the form "username@webdesignstuff.co.uk".
Enter your password.
Leave the "Port" option blank and click the "Quickconnect" button. You should see the file listing of your personal folder.
Be sure to upload your files to the web root folder; this is usually called public_html.

The index.html file is your personal homepage and may be edited. Do not edit or remove any of the other files or folders you find on the web server - they are there for a reason.

You can download the FileZilla FTP client here.

Connecting to your webspace with Dreamweaver

During site definition, click the "Advanced" tab and then select the "Remote Info" category.

Set the Access type to "FTP".
Enter the FTP host name e.g. "www.webdesignstuff.co.uk".
Leave the Host directory blank. Your account details will default to your home folder so you do not need to specify it.
Enter your Login username in the form "username@webdesignstuff.co.uk" and enter your password.
Click the "Test" button to make sure you can connect.

Webpage Design

Introduction

Aims and Outcomes

Format

Workshops

Online Dialogue

Coursework

Projects

Student Websites

Schedule

Course Documents

Reference Documents

Worked Examples

Working with list item floats

CSS 3-column layout (faux columns)

CSS navigation

CSS3

JavaScript and jQuery

Assessed Elements

Project Details

Small Business Website

Website Makeover

Online Resources

Class 1 Links ~ What is web design?

Class 2 Links ~ Web design process and tools

Choosing a Domain Name

Domain Detective Tools

Domain Name Registration

Web Hosting

Class 3 Links ~ The structural layer - XHTML

Video tutorials

HTML: Validation

Class 4 Links ~ The presentation layer - CSS

Class 5 Links ~ Images and colour

Interactive Colour Pickers

Images and CSS

Class 6 Links ~ CSS Typography

Typography

Font Services

Class 7 Links ~ Page layout with CSS

CSS Positioning and Floats

Video tutorials

HTML & CSS: Clear fixes

Grid-based page design

Class 8 Links ~ CSS for Navigation

Lists for Navigation

CSS Image Rollovers

Class 9 Links ~ CSS3 for fun

Video tutorials

CSS3: Introduction

CSS3: Border radius

CSS3: Advanced box shadows

CSS3: Multiple backgrounds

CSS3: Attribute selectors

Class 10 Links ~ The behavioral layer - JavaScript and jQuery

JavaScript

The DOM (document object model)

jQuery (a JavaScript framework/library)

Video tutorials

jQuery for absolute beginners - part 1

jQuery for absolute beginners - part 2

Create an accordion with jQuery

Creating a jQuery accordion menu/navigation

Ajax

Class 11 Links ~ PHP for site modularity

PHP Tutorials and Introductions

Dates and Times with PHP

Random Images with PHP

Current Page Navigation with PHP

Modular websites with PHP includes (server side includes)

General PHP resources and articles

Class 12 Links ~ PHP, databases and dynamic content

General MySQL resources and articles

MySQL tutorials

PHP & MySQL useful stuff

PHP & MySQL security

Forum Software

Blog Software

CMS (Content Management System) Software

Portal Software