Course Content
Introduction to the Web & How Websites Work
This lesson explains what web design is and why it matters. Students learn how the internet works, including the roles of browsers, servers, and websites. It introduces the basic building blocks of a website—HTML for structure, CSS for style, and JavaScript for interactivity—and clarifies the difference between web design and web development. The lesson also highlights essential tools like text editors, browsers, and online resources to get started.
0/3
What is Web Design?
00:00
How the Internet Works
00:00
Introduction to the Web – Basics & Concepts
00:05:00
Getting Started with HTML
HTML (HyperText Markup Language) is the standard language used to create and structure content on the web. It defines the building blocks of every website. What HTML does: HTML is the foundation of every website, giving structure to web pages. It uses tags like <h1>, <p>, and <img> to define content. A basic HTML page has , , , and . The contains metadata (title, styles), while the holds visible content. HTML works together with CSS (design) and JavaScript (functionality).
0/8
Structure of a web page (doctype, html, head, body)
00:00
Headings, paragraphs, and text formatting
00:00
Links and navigation (internal & external links)
00:00
Images, audio, and video embedding
00:00
Lists (ordered & unordered)
00:00
Tables & forms (inputs, buttons, labels)
00:00
Semantic HTML (header, nav, article, footer)
00:00
Mini Project: Build a personal profile page with HTML
00:00
WordPress Basics
In this module, we will explore the foundation of WordPress, the most popular Content Management System (CMS) for building websites. You’ll learn how to set up WordPress, navigate the dashboard, and understand key features such as posts, pages, themes, and plugins. By the end, you’ll be able to manage a WordPress site with confidence and customize it to suit your needs.
0/10
Introduction to WordPress & Dashboard Overview
00:00
Installing WordPress Locally with XAMPP / MAMP
00:00
Posts vs. Pages in WordPress
00:00
Creating and Managing Menus
00:00
Installing and Customizing Themes
00:00
Installing and Using Plugins
00:00
Widgets and Sidebars
00:00
WordPress Media Library (images, videos, documents)
00:00
WordPress Settings & User Management
00:00
Mini Project: Build a Blog Website with WordPress
00:00
Web Design

Widgets and Sidebars in WordPress

Widgets are small blocks that add extra features to your website, while sidebars are the areas (usually on the side, footer, or header) where widgets are placed. Together, they help you display additional content and tools without coding.

1. What are Widgets?

Widgets are pre-built features you can drag and drop into widget areas.

Examples of Widgets in WordPress:

Search bar

Recent Posts

Categories list

Calendar

Custom Text/HTML (e.g., announcements, ads)

2. What are Sidebars?

A sidebar is a widget-ready area in your theme. Despite the name, sidebars aren’t limited to the side, they can appear in the header, footer, or even homepage sections depending on the theme.

Common Sidebar Areas:

Right/Left Sidebar (next to your blog posts)

Footer (3 or 4 widget columns)

Header (some themes support widget areas in the top bar)

Homepage sections (in modern themes)

3. Adding Widgets to Sidebars

Method A: Using WordPress Customizer

Go to Appearance > Customize.

Click Widgets.

Select the sidebar or footer area you want to edit.

Click Add a Widget, then choose one (e.g., Search).

Configure it → Click Publish.

Method B: Using Widgets Panel

Go to Appearance > Widgets.

Drag and drop a widget into a sidebar area.

Save your changes.

4. Managing Widgets

Rearrange: Drag to change the order.

Remove: Click Delete or drag out of the sidebar.

Customize: Some widgets (like Recent Posts) allow settings like number of posts.

Custom HTML/Text: Insert ads, notices, or custom code.

5. Examples of Widgets in Use

Blog Sidebar → Search bar, categories, recent posts, popular tags.

School Website Footer → Contact info, quick links, social media icons.

E-commerce Sidebar → Product categories, filter by price, cart widget.

Learning Portal Sidebar → Student login, course categories, announcements.

Business Site Footer → Newsletter signup, map, opening hours.

Widgets + Sidebars = Better User Experience. They help visitors find information quickly and give your website a professional layout.

Previous
Next
Scroll to Top