Tutorials Home Page

IBAT Web Design

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

Lists and Bullets

Mark-up content in an HTML file as bullet points in unordered and ordered lists, and create styles in CSS to display them responsively.

View Tutorial
portfolio all the light

Working with Google Fonts

Select font families, weights and styles from Google Fonts, and use them to style headings and other 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

Contents

HTML Project 1: How to set up a website

Mobirise Project 1: Personal Website

Mobirise Project 2: Smooth Smoothies

Mobirise Project 3: All the Light

Mobirise Project 4: Careers Summit

HTML Project 2: Introduction to PowerPoint

HTML Project 3: Google Fonts Animation

HTML Project 4: Hero Blocks Showcase

HTML Project 5: Flexbox Columns: Zipped Resource Files

HTML Project 5: Flexbox Columns: Finished Web Page

HTML Project 6: Desktop and Mobile Menus

HTML Project 7: Your Privacy Web Page

HTML Project 8: Your Portfolio Web Page

HTML Project 9: Your Contact Form

NEW: Final Project: Requirements with two sample websites



HTML/CSS Exercise

HTML Classes

Margins

Padding

Dimensions

The Box Model

Selecting an Element

Selecting Multiple Elements

Selecting Child-Parent Elements

Selecting the First Child

Selecting the Last Child

Selecing the nth-Child