Build a site with a CMS

Course

Level 1 · Web Introduction

Module

CMS and findability

Expected effort

150–240 minutes

Estimate assumptions: You have a reliable internet connection, a current browser, and the prepared WebP image from the images module. The estimate includes editor orientation, two pages, media, front-page settings, testing, and export. Optional extension work is not included.

Outcome

You will build and export a small two-page WordPress site without installing a local server. You will use the administration interface to manage content, media, site settings, and the page that visitors see first.

Why this matters

A content management system, or CMS, lets people manage a website through structured content and administration tools. The CMS still depends on HTML, media, templates, URLs, and browser behavior, but it manages those parts through a different workflow from a hand-coded site.

What you will practice

• Explain the roles of a CMS administration interface, database, media library, theme, template, and front end.
• Distinguish page content from site-wide presentation and settings.
• Create and publish two WordPress pages with a clear heading structure.
• Upload a prepared image, write alternative text, and place the image in page content.
• Export a complete WordPress Playground site and explain why the export is required.

What is new and what is reused

• New: CMS administration, front end, database-backed content, themes, templates, blocks, publication status, the media library, a static front page, and a complete site export.
• Reused: Page structure, headings, paragraphs, links, images, alternative text, visual hierarchy, prepared assets, browser testing, and evidence-based checks.

Starting point

Before you start

• A current version of Edge, Chrome, or Firefox with internet access.
• The workspace-960.webp image that you prepared in the web-images lesson, or another prepared WebP image with known dimensions and appropriate content.
• Permission to download and store a ZIP checkpoint in your Level 1 project folder.

Current state

Your previous site was stored as HTML, CSS, and asset files. No CMS site exists yet.

First action

Open https://playground.wordpress.net/ in a new browser tab and wait for the WordPress site to finish loading.

First checkpoint

The WordPress Playground site and its administration tools open without asking you to install a server or create an account.

Help trigger

Use the recovery note or ask for help if Playground does not load, the administration menu is unavailable, publishing remains disabled, an image upload fails, or you cannot create a ZIP export before leaving the session.

Reference environment

This lesson uses WordPress Playground as the reference CMS environment. It runs WordPress in the browser and can export the complete site as a ZIP file.

Your class can use a teacher-provided WordPress site or another CMS instead. Complete the equivalent actions: set the site identity, create and publish two pages, upload prepared media with alternative text, select the front page, inspect the visitor view, and make a restorable export or backup.

Export before you leave

Do not depend on one open browser tab as the only copy of your work. Browser storage and temporary sessions can be cleared. The required ZIP export is the lesson checkpoint you can restore later.

Required result

You have completed the lesson when the CMS site has:

• the site title Studio Profile;
• the tagline Web projects and process notes;
• a published Home page set as the static front page;
• a published About page;
• a Home page with one clear page title, an introduction, a Selected work section, a prepared image, and visible image caption;
• image alternative text that fits the page context;
• an About page with a page title and at least two meaningful content blocks;
• a visitor view that does not show administration controls;
• no private contact details, student records, or other sensitive information; and
• a downloaded ZIP checkpoint stored as cms-foundations-checkpoint.zip.

Understand what the CMS manages

In a hand-coded project, you directly edit HTML, CSS, and asset files. In a CMS, the administration interface writes data and settings that the CMS later combines with templates.

CMS publishing model

A CMS combines stored content, media, and a theme

Read from left to right. On a narrow screen, read from top to bottom.

1

Editor

Administration interface

Create pages, add blocks, upload media, and change settings.

changes→

2

CMS

Stores separate sources

• ContentDatabaseTitles, text, status, settings
• MediaUploaded filesImages and related metadata
• PresentationTheme and templatesLayout and visual rules

combines→

3

Visitor

Front-end page

The browser receives the rendered result without seeing the administration controls.

Content, uploaded media, and presentation rules remain separate sources. The CMS combines them into the page a visitor receives.

Use these terms consistently:

Term	Role in this lesson
Administration interface	The private editing area used to manage site content and settings
Front end	The public-facing result that a visitor requests and reads
Database	Structured storage for page content, status, settings, and relationships
Media library	The CMS interface for uploaded files and media metadata
Theme	A package that supplies site-wide presentation and template rules
Template	A reusable layout for a type of page or site region
Block	A content or layout unit in the WordPress editor
Plugin	An extension that adds or changes CMS behavior; plugins are outside this lesson

Changing page text does not require editing the theme. Changing the theme does not automatically rewrite the meaning of every page. The separation lets one presentation system serve many content entries.

Open the administration interface

WordPress Playground can show the visitor view and the WordPress administration interface inside the same browser tool.

