Exercises and Projects
CA: 1
15 HTML/CSS EXERCISES:
HTML and CSS basics; images, colours, and fonts; responsive design; and multi-column flexbox layout.
16% of final grade.
View tasks
CA: 2
5 WEB DESIGN PROJECTS:
Four single-page web projects (Van Gogh, Fashion, Smoothies, Crypto) and a four-page Personal Portfolio website.
64% of final grade.
View tasks
CA: 3
10 JAVASCRIPT PROJECTS:
Data types; string and numeric methods; functions; branching; DOM; arrays; APIs; and NodeJS.
20% of final grade.
View tasksStarting Out, Setting Up
Working with Web Browsers
Installing and customising the web browsers most commonly used by web designers and web developers.
View Tutorial
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
Working with VS Code
Installing and customising the free Microsoft Visual Studio Code app for creating web pages and stylesheets.
View TutorialWeb Design Fundamentals
About HTML Files
Understanding the basic structure of an HTML file and recognising the elements commonly found in the <head> section.
View Tutorial
Working with HTML
Adding HTML text formatting tags for headings and paragraphs, and bold and italics.
View Tutorial
About CSS Files
Understanding a CSS stylesheet, and recognising the most commonly used CSS properties in web design.
View Tutorial
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 TutorialColours and Web Design
Colours and Web Design
Learning about the web colour systems, and applying CSS properties for setting text and background colours.
View TutorialImages and Web Design
Introduction to Images
Understanding popular image formats used on web pages, and discovering sources of free-to-use images.
View Tutorial
Working with Images
Inserting images in a web page, and styling images with drop shadow and rounded corner effects.
View Tutorial
Positioning Elements
Position elements on a web page using the position relative and position absolute CSS properties.
View TutorialText and Typography
Working with Google Fonts
Linking your web pages to Google Fonts and formatting text elements by adding Google Font names to your stylesheets.
View TutorialResponsive Web Design
Media Queries
Adding media queries to a CSS file so that web page elements resize according to the viewport width.
View Tutorial
Fluid Typography
Applying the fluid typographic equation to scale font sizes responsively according to the viewport width.
View TutorialThe Box Model
Semantic Design
Exploring the main visual elements of a web page and how they are implemented with semantic tags in HTML5.
View Tutorial
The Box Model
Exploring the ‘box model’ concept and understanding the CSS properties of padding, borders and margins.
View Tutorial
Working with Panels
Using the box model principles to create and style small, visually attractive panels of content in a web page.
View TutorialHero Blocks
Hero Blocks with Text
Designing an above-the-fold hero block with animated text and various background colours.
View Tutorial
Hero Blocks with Images
Designing a hero block with various background image options including tinted overlays.
View Tutorial
Hero Blocks with Videos
Designing a hero block with a background video that plays in a continuous loop and includes a tinted overlay.
View TutorialMulti-column Layout
Introduction to CSS Flexbox
Using the CSS flexbox method to layout the content of web pages in responsive grids of rows and columns.
View TutorialWorking with Hyperlinks
Introduction to Hyperlinks
Understanding the difference between absolute and relative hyperlinks, and adding hyperlinks to sample web pages.
View Tutorial
Internal Hyperlinks
Creating a Wikipedia-style web page navigation system with a smooth-scrolling visual effect.
View Tutorial
Styling Hyperlinks with CSS
Applying CSS style rules such as text colours, borders and transitions to hyperlink states.
View TutorialWorking with Charts
Introduction to Charts
Using the Chart.js JavaScript library to create charts on a web page and to add basic styling options.
View TutorialWeb Design Projects
Vincent van Gogh
A summary of the life and work of Dutch artist Vincent van Gogh with an embedded and responsive video from YouTube.
View Project
Snazzy Fashion
A website for a fashion retailer with multiple sections and a background video.
View Project
Smooth Smoothies
Offering tasty alternatives to sugary and unhealthy snacks for busy, on-the-go, on-trend professionals.
View Project
Crypto Wallet
A responsive, multi-column single-page website for a fictitious crypto wallet.
View Project
Hero Gallery
A gallery of hero block elements for web pages with split-screen layouts and duotone background images.
View Project
Portfolio Website
Setting Up Google Analytics
Monitoring your website visitors by adding a unique tracking code to your web pages.
View Tutorial
Google Search Console
Monitor and maintaining your website’s presence in Google search results..
View Tutorial
Privacy Messages
Creating a ‘pop-up’ cookie consent message to include in your web pages.
View Tutorial
Serverless Forms
Using forms with GitHub Pages by registering for a third-party online form processing service such as Formspree.
View Tutorial
Working with Menus
Creating desktop menus ('navbars') and mobile ('flyout' or 'off-canvas') for web pages.
View TutorialLunadoge UI Builder (Old version. But still good.)
Lunevedy UI Builder (New version. A work in progress.)