ELEARNTRA

WEB DESIGN & WORDPRESS DEVELOPMENT MASTERCLASS

Level: Beginner to Advanced
Total Modules: 15
Levels: 3
Platform: Elearntra

COURSE DESCRIPTION

The Web Design & WordPress Development Masterclass teaches learners how to understand websites, create professional websites and manage them using WordPress.

The course starts with the fundamentals of websites and gradually progresses to professional design, e-commerce, SEO, security, performance and advanced WordPress management.

No previous web-development experience is required.

COURSE LEARNING OUTCOMES

By the end of this course, learners should be able to:

1. Explain how websites work.
2. Understand domains and web hosting.
3. Set up WordPress.
4. Create professional web pages.
5. Choose and customise WordPress themes.
6. Install and configure plugins.
7. Create menus and navigation.
8. Design professional homepages.
9. Apply basic UI/UX principles.
10. Create forms and multimedia content.
11. Build an online store.
12. Improve website security.
13. Perform website backups and maintenance.
14. Apply SEO and performance techniques.
15. Build and launch a complete professional website.

COURSE STRUCTURE

LEVEL 1 — BEGINNER

Understanding Websites and WordPress

Module 1: Understanding Websites and the Internet
Module 2: Domains, Hosting and Website Architecture
Module 3: Introduction to WordPress
Module 4: Installing and Configuring WordPress
Module 5: WordPress Themes and Basic Design

LEVEL 2 — INTERMEDIATE

Building Professional Websites

Module 6: Pages, Posts and Website Navigation
Module 7: WordPress Plugins and Website Functionality
Module 8: Professional Homepage Design
Module 9: Branding, UI/UX and User Experience
Module 10: Forms, Media and Interactive Website Elements

LEVEL 3 — ADVANCED

Professional WordPress Development

Module 11: WooCommerce and E-Commerce
Module 12: WordPress Security, Backups and Maintenance
Module 13: SEO and Website Performance
Module 14: Advanced WordPress Customisation
Module 15: Final Website Project and Certification

LEVEL 1 — BEGINNER

MODULE 1: UNDERSTANDING WEBSITES AND THE INTERNET

Module Objectives

Learners will understand:

• What a website is
• How the internet works
• How browsers work
• What web servers do
• The difference between websites and web applications
• Basic web terminology

Lessons

1.1 What Is the Internet?

The internet is a global network of interconnected computer networks that allows devices and systems to communicate.

Teaching Script:

“Before we build a website, we need to understand where that website actually lives.

When you open a website on your phone or computer, your device communicates across the internet with another computer called a server. That server provides the website’s files and information to your browser.”

1.2 What Is a Website?

A website is a collection of web pages and other resources made available through the internet.

Examples include:

• Business websites
• Educational websites
• News websites
• E-commerce websites
• Portfolio websites
• Government websites

1.3 What Is a Web Page?

A web page is an individual document or view within a website.

For example:

A business website may contain:

• Home
• About
• Services
• Products
• Blog
• Contact

1.4 What Is a Web Browser?

Browsers allow users to access and interact with websites.

Examples include:

• Chrome
• Firefox
• Edge
• Safari

1.5 What Is a Web Server?

A web server stores and delivers website resources to users’ browsers.

Simple process:

User → Browser → Internet → Server → Website files → Browser

1.6 Front End and Back End

Front End

The part users see and interact with.

Back End

The systems and processes that operate behind the interface.

1.7 HTML, CSS and JavaScript

Introduce the basic roles:

HTML: structure
CSS: appearance
JavaScript: behaviour and interaction

1.8 Static and Dynamic Websites

Static websites generally deliver predetermined content.

Dynamic websites can generate or change content based on users, databases, applications or other conditions.

1.9 Website Types

Learners explore:

• Corporate websites
• Blogs
• Portfolios
• E-learning websites
• Online stores
• Membership websites
• Booking websites

1.10 How a Website Loads

Basic process:

1. User enters a web address.
2. Browser locates the server.
3. Server responds.
4. Browser receives resources.
5. Browser displays the website.

Practical Activity

Visit five different websites and identify:

• Website type
• Main purpose
• Target audience
• Main navigation items
• Important features

Quiz

1. What is a website?
2. What is a browser?
3. What does a server do?
4. What is HTML?
5. What is CSS?
6. What is JavaScript?
7. What is the front end?
8. What is the back end?
9. Give two types of websites.
10. What happens when a browser requests a webpage?

MODULE 2: DOMAINS, HOSTING AND WEBSITE ARCHITECTURE

Lessons

2.1 What Is a Domain Name?
2.2 Domain Extensions
2.3 Choosing a Domain Name
2.4 What Is Web Hosting?
2.5 Types of Web Hosting
2.6 Domain vs Hosting
2.7 DNS Explained Simply
2.8 SSL and HTTPS
2.9 Website Files and Databases
2.10 Understanding Basic Website Architecture

Teaching Script

“Think of your website as a house.

The domain is like the address people use to find the house.

The hosting is like the land and building where your website lives.

You need both for a typical publicly accessible website.”

Practical Activity

Design a fictional website setup:

