Starting Out, Setting Up
About Web Browsers
Installing and customising the web browsers preferred by front-end developers and web designers.
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
Installing Visual Studio 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 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
Create and use classes and custom properties in HTML and CSS.
View Tutorial
Images 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 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 Tutorial
Introduction to CSS Flexbox
Using the CSS flexbox method to layout the content of web pages in responsive grids of rows and columns.
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 a fluid typographic scale to adjust font sizes in a web page responsively according to the viewport width.
View TutorialHero Blocks
Hero Blocks with Text
Designing an above-the-fold hero block with animated text and various background colours.
View Tutorial
Hero Blocks with Images
Designing a hero block with various background image options including tinted overlays.
View Tutorial
Hero Blocks with Videos
Designing a hero block with a background video that plays in a continuous loop and includes a tinted overlay.
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
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
User Tracking
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
Working with GSC
Setting up the Google Search Console to monitor and maintain your website’s presence in Google search results.
View TutorialPortfolio Website
Serverless Forms
Using forms with GitHub Pages by registering for a third-party online form processing service such as Formspree.
View Tutorial