Starting Out, Setting Up
![Choosing a web browser for web designers and web developers](assets/img/thumbnail-browser.jpg)
About Web Browsers
Installing and customising the web browsers preferred by front-end developers and web designers.
View Tutorial![Creating an account for web hosting on GitHub](assets/img/toc-github.png)
Web Hosting on GitHub
Creating a free GitHub account, choosing a website name and setting up a repository for hosting your web pages.
View Tutorial![Installing and customising Visual Studio Code for web designers](assets/img/thumbnail-vscode.jpg)
Installing Visual Studio Code
Installing and customising the free Microsoft Visual Studio Code app for creating web pages and stylesheets.
View TutorialFundamentals of HTML
![Fundamentals of HTML](assets/img/thumbnail-folders.png)
Working with Folders
Creating a logical folder structure for the various files typically used in website projects.
View Tutorial![Working with HTML](assets/img/thumbnail-html.jpg)
Working with HTML
Understanding the basic structure of an HTML file and adding HTML text formatting tags.
View Tutorial![Debugging HTML](assets/img/toc-debugging.png)
Debugging HTML
Using the HTMLHint extension in VS Code to identify and correct HTML errors in a web page.
View Tutorial![SEO and Web Pages](assets/img/toc-seo.png)
SEO and Web Pages
Using HTML tags to optimise the ranking of your web pages on Google and other search engines.
View Tutorial![Container Elements](assets/img/thumbnail-page-layout.png)
Container Elements
Exploring wireframes, prototypes and the container elements used in modern web design (HTML5 and CSS3).
View TutorialFundamentals of CSS
![Fundamentals of CSS](assets/img/thumbnail-css.jpg)
Working 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![Negative Space](assets/img/toc-negative-space.png)
Negative Spacing
Using negative space between content elements to make your web pages easier and more inviting to read.
View Tutorial![Media Queries](assets/img/toc-media-queries.png)
Media Queries
Adding media queries to a CSS file so that web page elements resize according to the viewport width.
View TutorialColours and Classes
![Colours and Classes](assets/img/toc-colours.png)
Working with Colour Models
Learning about the three main colour systems used in web design: colour names, RGB values and hex codes.
View Tutorial![Updating Colours](assets/img/toc-colours-update.png)
Updating CSS Colours
Using CSS files to apply text and background colour styles to your exercise web pages and your home page.
View Tutorial![Classes and Custom Properties](assets/img/toc-colours-classes-properties.png)
Classes and Custom Properties
Create and use classes and custom properties in HTML and CSS.
View Tutorial
Images and Web Design
![Images and Web Design](assets/img/toc-images.png)
Introduction to Images
Understanding popular image formats used on web pages, and discovering sources of free-to-use images.
View Tutorial![Working with Images](assets/img/toc-images-working.png)
Working with Images
Inserting images in a web page, and styling images with drop shadow and rounded corner effects.
View Tutorial![Working with Favicons](assets/img/toc-favicon.png)
Working with Favicons
Creating a favicon using an online service, and inserting a favicon into the head of a web page.
View TutorialThe Box Model
![The Box Model](assets/img/toc-box-model-new.png)
The Box Model
Exploring the ‘box model’ concept and understanding the CSS properties of padding, borders and margins.
View Tutorial![Working with Cards](assets/img/toc-panels.png)
Working with Cards
Using the box model principles to create and style small, visually attractive panels of content in a web page.
View TutorialText and Typography
![portfolio all the light](assets/img/toc-semantic.png)
Working with Text
Understanding and applying the most commonly used CSS text properties in web design.
View Tutorial![Working with the Font Stack](assets/img/toc-fluid-typography.png)
Working with the Font Stack
Using the font-stack and applying a fluid typographic scale to adjust font sizes responsively.
View Tutorial![Working with Google Fonts](assets/img/toc-fonts.png)
Working with Google Fonts
Linking your web pages to Google Fonts and formatting text elements by adding Google Font names to your stylesheets.
View TutorialHero Blocks
![portfolio all the light](assets/img/toc-hero-one.png)
Hero Blocks with Text
Creating an above-the-fold hero block with animated text and a background colour gradient.
View Tutorial![portfolio all the light](assets/img/toc-hero-two.png)
Hero Blocks with Images
Designing a hero block with various background image options including tinted overlays.
View Tutorial![portfolio all the light](assets/img/toc-video.png)
Hero Blocks with Videos
Designing a hero block with a background video that plays in a continuous loop and includes a tinted overlay.
View TutorialWorking with Hyperlinks
![portfolio all the light](assets/img/toc-hyperlinks-intro.png)
Introduction to Hyperlinks
Understanding the difference between absolute and relative hyperlinks, and adding hyperlinks to sample web pages.
View Tutorial![portfolio all the light](assets/img/toc-hyperlinks-internal.png)
Internal Hyperlinks
Creating a Wikipedia-style web page navigation system with a smooth-scrolling visual effect.
View Tutorial![portfolio all the light](assets/img/toc-hyperlinks-styles.png)
Styling Hyperlinks with CSS
Applying CSS style rules such as text colours, borders and transitions to hyperlink states.
View TutorialWeb Design Projects
![Project: Smooth Smoothies](assets/img/project-smoothie.jpg)
Smooth Smoothies
A web page for a smoothie outlet with on-load animations and images with transparent backgrounds.
View Project![Project: Hero Gallery](assets/img/project-hero.png)
Hero Gallery
A gallery of hero block elements with split-screen layouts and duotone images.
View ProjectUser Tracking
![portfolio all the light](assets/img/toc-ga.png)
Setting Up Google Analytics
Monitoring your website visitors by adding a unique tracking code to your web pages.
View Tutorial![portfolio all the light](assets/img/toc-media-queries.png)
Privacy Messages
Creating a ‘pop-up’ cookie consent message to include in your web pages.
View Tutorial![portfolio all the light](assets/img/toc-gsc.png)
Working with GSC
Setting up the Google Search Console to monitor and maintain your website’s presence in Google search results.
View TutorialPortfolio Website
![portfolio all the light](assets/img/toc-bs-form.png)
Serverless Forms
Using forms with GitHub Pages by registering for a third-party online form processing service such as Formspree.
View Tutorial