All the exercises for the various Tutorials with finished sample web pages are listed here.
All the projects for the various Tutorials with finished sample web pages are listed here.
The Google Classroom for the course beginning Sept 23rd is here.
Installing and customising the two web browsers popular with web designers and web developers.View Tutorial
Creating a free GitHub account, choosing a username and setting up a repository for hosting your web pages.View Tutorial
Understanding the basic structure of an HTML file and recognising the elements commonly found in the <head> section.View Tutorial
Adding HTML tags to your web page, installing the Auto Rename Tag Extension, and uploading you files to GitHub.View Tutorial
Linking a web page to a CSS file, resetting browser default styles, and creating heading and paragraph styles.View Tutorial
Linking a stylesheet to a web page, and updating the style rules to change the visual appearance of a web page.View Tutorial
Understanding images, resetting browser defaults, discovering sources of free images, and adding images to your web pages.View Tutorial
Linking your web pages to Google Fonts and formatting text elements by adding Google Font names to your stylesheets.View Tutorial
Exploring the concept of the ‘box model’ and understanding the three main CSS properties of the div tag: padding, borders and margins.View Tutorial
Using the box model principles and the HTML div tag to create and style small, visually attractive panels of content in a web page.View Tutorial
Adding media queries to a CSS file so that web page elements can resize according to the width and height of the screen.View Tutorial
Applying the fluid typographic equation to scale font sizes responsively.View Tutorial
Create and style responsive two-column layouts using CSS flexbox, with fluid text, images and coloured backgrounds.View Tutorial
Create and style responsive three-column layouts using CSS flexbox, with fluid text, images and coloured backgrounds.View Tutorial
Understanding the difference between absolute and relative hyperlinks, and adding hyperlinks to sample web pages.View Tutorial
Applying CSS style rules such as text colours, borders and transitions to the five hyperlink states: link, visited, focus, hover and active.View Tutorial
Offering tasty alternatives to sugary and unhealthy snacks for busy, on-the-go, on-trend professionals.View Project
Everything you need to know about your website traffic, without spying on visitors' personal information.View Project
Transforming great products and services into successful online brands and compelling digital experiences.View Project
A single-page website about Dutch artist Vincent van Gogh with an embedded and responsive video from YouTube.View Project
Follow the instructions at the link below for downloading the HTML, CSS and image template files for use with your projects.
In this project you will create your personal website, based on one of three sample website templates. Each of these website templates has four web pages.
Your Personal Portfolio Website
Your projects and personal portfolio website need to be completed and uploaded by Sunday, 20th September.