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 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.

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

Six Projects

Porfolio: How-to-set-up-a-website

Website Setup

A short, introductory guide to IP addresses, web hosting, SSL certificates and domain names.

View Project
Project: Hero Showcases

Hero Showcase

Examples of responsive web page hero sections with various fonts, gradients, background images and animations.

View Project
Project: Smooth Smoothies

Smooth Smoothies

Offering tasty alternatives to sugary and unhealthy snacks for busy, on-the-go, on-trend professionals.

View Project
Project: Software Analytics

Software Analytics

Everything you need to know about your website traffic, without spying on visitors' personal information.

View Project
Project: Travel Agency

IBAT Tours

Need a holiday? IBAT Tours provides happy holiday experiences at affordable prices.

View Project
Project: Web Agency

Web Agency

Transforming great products and services into successful online brands and compelling digital experiences.

View Project

Four Project Projects with Forms

Project 3: Smooth Smoothies

Project 4: Software Analytics

Project 5: Travel Agency

Project 6: Web Design Agency

Six Projects with Footers

Project 1: How to set up a website

Project 2: Hero Blocks Showcase

Project 3: Smooth Smoothies

Project 4: Software Analytics

Project 5: Travel Agency

Project 6: Web Design Agency

Four Projects with Menus

Project 3: Smooth Smoothies

Project 4: Software Analytics

Project 5: Travel Agency

Project 6: Web Design Agency

Project Templates

Privacy and Cookie Consent

Cookie Code and CSS Link
(Use 'View Page Source' to see the page content.)

Footers

Footer HTML
Footer CSS
Footer HTML 2
Footer CSS 2

Email Sign-up Form

Email Sign-up Form HTML
Email Sign-up Form CSS

Contact Form

Contact Form HTML
Contact Form CSS

Desktop and Mobile Menus

Menus HTML
Menus CSS
Logo image for menus
Face image for menus