• Website name
• Domain name
• Website purpose
• Target audience
• Hosting requirement
• Main pages

MODULE 3: INTRODUCTION TO WORDPRESS

Lessons

3.1 What Is WordPress?
3.2 WordPress.com vs WordPress.org
3.3 WordPress Dashboard
3.4 Users and Roles
3.5 Posts and Pages
3.6 Media Library
3.7 Categories and Tags
3.8 Comments
3.9 Settings
3.10 WordPress Website Structure

Teaching Script

“WordPress allows people to create and manage websites without having to write every part of the website from scratch.

Instead of building everything manually, WordPress provides a content-management system that allows you to manage pages, posts, media, themes and plugins.”

Practical Activity

Create a sample website structure containing:

• Home
• About
• Services
• Blog
• Contact

MODULE 4: INSTALLING AND CONFIGURING WORDPRESS

Lessons

4.1 WordPress Installation Requirements
4.2 Installing WordPress
4.3 Logging Into the Dashboard
4.4 General Settings
4.5 Site Title and Tagline
4.6 Permalinks
4.7 User Accounts
4.8 Website Language and Time Settings
4.9 Updating WordPress
4.10 Basic Website Configuration

Practical Activity

Set up a practice WordPress installation and configure:

• Site title
• Tagline
• Administrator account
• Time zone
• Permalink structure
• Homepage settings

Beginner Assignment

Create a five-page WordPress website.

MODULE 5: WORDPRESS THEMES AND BASIC DESIGN

Lessons

5.1 What Is a WordPress Theme?
5.2 Choosing a Theme
5.3 Installing a Theme
5.4 Customising a Theme
5.5 Colours and Typography
5.6 Website Layout
5.7 Header and Footer
5.8 Menus
5.9 Responsive Design
5.10 Creating a Consistent Website Design

Design Principles

Learners study:

• Consistency
• Simplicity
• Readability
• Visual hierarchy
• Whitespace
• Accessibility
• Mobile responsiveness

Level 1 Project

Build a Basic WordPress Website

Learners must create:

• Homepage
• About page
• Services page
• Blog page
• Contact page
• Navigation menu
• Header
• Footer
• Mobile-friendly design

LEVEL 2 — INTERMEDIATE

MODULE 6: PAGES, POSTS AND WEBSITE NAVIGATION

Lessons

6.1 Pages vs Posts
6.2 Creating Professional Pages
6.3 Writing Website Content
6.4 Creating Blog Posts
6.5 Categories
6.6 Tags
6.7 Navigation Menus
6.8 Internal Linking
6.9 Website Search
6.10 Organising Website Content

Practical Activity

Create:

• 5 website pages
• 5 blog posts
• 3 categories
• 10 tags
• Primary navigation menu

MODULE 7: WORDPRESS PLUGINS AND WEBSITE FUNCTIONALITY

Lessons

7.1 What Is a Plugin?
7.2 Choosing Plugins
7.3 Installing Plugins
7.4 Activating and Configuring Plugins
7.5 Plugin Conflicts
7.6 Plugin Updates
7.7 Forms Plugins
7.8 SEO Plugins
7.9 Security Plugins
7.10 Backup Plugins
7.11 Avoiding Unnecessary Plugins

Teaching Script

“Plugins are one of the reasons WordPress is so flexible. They allow you to add new functions without building every feature from scratch.

But more plugins do not automatically mean a better website. Every plugin should have a purpose.”

Practical Activity

Create a plugin plan for a business website.

List:

• Plugin purpose
• Why it is needed
• Possible alternatives
• Potential risks

MODULE 8: PROFESSIONAL HOMEPAGE DESIGN

Lessons

8.1 Purpose of a Homepage
8.2 Hero Sections
8.3 Calls to Action
8.4 Service Sections
8.5 Product Sections
8.6 Testimonials
8.7 Trust Elements
8.8 Contact Sections
8.9 Footer Design
8.10 Mobile Homepage Design

Homepage Structure

A professional homepage might contain:

Header → Hero → Problem/Solution → Services → Benefits → Testimonials → Call to Action → Contact → Footer

Practical Project

Design a homepage for a fictional business.

MODULE 9: BRANDING, UI/UX AND USER EXPERIENCE

Lessons

9.1 What Is Branding?
9.2 Logo Design
9.3 Brand Colours
9.4 Typography
9.5 Visual Consistency
9.6 What Is UI Design?
9.7 What Is UX Design?
9.8 Website Navigation and Usability
9.9 Accessibility
9.10 Designing for Mobile Users

Case Study

A website has:

• Tiny text
• Difficult navigation
• Too many colours
• Slow pages
• Poor mobile layout

Learners identify the problems and propose improvements.

MODULE 10: FORMS, MEDIA AND INTERACTIVE ELEMENTS

Lessons

10.1 Website Forms
10.2 Contact Forms
10.3 Registration Forms
10.4 Image Optimisation
10.5 Video on Websites
10.6 Audio
10.7 Galleries
10.8 Buttons and Calls to Action
10.9 Maps and Embedded Content
10.10 Interactive Website Elements

