Installing and customising the two web browsers popular with web designers and web developers.
View Tutorial
Creating a free GitHub account, choosing a username and setting up a repository for hosting your web pages.
View Tutorial
Installing and customising a Microsoft Visual Studio Code for creating web pages (HTML files) and stylesheets (CSS files).
View Tutorial
Understanding the basic structure of an HTML file and recognising the elements commonly found in the <head> section.
View Tutorial
Adding HTML tags to your web page, installing the Auto Rename Tag Extension, and uploading you files to GitHub.
View Tutorial
Linking a web page to a CSS file, resetting browser default styles, and creating heading and paragraph styles.
View Tutorial
Linking a stylesheet to a web page, and updating the style rules to change the visual appearance of a web page.
View Tutorial
Learning about the web colour systems, and apply the CSS properties for setting text and background colours.
View Tutorial
Understanding images, resetting browser defaults, discovering sources of free images, and adding images to your web pages.
View Tutorial
Linking your web pages to Google Fonts and formatting text elements by adding Google Font names to your stylesheets.
View Tutorial
Exploring the concept of the ‘box model’ and understanding the three main CSS properties of the div tag: padding, borders and margins.
View Tutorial
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
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
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
Applying the fluid typographic equation to scale the font sizes of text responsively according to the width of the user's screen.
View Tutorial
Creating a basic Bootstrap web page by linking a standard HTML file to the Bootstrap stylesheet and JavaScript files.
View Tutorial
Building and using responsive one, two, three and four-column layouts based on the Bootstrap grid system.
View Tutorial
Customising the default Bootstrap grid to make it a more practical basis for designing modern-looking web pages.
View Tutorial
Designing a range of basic hero blocks (jumbotrons) with various fonts, colours and animation effects.
View Tutorial
Designing a range of hero blocks with various background image options including tinted overlays.
View Tutorial
Designing a hero block with a background video that plays in a continuous loop and includes a tinted overlay.
View Tutorial
Updating a basic email contact form, styled with Bootstrap, to use the online form procesing service from Formspree.
View Tutorial
Downloading a privacy template web page and creating a ‘pop-up’ cookie consent message to include in your web pages.
View Tutorial
Customising a template for Bootstrap-based desktop/laptop and mobile menus, and footer elements.
View Tutorial
Monitoring your website visitors with Google Analytics and adding the unique tracking code to your web pages.
View TutorialIn this project you will create your Bootstrap-powered, six-page personal website.
Downloading Your Website Template
Updating your Website Images and Videos