Web Page Builder: Lunevedy
Graphics: Free online services and resources
Slideshows: Web page elements and Web page types
Getting started with HTML
Viewing the full names of files in Microsoft Windows and creating a logical folder structure for your files.
Creating a free Github account, choosing a username, and setting up a web hosting repository.
Installing and customising the free Microsoft VS Code app for creating web pages and stylesheets.
Understanding the basic structure of an HTML file and adding HTML text formatting tags.
Finding and fixing HTML errors in a web page using the HTMLHint extension in VS Code and AI.
Organising your web page content into a logical structure with container (‘semantic’) tags.
Fundamentals of CSS
Linking a stylesheet to a web page, and updating the style rules to change the page's appearance.
Adding vertical margins around block elements and responsive padding inside containers.
Applying the most commonly used CSS text properties in web design and development.
Applying text and background colour styles to your exercise web pages and your home page.
Creating and using classes with colours and custom properties in HTML and CSS.
Images, Videos, and Hyperlinks
Inserting images in a web page, and styling images with drop shadow and rounded corner effects.
Creating a favicon using an online service, and inserting a favicon into the head of a web page.
View Tutorial ➜
Understanding absolute and relative hyperlinks, and adding hyperlinks to sample web pages.
Applying CSS style rules such as text colours, borders and transitions to hyperlink states.
Hero Blocks and Google Fonts
Creating an above-the-fold hero block with animated text and a background colour gradient.
View Tutorial ➜
Designing a hero block with various background image options including tinted overlays.
View Tutorial ➜
Designing a hero block with a background video that plays in a continuous loop.
View Tutorial ➜
Linking your web pages to Google Fonts and formatting text elements with font names CSS.
View Tutorial ➜TailwindCSS
Adding Tailwind via CDN, configuring it in the browser, and building responsive UI elements with utility classes.
View Tutorial ➜Web Design Projects
A collection of multi-column layout blocks created with the <section> tag.
View Project ➜User Tracking
Monitoring your website visitors by adding a unique tracking code to your web pages.
Monitoring and maintaining your website’s presence in Google search results.
Tracking user behaviour on web pages with session recordings and heatmaps.
View Tutorial ➜
Creating a ‘pop-up’ cookie consent message to include in your web pages.
View Tutorial ➜
Using forms with GitHub Pages by registering for a third-party online form processing service such as Formspree.
View Tutorial ➜Personal Portfolio Website
Using the web browser's Developer Tools to work with text content, HTML tags and CSS styles in a web page.
View Project ➜