1. Open WordPress Playground.
2. Wait until the site finishes starting. A fresh instance can take longer than a normal page navigation.
3. Open WordPress Admin from the Playground controls. If that label is not visible, use the internal site address that ends in /wp-admin/.
4. Find the administration menu with items such as Dashboard, Pages, Media, Appearance, and Settings.
5. Open the visitor view in another tab or use the site-view control. Keep the administration view available.

The administration interface and visitor view have different purposes. A published page can look correct to a signed-in editor while a visitor still sees a different front page or navigation structure. Test the visitor view directly.

Check

You can move between the administration interface and the visitor view. You can identify which view can edit the site and which view represents the public result.

2Assistance 2 — Locate the two CMS views

• The administration URL normally contains /wp-admin/.
• The visitor URL normally ends at the site root or a page slug.
• The administration view shows management menus and editor controls.
• The visitor view shows the active theme and published content.

If Playground places both views inside its own frame, use the Dock or address controls inside Playground. Do not replace the outer playground.wordpress.net address with a guessed public domain.

Set the site identity

Open Settings → General in WordPress Admin.

Set these values:

• Site Title: Studio Profile
• Tagline: Web projects and process notes

Leave the WordPress address, site address, membership, language, time zone, and date settings unchanged for this lesson. Select Save Changes.

The site title identifies the complete website. A page title identifies one page inside that site. They can appear near each other, but they have different scopes.

Check

Reload the visitor view. The active theme should show Studio Profile in the header, browser title, or another site-identity location. The exact visual placement depends on the active theme.

Checkpoint: The CMS has a stable site identity

What now works

The General settings store the required site title and tagline, and the visitor view exposes the site title through the active theme.

What remains

Create and publish Home and About pages with structured blocks and prepared media.

Next action

Open Pages in WordPress Admin and create a page named Home.

If it does not work

If the old title remains, return to Settings → General, confirm the saved values, and reload the visitor view rather than the editor preview.

Create the Home page

Open Pages → Add New Page. Enter Home as the page title.

The editor represents page content as blocks. Use List View when you need to inspect the order and nesting of blocks without relying only on the visual canvas.

Add this content in order:

1. A paragraph: I build small web projects with semantic HTML, responsive CSS, prepared media, and clear documentation.
2. A Heading block with the text Selected work. Set its level to H2.
3. A paragraph that names one project and explains its purpose in one or two sentences.
4. An Image block that uses your prepared workspace-960.webp file.
5. A caption: Workspace used to plan and build the selected projects.

The page title supplies the H1 in the active theme. Do not add another H1 block inside the page content.

Upload the prepared image

When the Image block asks for a source:

1. Select Upload or open the Media Library and upload workspace-960.webp.
2. Select the uploaded item.
3. Find the alternative-text field in the block settings or media details.
4. Enter: Laptop showing a green and coral page layout beside a notebook and headphones.
5. Confirm that the visible caption remains separate from the alternative text.

The media-library title helps manage the file. It does not replace alternative text in the image use. Alternative text describes the image’s purpose in this Home-page context.

Use content you can share

You can write about yourself, a fictional professional profile, or a project role. Do not add a private address, phone number, personal account, student record, or another person’s image without permission.

Publish the Home page

Select Publish. WordPress can ask you to confirm visibility and timing before the final publish action. Keep the page public and publish it now.

Open the published page in the visitor view. Confirm that the title, text, image, caption, and section order appear without editor controls.

If it does not work

• If the Heading block becomes H1, change the block level to H2 in its toolbar or settings.
• If the image is too large to upload, confirm that you selected the prepared WebP file rather than the source PNG.
• If the image has no alternative text, select the Image block and inspect its settings or open the item in Media.
• If Publish is inactive, confirm that the page has a title and that no confirmation panel is waiting for input.

Create the About page

Open Pages → Add New Page again. Enter About as the page title.

Add at least these blocks:

• one paragraph that states the type of web work the profile represents; and
• one H2 heading named Current focus, followed by a paragraph that names one current learning area.

Example content is available below. Adapt it or write your own professional content:

About page example

This site documents small web projects and the decisions behind them.

Current focus

My current focus is building clear page structures, responsive layouts, and web-ready visual assets.

Publish the About page. Open it in the visitor view and confirm that the page title is the only H1 and Current focus is an H2.

Checkpoint: Two published pages contain structured content

What now works

Home and About are published. Home contains prepared media with alternative text and a caption, and both pages use a logical heading order.

What remains

Set Home as the static front page, inspect the site through the visitor view, and export a restorable ZIP.

Next action

Open Settings → Reading and choose a static front page.

If it does not work

If a page is missing from Pages, check Drafts and Trash before creating a duplicate with the same title.

Set the static front page

Open Settings → Reading.

1. Find Your homepage displays.
2. Select A static page.
3. Set Homepage to Home.
4. Leave the posts-page selection empty for this lesson.
5. Select Save Changes.

Open the site root in the visitor view. The Home content should now appear first. The browser address should show the site root instead of a /home/ page path.

