Tutorials Home Page

bmunnelly@ibat.ie

Web Design

Exercises

All the exercises for the various Tutorials with finished sample web pages are listed here.

All the projects for the various Tutorials with finished sample web pages are listed here.

Google Classroom

The Google Classroom for the course beginning Sept 23rd is here.

 

 

Setting Up

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

Web Hosting on GitHub

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

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

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

Introduction to HTML

Adding HTML tags to your web page, installing the Auto Rename Tag Extension, and uploading you files to GitHub.

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

Stylesheets and Colour Systems

portfolio all the light

Introduction to 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

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

Colours and Web Design

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

View Tutorial

Images and Google Fonts

portfolio all the light

Introduction to Images

Understanding images, resetting browser defaults, discovering sources of free images, and adding images to your web pages.

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

The Box Model

portfolio all the light

Introduction to the Box Model

Exploring the concept of the ‘box model’ and understanding the three main CSS properties of the div tag: padding, borders and margins.

View Tutorial
portfolio all the light

Working with Panels

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

View Tutorial
portfolio all the light

Working with Sections

Using the box model principles and the HTML div tag to create and style vertically alternating sections of content in a web page.

View Tutorial

Responsive Web Design

portfolio all the light

Introduction to Media Queries

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

View Tutorial
portfolio all the light

Introduction to Fluid Typography

Applying the fluid typographic equation to scale font sizes responsively.

View Tutorial
portfolio all the light

Introduction to CSS Flexbox

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

View Tutorial
portfolio all the light

Flexbox Two Columns

Create and style responsive two-column layouts using CSS flexbox, with fluid text, images and coloured backgrounds.

View Tutorial
portfolio all the light

Flexbox Three Columns

Create and style responsive three-column layouts using CSS flexbox, with fluid text, images and coloured backgrounds.

View Tutorial
portfolio all the light

Flexbox Four Columns

Create and style responsive four-column layouts using CSS flexbox, with fluid text, images and coloured backgrounds.

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

Styling Hyperlinks with CSS

Applying CSS style rules such as text colours, borders and transitions to the five hyperlink states: link, visited, focus, hover and active.

View Tutorial
portfolio all the light

Working with Internal Hyperlinks

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

View Tutorial
portfolio all the light

Working with Buttons and Icons

Styling hyperlinks as buttons with soft corners or rounded edges, and adding Font Awesome icons.

View Tutorial

Hero Blocks

portfolio all the light

Single-column Hero Blocks

Designing a range of single-column hero blocks with various headings, buttons, icons, colours and alignments.

View Tutorial
portfolio all the light

Hero Blocks with Images

Designing a range of hero blocks with various background image options including tinted overlays.

View Tutorial

 

Menus and Privacy

portfolio all the light

Working with Menus

Understanding and updating common desktop and mobile menu layouts.

View Tutorial
portfolio all the light

Privacy Messages

Creating a ‘pop-up’ privacy and cookie consent message to include in your web pages.

View Tutorial

 

Web Design Projects

Project: Smooth Smoothies

Smooth Smoothies

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

View Project
Project: Web Agency

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
Project: Web Agency

Vincent van Gogh

A single-page website about Dutch artist Vincent van Gogh with an embedded and responsive video from YouTube.

View Project
Project: Web Agency

Hero Showcase

Examples of responsive web page hero sections with animations, background images and videos.

View Project

Downloading the Templates Folder and Files

Follow the instructions at the link below for downloading the HTML, CSS and image template files for use with your projects.

Templates Download

Projects with Forms

Project 1: Smooth Smoothies

Project 2: Software Analytics

Project 3: Travel Agency

Project 4: Web Design Agency

Projects with Footers

Project 1: Smooth Smoothies

Project 2: Software Analytics

Project 3: Travel Agency

Project 4: Web Design Agency

Projects with Menus

Project 1: Smooth Smoothies

Project 2: Software Analytics

Project 5: Travel Agency

Project 6: Web Design Agency

 

Building your Personal Portfolio Website

In this project you will create your personal website, based on one of three sample website templates. Each of these website templates has four web pages.

Project: Smooth Smoothies

Your Personal Portfolio Website

Your projects and personal portfolio website need to be completed and uploaded by Sunday, 20th September.

Slideshows

Elements of a Web Page

Types of Web Pages

 

 

Recent Student Projects

Eimear

Neil

Barbara