Live tutorials every Thursday evening 6:30-9:30pm on Google Meet.
View a complete list of the 13 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
Next steps: Some further courses and certifications
Starting Out, Setting Up
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
Installing Visual Studio Code
Installing and customising the free Microsoft Visual Studio Code app for creating web pages and stylesheets.
View Tutorial
Working with Folders
Creating a logical folder structure for the various files typically used in website projects.
View TutorialFundamentals of HTML
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 Classes
Working with Colour Models
Learning about the three main colour systems used in web design: colour names, RGB values and hex codes.
View Tutorial
Updating CSS Colours
Using CSS files to apply text and background colour styles to your exercise web pages and your home page.
View Tutorial
Classes and Custom Properties
Creating and using classes and custom properties in HTML and CSS.
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 Typography
Working with Text
Understanding and applying the most commonly used CSS text properties in web design.
View Tutorial
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 TutorialWorking with Hyperlinks
Introduction to Hyperlinks
Understanding the difference between absolute and relative hyperlinks, and adding hyperlinks to sample web pages.
View Tutorial
Internal Hyperlinks
Creating a Wikipedia-style web page navigation system with a smooth-scrolling visual effect.
View Tutorial
Styling Hyperlinks with CSS
Applying CSS style rules such as text colours, borders and transitions to hyperlink states.
View TutorialWeb Design Projects
Snazzy Fashion
A web page for a fashion retailer with a background video, multiple sections and Line Awesome icons.
View Project
Smooth Smoothies
A web page for a smoothie outlet with on-load animations and images with transparent backgrounds.
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
Web Design and AI Tools
Some AI tools to help you on your HTML/CSS and web design learning journey.
View Tutorial