This setting changes which content the CMS selects for the root URL. It does not duplicate the Home page or move its blocks into the theme.

Check the front end

Test the visitor view in these conditions:

• a wide viewport;
• about 320px viewport width;
• 200% browser zoom;
• keyboard navigation through every visible link; and
• images disabled, blocked, or temporarily given a broken source in developer tools.

Confirm that text wraps, the image does not overflow, focus remains visible, and the image’s text alternative communicates its purpose when the resource is unavailable.

Do not assess navigation yet beyond confirming that any theme-provided links work. The next lesson builds the planned page structure and primary navigation.

Export a restorable checkpoint

The standard WordPress Tools → Export command exports site content in a WordPress XML format. This lesson needs a complete WordPress Playground checkpoint instead.

Use the Playground Dock:

1. Open Export in the WordPress Playground Dock.
2. Select Download as .zip.
3. Wait for the browser download to finish.
4. Move the downloaded file into your Level 1 projects folder.
5. Rename the file cms-foundations-checkpoint.zip.
6. Keep the ZIP closed. Do not edit files inside the archive.

The ZIP contains the complete Playground site state, including WordPress files, uploaded media, the database, theme, and settings. Treat it as a local project checkpoint. It is not a public deployment and does not submit the work automatically.

Verify the download

Confirm that:

• the file exists outside the browser’s temporary download list;
• the filename is cms-foundations-checkpoint.zip;
• the file size is greater than 0 bytes; and
• your active Playground site still contains Home, About, and the uploaded image.

3Assistance 3 — Recover before closing an unsaved CMS session

If the ZIP does not download:

1. Keep the Playground tab open.
2. Open the Dock and confirm that you selected the complete-site Export action, not WordPress Tools → Export.
3. Allow downloads for playground.wordpress.net if the browser blocked the file.
4. Start Download as .zip again and wait for completion.
5. Confirm the file in your operating system’s Downloads folder before you close the tab.

If export remains blocked, keep the tab open and ask for help. Do not treat a screenshot as a restorable backup.

Self-check

Complete these checks against the required result.

1. Open Settings → General and confirm the site title and tagline match the required values.
2. Open Pages and confirm that Home and About have Published status.
3. Open the Home page in the visitor view and confirm that its content appears at the site root.
4. Use List View or the document outline to confirm that Home has one page title and Selected work is an H2.
5. Inspect the Home image and confirm that it uses the prepared WebP file, a visible caption, and context-appropriate alternative text.
6. Open About in the visitor view and confirm that Current focus is an H2 below the page title.
7. Explain which parts are stored as content, uploaded media, and theme or template presentation.
8. Test the visitor view at about 320px width and 200% zoom and confirm that content does not clip or overlap.
9. Use the keyboard to reach each visible link and confirm that focus remains visible.
10. Confirm that no private contact details, student records, or unapproved personal images appear in the site.
11. Find cms-foundations-checkpoint.zip outside the browser and confirm that its file size is greater than 0 bytes.

How the CMS result differs from the coded site

Both projects produce HTML, images, URLs, and a page in a browser. The authoring paths differ.

In the coded project, you edit the source files directly. In WordPress, you use the administration interface. WordPress stores content and settings in a database, uploads media files, and uses the active theme and templates to generate the visitor-facing result.

The CMS adds state that is not visible in one HTML file. Publication status, front-page selection, media metadata, and theme settings all affect the result. This is why CMS verification includes both administration evidence and the visitor view, and why a complete export matters.

Optional CMS investigations

The required lesson is complete before these investigations. Choose one route that tests a separate CMS concept.

Restore the exported site

Open a new WordPress Playground. Use New → Import zip in the Dock and select cms-foundations-checkpoint.zip. Confirm that the restored site contains the same settings, pages, and media. Keep the original ZIP unchanged.

Compare a page and a post

Create one draft post named First process note. Do not publish it. Compare its editor settings and intended use with the published About page. Record when stable page content and date-ordered post content serve different needs.

Inspect a theme style variation

Open Appearance → Editor → Styles in a block theme. Preview one style variation without saving. Identify which visual choices change across the whole site and which page content stays unchanged.

Optional references

• WordPress Playground quick start explains how the browser environment starts, exports, and restores a site.
• WordPress Site Editor documentation explains pages, templates, styles, and List View in a block theme.
• WordPress media editing documentation explains media metadata, alternative text, captions, and basic image edits.

Next step or safe stopping point

The required lesson is complete when the visitor view shows the two published pages and prepared media, Home is the static front page, and a complete ZIP checkpoint exists outside the browser.

Continue to Organize content and navigation to plan page relationships, create stable slugs, and build primary navigation that matches the content structure.

If you stop here, leave yourself this resume note beside the ZIP file: Home and About are published. Next, restore or open the CMS site and plan the navigation before adding more pages.