Tutorials Home Page

Web Design

IBAT Next Course

 

Setting Up

portfolio all the light

Web Hosting on GitHub

Creating a free GitHub account, choosing a username and setting up a repository for serving your web pages.

View Tutorial
portfolio all the light

Working with Web Browsers

Installing and customising the two web browsers popular with web designers and web developers.

View Tutorial
portfolio all the light

Working with Text Editors

Installing and customising a text editor for creating web pages (HTML files) and stylesheets (CSS files).

View Tutorial

Web Design Fundamentals

portfolio all the light

Setting Up Google Analytics

Monitoring your website visitors with Google Analytics and adding the unique tracking code to your web pages.

View Tutorial
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

Marking Up with HTML

Adding HTML tags to your web page, and checking the page with the official WC3 Markup Validation Service.

View Tutorial

Responsive Web Design

portfolio all the light

Styling HTML with CSS

Linking a web page to a CSS file, resetting browser default styles, and creating heading and paragraph styles.

View Tutorial
portfolio all the light

RWD: Media Queries

Adding media queries to a CSS file so that your web page can resize according to the width and height of the screen.

View Tutorial
portfolio all the light

RWD: Fluid Typography

Setting maximum and minimum screen widths, and using the fluid typographic equation to enable text to resize responsively.

View Tutorial

Lists, Fonts and Images

portfolio all the light

Lists and Bullets

Marking-up content as bullet points in unordered and ordered lists, and creating CSS styles to display them responsively.

View Tutorial
portfolio all the light

Working with Google Fonts

Selecting font families, weights and styles from Google Fonts, and using them to style text elements in your web pages.

View Tutorial
portfolio all the light

Working with Images

Understanding bitmap and vector images, discovering sources of free images, and adding images to your web pages.

View Tutorial

The Box Model, Colours and Hyperlinks

portfolio all the light

Working with the Box Model

Applying CSS styles to the three components of the box model: padding, borders and margins.

View Tutorial
portfolio all the light

Colours and Web Design

Learn about the web colour systems, and apply the CSS properties of color, background-color and border-color to web page elements.

View Tutorial
portfolio all the light

Working with Hyperlinks

About absolute, relative and internal hyperlinks, the four hyperlink states and styling hyperlinks in CSS.

View Tutorial

Projects

Project 1: How to set up a website

Project 2: Hero Blocks Showcase

Project 3: Desktop and Mobile Menus

Project 4: Your Privacy Web Page

Project 5: Your Contact Form

Project 6: Your Portfolio Web Page

Project Templates

Project 7: Two sample final project templates

Project 8: Three sample home page templates