Diploma in Web Design

HTML and CSS

   Live tutorials every Wednesday evening 6:30-9:30pm on Google Meet.

Web Page Builder: Lunevedy.

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

Getting started with HTML

Folders and Files
Folders and Files

Viewing the full names of files in Microsoft Windows and creating a logical folder structure for your files.

Take the quiz

View Tutorial  ➜
Web Hosting on GitHub
Web Hosting on Github

Creating a free Github account, choosing a username, and setting up a web hosting repository.

Take the quiz

View Tutorial  ➜
Working with Props
Installing VS Code

Installing and customising the free Microsoft VS Code app for creating web pages and stylesheets.

Take the quiz

View Tutorial  ➜
Working with HTML
Working with HTML

Understanding the basic structure of an HTML file and adding HTML text formatting tags.

Take the quiz

View Tutorial  ➜
Debugging HTML
Debugging HTML

Finding and fixing HTML errors in a web page using the HTMLHint extension in VS Code and AI.

Take the quiz

View Tutorial  ➜
Container Elements
Container (Semantic) Elements

Organising your web page content into a logical structure with container (‘semantic’) tags.

Take the quiz

View Tutorial  ➜

Fundamentals of CSS

Working with CSS
Working with CSS

Linking a stylesheet to a web page, and updating the style rules to change the page's appearance.

Take the quiz

View Tutorial  ➜
Responsive Design
Responsive Design

Using the CSS padding property with media queries to apply responsive spacing to web pages.

Take the quiz

View Tutorial  ➜
Custom Properties and Text
CSS Custom Properties and Text

Using CSS custom properties with the font-stack and scaling font sizes responsively.

Take the quiz

View Tutorial  ➜
Custom Properties and Text
Working with Colours

Applying text and background colour styles to your exercise web pages and your home page.

Take the quiz

View Tutorial  ➜
Custom Properties and Text
Classes and Custom Properties

Creating and using classes with colours and custom properties in HTML and CSS.

Take the quiz

View Tutorial  ➜

Images and Videos

Introduction to Images
Introduction to Images

Understanding popular image formats and discovering sources of free-to-use images.

Take the quiz

View Tutorial  ➜
Working with Images
Working with Images and Videos

Inserting images in a web page, and styling images with drop shadow and rounded corner effects.

Take the quiz

View Tutorial  ➜
Working with Favicons
Working with Favicons

Creating a favicon using an online service, and inserting a favicon into the head of a web page.

View Tutorial  ➜

Web Design Projects

Snazzy Fashion
Snazzy Fashion

A web page for a fashion retailer with a background video.

View Project  ➜
Smooth Smoothies
Smooth Smoothies

A smoothies web page with a transparent background image.

View Project  ➜
Crypto Wallet
Crypto Wallet

A dark-themed crypto web page with an embedded YouTube video.

View Project  ➜
Google Search Console
Book store

An online book store with affiliates link to Amazon.

View Tutorial  ➜

User Tracking

Google Analytics
Setting Up Google Analytics

Monitoring your website visitors by adding a unique tracking code to your web pages.

Take the quiz

View Tutorial  ➜
Google Search Console
Google Search Console

Monitoring and maintaining your website’s presence in Google search results.

Take the quiz

View Tutorial  ➜
Google Search Console
Privacy messages

Creating a ‘pop-up’ cookie consent message to include in your web pages.

View Tutorial  ➜
Google Search Console
Serverless forms

Using forms with GitHub Pages by registering for a third-party online form processing service such as Formspree.

View Tutorial  ➜

Personal Portfolio Website

Portfolio website
Personal Website

Creating your personal portfolio website with four pages.

View Project  ➜