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

WordPress Media Library (Images, Videos, Documents)

The Media Library is where all your website’s media files, like images, videos, audio, and documents, are stored and managed. It allows you to upload, organize, edit, and reuse media across your site.

1. Accessing the Media Library

From the WordPress Dashboard, go to Media > Library.

You’ll see all previously uploaded files in either Grid View or List View.

2. Uploading Media

Method A: Direct Upload

Go to Media > Add New.

Click Select Files or drag & drop files from your computer.

Uploaded files appear in the library.

Method B: While Editing Posts/Pages

In the WordPress editor, click Add Media.

Upload a new file or select from the Media Library.

Insert it into your content.

3. Types of Media You Can Upload

Images → JPG, PNG, GIF, WebP

Videos → MP4, MOV (best to embed from YouTube/Vimeo for performance)

Audio → MP3, WAV

Documents → PDF, DOCX, PPTX, XLSX

4. Editing Media in the Library

Click on a file in the library to view details.

You can:

Rename Title, Caption, Alt Text, and Description (important for SEO).

Edit Image (crop, rotate, resize).

Copy File URL (to share or embed).

5. Organizing Media

Search Bar: Find media by filename or keyword.

Filters: Filter by file type (images, audio, video, docs) or upload date.

Plugins for Folders: Install plugins like Media Library Organizer to arrange files into folders.

6. Examples of Media Use in Websites

Images: Product photos, banners, logos, blog post illustrations.

Videos: Course lessons, welcome video, tutorials, promos.

Documents: Student handouts, downloadable forms, e-books, policies.

Audio: Podcasts, background music, recorded lessons.

Infographics/Charts: Data visualization for storytelling.

7. Best Practices for Media Management

Optimize images (compress before upload for faster site speed).

Use descriptive filenames (e.g., student-portal-login.png instead of IMG1234.png).

Always fill in Alt Text (improves SEO & accessibility).

Avoid hosting large videos directly, embed from YouTube or Vimeo.

Organize regularly so your library doesn’t become messy.

The Media Library is your website’s storage room for all digital assets, making it easier to manage and reuse content.

Previous
Next
Scroll to Top