Live tutorials every Thursday evening 6:30-9:30pm on Google Meet.
View a complete list of the nine Exercises, and six Projects and Personal Portfolio Website.
Web Design Diploma: Marking Scheme and Grades.
Slideshows: Web page elements and Web page types
Graphics: Free online services and resources
Starting Out, Setting Up
About Web Browsers
Installing and customising the web browsers preferred by web designers and front-end developers.
View Tutorial
Web Hosting on GitHub
Creating a free GitHub account, choosing a website name and setting up a repository for hosting your web pages.
View Tutorial
Working with VS Code
Installing and customising the free Microsoft Visual Studio Code app for creating web pages and stylesheets.
View TutorialFundamentals of HTML
Working with Folders
Creating a logical folder structure for the various files typically used in website projects.
View Tutorial
Working with HTML
Understanding the basic structure of an HTML file and adding HTML text formatting tags.
View Tutorial
Debugging HTML
Using the HTMLHint extension in VS Code to identify and correct mark-up errors in the HTML code of a web page.
View Tutorial
SEO and Web Pages
Using HTML tags to optimise the ranking of your web pages on Google and other search engines.
View Tutorial
Container Elements
Exploring wireframes, prototypes and the container elements used in modern web design (HTML5 and CSS3).
View TutorialFundamentals of CSS
Working with CSS
Linking a stylesheet to a web page, and updating the style rules to change the visual appearance of a web page.
View Tutorial
Negative Spacing
Using negative space between content elements to make your web pages easier and more inviting to read.
View Tutorial
Media Queries
Adding media queries to a CSS file so that web page elements resize according to the viewport width.
View TutorialColours and Web Design
Colours in Web Design
Learning about the web colour systems, and applying CSS properties for setting text and background colours.
View TutorialImages and Web Design
Introduction to Images
Understanding popular image formats used on web pages, and discovering sources of free-to-use images.
View Tutorial
Working with Images
Inserting images in a web page, and styling images with drop shadow and rounded corner effects.
View TutorialText and Web Design
Working with Google Fonts
Linking your web pages to Google Fonts and formatting text elements by adding Google Font names to your stylesheets.
View Tutorial
Fluid Typography
Applying the fluid typographic equation to scale font sizes responsively according to the viewport width.
View TutorialThe Box Model
The Box Model
Exploring the ‘box model’ concept and understanding the CSS properties of padding, borders and margins.
View Tutorial
Working with Panels
Using the box model principles to create and style small, visually attractive panels of content in a web page.
View TutorialWorking with Hyperlinks
Introduction to Hyperlinks
Understanding the difference between absolute and relative hyperlinks, and adding hyperlinks to sample web pages.
View Tutorial
Web Design Projects
Snazzy Fashion
A website for a fashion retailer with a background video, multiple sections and Line Awesome icons.
View Project
Smooth Smoothies
A website for a smoothie outlet with on-load animations and images with transparent backgrounds.
View Project
Crypto Wallet
A dark-themed responsive single-page website for a fictitious crypto wallet.
View Project
Hero Gallery
A gallery of hero block elements with split-screen layouts and duotone images.
View Project
Portfolio Website
Setting Up Google Analytics
Monitoring your website visitors by adding a unique tracking code to your web pages.
View Tutorial
Privacy Messages
Creating a ‘pop-up’ cookie consent message to include in your web pages.
View Tutorial
Serverless Forms
Using forms with GitHub Pages by registering for a third-party online form processing service such as Formspree.
View Tutorial
Google Search Console
Setting up the Google Search Console to monitor and maintain your website’s presence in Google search results.
View Tutorial