Home / Courses / Web Design

Web Design

Learn to plan, design and publish responsive websites using HTML, CSS, JavaScript and WordPress.

LEARN AT YOUR OWN PACE

Welcome to Web Design

Learn to plan, design and publish responsive websites using HTML, CSS, JavaScript and WordPress. Work through the lessons in order, complete each practical task and keep your project files organised. Mark lessons as complete as you progress.

Lesson 01: Introduction to the Web

Understand websites, browsers, servers, domains and hosting.

A website is a collection of related pages available through a web address. A browser requests files from a web server and displays them. HTML provides structure, CSS controls presentation and JavaScript adds behaviour. A domain is the memorable address people type; hosting is the service that stores the website files.

Practical task: Write down three websites you use, identify their purpose and list the elements that make them easy to use.

Lesson 02: Your First HTML Page

Build the structure of a page with headings, paragraphs, links and images.

HTML means HyperText Markup Language. It uses elements to describe content. Most elements have an opening tag, content and a closing tag. Use a clear document structure and meaningful headings.

Example: a basic HTML document

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My First Website</title>
</head>
<body>
  <h1>Welcome to my website</h1>
  <p>I am learning web design.</p>
</body>
</html>

Practical task: Create a small practice example and save your work in a course folder. Explain what you learned and what you would improve.

Lesson 03: HTML Forms and Semantic Elements

Create accessible forms and organise content with semantic HTML.

Semantic HTML describes the purpose of content. Use header, nav, main, section, article and footer where appropriate. Labels should be connected to form fields so people using assistive technology can understand forms.

Practical task: Create a small practice example and save your work in a course folder. Explain what you learned and what you would improve.

Lesson 04: CSS Foundations

Style text, colours, backgrounds, spacing and borders.

CSS means Cascading Style Sheets. A rule contains a selector and declarations. Selectors choose elements; properties such as color, font-size, background and border define their appearance.

Example: a CSS rule

body {
  font-family: Arial, sans-serif;
  color: #14233d;
  margin: 0;
}

h1 {
  color: #0757ae;
}

Practical task: Create a small practice example and save your work in a course folder. Explain what you learned and what you would improve.

Lesson 05: The Box Model and Layout

Understand margin, padding, borders, display, Flexbox and Grid.

Every element is represented by a box: content, padding, border and margin. Flexbox is useful for arranging items in one direction; Grid is useful for rows and columns.

Practical task: Create a small practice example and save your work in a course folder. Explain what you learned and what you would improve.

Lesson 06: Responsive Web Design

Use mobile-first design, flexible units and media queries.

Responsive design makes a website usable on phones, tablets and desktops. Start with the smallest screen, use flexible widths, and add media queries when the layout needs to change.

Example: a mobile breakpoint

.cards { display: grid; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) {
  .cards { grid-template-columns: 1fr; }
}

Practical task: Create a small practice example and save your work in a course folder. Explain what you learned and what you would improve.

Lesson 07: JavaScript Essentials

Add interactivity with variables, functions, conditions and events.

JavaScript makes pages interactive. Start with const and let, strings and numbers, arrays, functions, if statements and event listeners. Keep scripts readable and test one change at a time.

Example: a button interaction

const button = document.querySelector("#hello");
button.addEventListener("click", () => {
  alert("Hello, learner!");
});

Practical task: Create a small practice example and save your work in a course folder. Explain what you learned and what you would improve.

Lesson 08: WordPress Fundamentals

Understand themes, plugins, pages, menus and the dashboard.

WordPress is a content management system. Pages hold relatively permanent content; posts are usually time-based. Themes control appearance and plugins add functionality. Keep WordPress, themes and plugins updated.

Practical task: Create a small practice example and save your work in a course folder. Explain what you learned and what you would improve.

Lesson 09: Build a Complete Website

Plan and create a multi-page business website.

A professional website starts with a goal and an audience. Plan pages, write clear content, create a consistent design, make navigation obvious and test every form and link.

Practical task: Create a small practice example and save your work in a course folder. Explain what you learned and what you would improve.

Lesson 10: Publish and Maintain Your Website

Prepare hosting, connect a domain, test, secure and maintain your website.

Before launch, test the site on different screen sizes, check spelling, compress images, use HTTPS, create backups and confirm that contact details work. After launch, update content and software regularly.

Practical task: Create a small practice example and save your work in a course folder. Explain what you learned and what you would improve.

Progress is saved in this browser on this device.