Web Design

A ten-part, online learning journey: from the fundamentals of modern web design with HTML5 and CSS3 to building and deploying your personal portfolio website.

Starting Out, Setting Up

portfolio all the light

Working with Web Browsers

Installing and customising the web browsers most commonly used by web designers and web developers.

View Tutorial
portfolio all the light

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
portfolio all the light

Working with VS Code

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

View Tutorial

Web Design Fundamentals

portfolio all the light

About HTML Files

Understanding the basic structure of an HTML file and recognising the elements commonly found in the <head> section.

View Tutorial
portfolio all the light

Working with HTML

Adding HTML text formatting tags for headings and paragraphs, and bold and italics.

View Tutorial
portfolio all the light

About CSS Files

Understanding a CSS stylesheet, and recognising the most commonly used CSS properties in web design.

View Tutorial
portfolio all the light

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

 

 

Colours and Web Design

portfolio all the light

Colours and Web Design

Learning about the web colour systems, and applying CSS properties for setting text and background colours.

View Tutorial

 

 

Images and Web Design

portfolio all the light

Introduction to Images

Understanding popular image formats used on web pages, and discovering sources of free-to-use images.

View Tutorial
portfolio all the light

Working with Images

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

View Tutorial

 

Text and Typography

portfolio all the light

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

 

 

Responsive Web Design

portfolio all the light

Media Queries

Adding media queries to a CSS file so that web page elements resize according to the viewport width.

View Tutorial
portfolio all the light

Fluid Typography

Applying the fluid typographic equation to scale font sizes responsively according to the viewport width.

View Tutorial

 

The Box Model

portfolio all the light

The Box Model

Exploring the ‘box model’ concept and understanding the CSS properties of padding, borders and margins.

View Tutorial
portfolio all the light

Working with Panels

Using the box model principles to create and style small, visually attractive panels of content in a web page.

View Tutorial
portfolio all the light

Working with Sections

Reusing HTML5-compliant section elements to quickly create a range of visually different web pages.

View Tutorial

Multi-column Layout

portfolio all the light

Introduction to CSS Flexbox

Using the CSS flexbox method to layout the content of web pages in responsive grids of rows and columns.

View Tutorial

 

 

Hero Blocks

portfolio all the light

Hero Block: Text

Designing an above-the-fold hero block with animated text and various background colours.

View Tutorial
portfolio all the light

Hero Block: Images

Designing a hero block with various background image options including tinted overlays.

View Tutorial
portfolio all the light

Hero Block: Videos

Designing a hero block with a background video that plays in a continuous loop and includes a tinted overlay.

View Tutorial

Hyperlinks, Buttons and Icons

portfolio all the light

Introduction to Hyperlinks

Understanding the difference between absolute and relative hyperlinks, and adding hyperlinks to sample web pages.

View Tutorial
portfolio all the light

Internal Hyperlinks

Creating a Wikipedia-style web page navigation system with a smooth-scrolling visual effect.

View Tutorial
portfolio all the light

Styling Hyperlinks with CSS

Applying CSS style rules such as text colours, borders and transitions to hyperlink states.

View Tutorial