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.
The Google Classroom for the course beginning Sept 23rd is here.
Installing and customising the two web browsers popular with web designers and web developers.
View TutorialCreating a free GitHub account, choosing a username and setting up a repository for hosting your web pages.
View TutorialInstalling and customising a text editor for creating web pages (HTML files) and stylesheets (CSS files).
View TutorialUnderstanding the basic structure of an HTML file and recognising the elements commonly found in the <head> section.
View TutorialAdding HTML tags to your web page, installing the Auto Rename Tag Extension, and uploading you files to GitHub.
View TutorialMonitoring your website visitors with Google Analytics and adding the unique tracking code to your web pages.
View TutorialLinking a web page to a CSS file, resetting browser default styles, and creating heading and paragraph styles.
View TutorialLinking a stylesheet to a web page, and updating the style rules to change the visual appearance of a web page.
View TutorialLearning about the web colour systems, and apply the CSS properties for setting text and background colours.
View TutorialUnderstanding images, resetting browser defaults, discovering sources of free images, and adding images to your web pages.
View TutorialLinking your web pages to Google Fonts and formatting text elements by adding Google Font names to your stylesheets.
View TutorialExploring the concept of the ‘box model’ and understanding the three main CSS properties of the div tag: padding, borders and margins.
View TutorialUsing the box model principles and the HTML div tag to create and style small, visually attractive panels of content in a web page.
View TutorialUsing the box model principles and the HTML div tag to create and style vertically alternating sections of content in a web page.
View TutorialAdding media queries to a CSS file so that web page elements can resize according to the width and height of the screen.
View TutorialApplying the fluid typographic equation to scale font sizes responsively.
View TutorialUsing the CSS flexbox method to lay out the content of web pages in responsive grids of rows and columns.
View TutorialCreate and style responsive two-column layouts using CSS flexbox, with fluid text, images and coloured backgrounds.
View TutorialCreate and style responsive three-column layouts using CSS flexbox, with fluid text, images and coloured backgrounds.
View TutorialCreate and style responsive four-column layouts using CSS flexbox, with fluid text, images and coloured backgrounds.
View TutorialUnderstanding the difference between absolute and relative hyperlinks, and adding hyperlinks to sample web pages.
View TutorialApplying CSS style rules such as text colours, borders and transitions to the five hyperlink states: link, visited, focus, hover and active.
View TutorialCreating a Wikipedia-style web page navigation system with a smooth-scrolling visual effect.
View TutorialStyling hyperlinks as buttons with soft corners or rounded edges, and adding Font Awesome icons.
View TutorialDesigning a range of single-column hero blocks with various headings, buttons, icons, colours and alignments.
View TutorialDesigning a range of hero blocks with various background image options including tinted overlays.
View Tutorial
Creating a ‘pop-up’ privacy and cookie consent message to include in your web pages.
View Tutorial
Offering tasty alternatives to sugary and unhealthy snacks for busy, on-the-go, on-trend professionals.
View ProjectEverything you need to know about your website traffic, without spying on visitors' personal information.
View ProjectNeed a holiday? IBAT Tours provides happy holiday experiences at affordable prices.
View ProjectTransforming great products and services into successful online brands and compelling digital experiences.
View ProjectA single-page website about Dutch artist Vincent van Gogh with an embedded and responsive video from YouTube.
View ProjectExamples of responsive web page hero sections with animations, background images and videos.
View ProjectFollow the instructions at the link below for downloading the HTML, CSS and image template files for use with your projects.
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.
Your Personal Portfolio Website
Your projects and personal portfolio website need to be completed and uploaded by Sunday, 20th September.