Intermediate Project

Create a website containing:

• Contact form
• Image gallery
• Video
• Call-to-action buttons
• Embedded map
• Social links

LEVEL 3 — ADVANCED

MODULE 11: WOOCOMMERCE AND E-COMMERCE

Lessons

11.1 What Is E-Commerce?
11.2 Introduction to WooCommerce
11.3 Installing WooCommerce
11.4 Creating Products
11.5 Product Categories
11.6 Product Images
11.7 Product Pricing
11.8 Shopping Cart
11.9 Checkout
11.10 Payment Methods
11.11 Shipping
11.12 Orders and Customers
11.13 E-Commerce Security

Practical Project

Create a small online store containing:

• 10 products
• Product categories
• Prices
• Product images
• Shopping cart
• Checkout
• Store policies

MODULE 12: WORDPRESS SECURITY, BACKUPS AND MAINTENANCE

Lessons

12.1 Why Website Security Matters
12.2 Strong Passwords
12.3 User Permissions
12.4 Software Updates
12.5 Security Plugins
12.6 Malware Risks
12.7 Backups
12.8 Restoring a Website
12.9 Website Monitoring
12.10 Maintenance Plans

Security Checklist

• Use strong passwords.
• Keep WordPress updated.
• Keep themes and plugins updated.
• Limit administrator accounts.
• Maintain reliable backups.
• Use HTTPS.
• Monitor suspicious activity.

MODULE 13: SEO AND WEBSITE PERFORMANCE

Lessons

13.1 What Is SEO?
13.2 Search Engines
13.3 Keywords
13.4 Search Intent
13.5 SEO-Friendly Content
13.6 Page Titles and Meta Descriptions
13.7 Headings
13.8 Internal Links
13.9 Images and Alt Text
13.10 Website Speed
13.11 Mobile Performance
13.12 Measuring Website Performance

Practical Project

Choose a website page and create an SEO improvement plan covering:

• Target keyword/topic
• Page title
• Heading structure
• Meta description
• Internal links
• Image optimisation
• User experience

MODULE 14: ADVANCED WORDPRESS CUSTOMISATION

Lessons

14.1 WordPress Customisation Concepts
14.2 Site Editors and Page Builders
14.3 Advanced Layouts
14.4 Custom CSS Basics
14.5 Reusable Design Components
14.6 Custom Templates
14.7 Dynamic Content
14.8 Custom Post Types — Introduction
14.9 Website Performance Optimisation
14.10 Staging and Testing
14.11 Troubleshooting WordPress

Practical Activity

Take an existing website design and improve:

• Layout
• Typography
• Navigation
• Responsiveness
• Page speed
• Calls to action

MODULE 15: FINAL WEBSITE PROJECT AND CERTIFICATION

FINAL CAPSTONE PROJECT

Learners will build and present a complete professional website.

Required Components

Part 1 — Website Planning

• Website name
• Purpose
• Target audience
• Website goals

Part 2 — Website Structure

Minimum:

• Home
• About
• Services/Products
• Blog
• Contact

Part 3 — Design

The website should have:

• Consistent colours
• Professional typography
• Clear navigation
• Responsive design
• Strong visual hierarchy

Part 4 — Functionality

Include appropriate:

• Forms
• Buttons
• Images
• Multimedia
• Interactive elements

Part 5 — SEO

Implement basic:

• Page titles
• Headings
• Search-friendly content
• Internal links
• Image alt text

Part 6 — Security

Demonstrate:

• Secure administrator account
• Updates
• Backup strategy
• HTTPS awareness

Part 7 — Presentation

Learners record or deliver a 5–10 minute presentation explaining:

1. What the website does.
2. Who it serves.
3. How it was designed.
4. What features were added.
5. How it was optimised.
6. How it will be maintained.

FINAL PROJECT RUBRIC

Assessment Area	Marks
Website planning	10
Website structure	10
Visual design	15
Content	10
Functionality	15
Mobile responsiveness	10
SEO	10
Security and maintenance	10
Final presentation	10
Total	100

Recommended Pass Mark

70%

FINAL COURSE EXAMINATION

50 questions

Topics include:

• Internet fundamentals
• Website architecture
• Domains
• Hosting
• WordPress
• Themes
• Plugins
• Pages and posts
• Design
• UI/UX
• Forms
• E-commerce
• Security
• SEO
• Performance
• WordPress management

COURSE COMPLETION CHECKLIST

Beginner

• I understand how websites work.

• I understand domains and hosting.

• I understand WordPress.

• I can configure WordPress.

• I can create a basic website.

Intermediate

• I can create pages and posts.

• I can manage WordPress plugins.

• I can design a professional homepage.

• I understand branding and UX.

• I can create website forms and multimedia content.

Advanced

• I can create an e-commerce website.

• I understand WordPress security.

• I can implement basic SEO.

• I can optimise website performance.

• I can customise and troubleshoot WordPress.

• I can build and present a complete website.

CERTIFICATE

Upon successful completion, learners receive:

ELEARNTRA CERTIFICATE

Certificate in Web Design & WordPress Development

Level: Beginner to Advanced