Introduction
Web design is the foundation of all modern online experiences — from personal blogs and school portals to large corporate websites. It involves both the creative process of planning how a website should look and the technical process of building it using tools like HTML, CSS, and website builders.
In this topic, learners are introduced to the basic principles of web design, including terminology, layout planning, media integration, and publishing a fully functional website. They’ll gain practical skills using tools such as Serif WebPlus, Visual Studio Code (VS Code), and other popular web design editors.
This topic prepares students to communicate and present content online — a vital skill in today’s digital economy.
Key Focus Areas in Web Design (Updated for 2025)
1. Understanding Key Web Design Concepts
Before building a website, learners must understand core terminology and structure.
Main ideas include:
Website vs Webpage – A website is a collection of interconnected pages.
Static Pages – Content remains unchanged unless edited manually (e.g., HTML page for school profile).
Dynamic Pages – Content updates automatically or based on user actions (e.g., news feed or blog).
Hyperlinks – Clickable text or images that connect web pages internally or externally.
Example: The Exinet Academy homepage links to About, Courses, and Contact Us through a menu of hyperlinks.
2. Exploring Types of Websites and Their Purposes
Learners are introduced to various categories of websites, including:
Blogs – Personal or niche topic journals (e.g., “Life as a Student in Kampala”)
Wikis – Collaborative content platforms (e.g., Wikipedia)
Portfolio Sites – Showcasing individual work (e.g., a student’s photography or coding work)
Corporate/Business Sites – Promoting a company’s services (e.g., MTN Uganda)
Learners research local examples like school websites or online shops in Uganda.
3. Choosing and Using Web Authoring Tools
Learners get hands-on experience using different authoring platforms:
Serif WebPlus – A WYSIWYG (drag-and-drop) tool ideal for beginners
Visual Studio Code (VS Code) – A modern text editor for HTML, CSS, and JavaScript
Dreamweaver / Expression Web – Hybrid editors that support both visual design and coding
Each tool is used to:
Create pages
Insert images and tables
Add hyperlinks and form elements
Test and preview sites in browsers
Example: Using VS Code, a student writes a basic webpage with
<html>,<body>, and<img>tags.
4. Planning and Designing Website Layouts
Good websites are planned before being built.
Learners should:
Create a site map showing page structure
Decide on navigation structure (menus, buttons, links)
Choose fonts, colors, and layout grids for consistency
Sketch wireframes of each page’s look
Example: A student maps a site with pages for “Home,” “About Our School,” “Clubs,” and “Contact.”
5. Integrating Multimedia Content
Websites today are not just text — they include interactive and engaging content.
Learners are taught to insert:
Images (
<img>tag in HTML or drag-and-drop in Serif WebPlus)Videos (YouTube embeds or MP4 files)
Audio clips
Forms (Name, Email, Message)
Tables (e.g., school schedules, pricing)
Example: The Contact page includes a form for visitor feedback and a table showing office hours.
6. Testing, Publishing & Maintaining Websites
After building, learners should:
Preview their website in different browsers (Chrome, Firefox)
Test all links, forms, and media content
Correct errors such as broken links or poor layout
Save files in HTML format and print a copy of the homepage
Practice basic website publishing skills (e.g., saving to a local folder or using GitHub Pages)
Example: A student tests their “About Us” page and finds an image not loading due to incorrect file path — they fix it and re-upload.
7. Real-World Relevance and Career Pathways
This topic exposes students to digital publishing and media production skills that are in demand globally.
Potential applications:
School projects and presentations
Business websites for parents or relatives
Online portfolios for job or university applications
Starting a career in front-end web development
Students who learn web design early may go on to become UI/UX designers, developers, or digital marketers.
Conclusion
Web Design equips learners with foundational digital literacy — combining design thinking, coding, planning, and presentation. By building their own website projects, learners gain confidence and creativity in using ICT tools to solve real-world communication problems.
This topic empowers students to become not just consumers of digital content — but creators of it.