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
![Creating an account for web hosting on GitHub](assets/img/toc-github.png)
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 and customising Visual Studio Code for web designers](assets/img/thumbnail-vscode.jpg)
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 and Files](assets/img/thumbnail-folders.png)
Working with Folders
Creating a logical folder structure for the various files typically used in website projects.
View TutorialFundamentals of HTML
![Working with HTML](assets/img/thumbnail-html.jpg)
Working with HTML
Understanding the basic structure of an HTML file and adding HTML text formatting tags.
View Tutorial![Debugging HTML](assets/img/toc-debugging.png)
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](assets/img/toc-seo.png)
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](assets/img/thumbnail-page-layout.png)
Container Elements
Exploring wireframes, prototypes and the container elements used in modern web design (HTML5 and CSS3).
View TutorialFundamentals of CSS
![Working with CSS](assets/img/thumbnail-css.jpg)
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](assets/img/toc-negative-space.png)
Negative Spacing
Using negative space between content elements to make your web pages easier and more inviting to read.
View Tutorial![Media Queries](assets/img/toc-media-queries.png)
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](assets/img/toc-colours.png)
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](assets/img/toc-colours-update.png)
Updating CSS Colours
Using CSS files to apply text and background colour styles to your exercise web pages and your home page.
View Tutorial![CSS Custom Colours](assets/img/toc-colours-classes-properties.png)
Classes and Custom Properties
Creating and using classes and custom properties in HTML and CSS.
View TutorialImages and Web Design
![Introduction to Images](assets/img/toc-images.png)
Introduction to Images
Understanding popular image formats used on web pages, and discovering sources of free-to-use images.
View Tutorial![Working with Images](assets/img/toc-images-working.png)
Working with Images
Inserting images in a web page, and styling images with drop shadow and rounded corner effects.
View TutorialText and Typography
![portfolio all the light](assets/img/toc-semantic.png)
Working with Text
Understanding and applying the most commonly used CSS text properties in web design.
View Tutorial![portfolio all the light](assets/img/toc-fonts.png)
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![portfolio all the light](assets/img/toc-fluid-typography.png)
Fluid Typography
Applying the fluid typographic equation to scale font sizes responsively according to the viewport width.
View TutorialWorking with Hyperlinks
![Introduction to Hyperlinks](assets/img/toc-hyperlinks-intro.png)
Introduction to Hyperlinks
Understanding the difference between absolute and relative hyperlinks, and adding hyperlinks to sample web pages.
View Tutorial![portfolio all the light](assets/img/toc-hyperlinks-internal.png)
Internal Hyperlinks
Creating a Wikipedia-style web page navigation system with a smooth-scrolling visual effect.
View Tutorial![portfolio all the light](assets/img/toc-hyperlinks-styles.png)
Styling Hyperlinks with CSS
Applying CSS style rules such as text colours, borders and transitions to hyperlink states.
View TutorialWeb Design Projects
![Project: Snazzy Fashion](assets/img/toc-fashion.jpg)
Snazzy Fashion
A web page for a fashion retailer with a background video, multiple sections and Line Awesome icons.
View Project![Project: Smooth Smoothies](assets/img/project-smoothie.jpg)
Smooth Smoothies
A web page for a smoothie outlet with on-load animations and images with transparent backgrounds.
View Project![Project: Hero Gallery](assets/img/project-hero.png)
Hero Gallery
A gallery of hero block elements with split-screen layouts and duotone images.
View ProjectPortfolio Website
![Setting Up Google Analytics](assets/img/toc-ga.png)
Setting Up Google Analytics
Monitoring your website visitors by adding a unique tracking code to your web pages.
View Tutorial![Privacy Messages](assets/img/toc-media-queries.png)
Privacy Messages
Creating a ‘pop-up’ cookie consent message to include in your web pages.
View Tutorial![Serverless Forms](assets/img/toc-bs-form.png)
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](assets/img/toc-gsc.png)
Google Search Console
Setting up the Google Search Console to monitor and maintain your website’s presence in Google search results.
View Tutorial![Google Search Console](assets/img/toc-media-queries.png)
Web Design and AI Tools
Some AI tools to help you on your HTML/CSS and web design learning journey.
View Tutorial