Project: Create a public-information campaign

Outcome

Create a small public-information campaign website that explains one issue and gives the visitor a clear, safe next action. The content goal stays the same for both supported levels. Level 1 builds the publication with semantic HTML and CSS. Level 3.2 creates an editor-managed CMS version with a repeatable review and publishing process.

What you will practice

Organize evidence-based campaign content around a clear visitor action.
Build an accessible and responsive route from context to action.
Apply either semantic implementation or CMS publishing practices to one stable content brief.

Project brief

A fictional public organization needs a focused campaign about one useful community topic. Choose a subject such as digital safety, public transport changes, recycling rules, accessible events, energy use, or responsible use of shared facilities.

The campaign must help a visitor answer these questions:

What is changing or what issue needs attention?
Why does the issue matter to the intended audience?
What are the three most important facts or actions?
What should the visitor do next?
Which source or fictional organization supports the information?

Use accurate general information or clearly fictional facts. Link factual claims to suitable public sources when the topic requires evidence. Do not present medical, legal, financial, or emergency instructions unless an authoritative supplied source contains the exact guidance.

Starting point

Before you start

The lessons and tools used in the selected course level.
One campaign topic, one intended audience, and one primary visitor action.
A code editor and browser, or access to the CMS used in the selected course level.
A parent course folder where you can create one dedicated project folder or CMS evidence folder.

Current state: The campaign can begin as a short content outline. No finished page, design, or CMS structure is required before you begin.
First action: Write one sentence for the campaign purpose and one direct action that the visitor can complete safely.
First checkpoint: The main page shows the campaign purpose, intended audience, and primary visitor action without requiring the visitor to open a menu.
Help trigger: Open the assistance section or ask for help when the purpose, intended audience, or primary action cannot be stated in one clear sentence.

Requirements

The required assignment is complete when every applicable criterion below is met.

Required campaign content

The opening content names the issue, intended audience, and primary visitor action.
The campaign presents three key facts or action points with descriptive headings.
A detail section explains the context and any important limitation or exception.
The primary call to action uses specific link or button text that states what happens next.
The page identifies the fictional organization and links any factual claims to suitable public sources.

Accessibility and responsive behavior

The page uses a logical heading order and semantic landmarks.
The primary action remains understandable without relying on its color, size, or position.
Meaningful images have suitable alternative text, and decorative images use an empty alt attribute.
Every link and control works with a keyboard and has a visible focus state.
Required content remains readable without horizontal page scrolling at a 320px viewport and at 200% browser zoom.

Project workspace and version control

Create one dedicated project folder before implementation. Keep unrelated exercises and repositories outside it.
For a source-code implementation, make the project folder a Git repository on main and connect it to its own private GitHub repository as origin.
Commit coherent working checkpoints, inspect staged changes, push the final verified state, and finish with a clean working tree.
For a CMS implementation, use one dedicated CMS workspace and a local evidence folder for plans and restorable exports. Use Git for source or evidence files when the selected level requires it, and never commit credentials or private data.

Design freedom

Choose the topic, intended audience, fictional organization, campaign name, visual style, images, and page layout.
Choose a primary action that is safe to demonstrate, such as opening an information page, downloading a fictional checklist, or finding public contact information.

Out of scope

The required project does not collect personal data, send real campaign messages, process donations, or require a live advertising account.
The project does not require implementation rules from another course level.
Optional extensions do not affect whether the required campaign is complete.

Level-specific implementation

Complete the shared requirements and one level section. The other section is not an additional requirement.

Level 1 · Web Introduction

Provisional expected effort: 6–10 hours for the required path. This range includes topic selection, source review, writing, implementation, support, debugging, verification, and re-entry. Optional extensions are not included.

New and reused: Reuse semantic HTML, CSS, responsive layout, image preparation, link writing, and validation. Apply these skills to a focused one-page publication.

First action: Create index.html and styles.css. Add the campaign purpose as the first heading and paragraph, then add the three key-point headings.

Required implementation

Build one complete campaign page with semantic HTML and CSS.
Use header, nav, main, section, and footer only where their semantic purpose matches the content.
Mark the primary action as a link when it navigates and as a button only when it performs an action on the current page.
Use responsive CSS that preserves the reading order and does not hide required content.
Add a source list with descriptive link text.
Validate the HTML and correct errors that affect structure or accessibility.
Do not use JavaScript or a framework for the required path. This level assesses HTML and CSS.

Level 1 definition of done

The project is complete for Level 1 when the shared requirements pass, one semantic HTML page and its CSS contain the complete campaign, the primary action uses the correct element, the source links work, the page passes the viewport and zoom checks, and the HTML structure validates.

Level 3.2 · Content Management

Provisional expected effort: 8–14 hours for the required path. This range includes topic selection, content modeling, CMS configuration, writing, source review, publishing checks, support, and re-entry. Optional extensions are not included.

New and reused: Reuse content strategy, usability, SEO, analytics, and CMS publishing skills. Add reusable campaign fields, source ownership, scheduled states, and editorial checks.

First action: In the CMS used in your current course work, create a campaign content type with fields for purpose, intended audience, summary, primary action label, primary action URL, key points, sources, owner, and review date.

Required implementation

Build the campaign in the CMS used in your current course work.
Store the three key points as structured repeated items rather than one unrestricted text block.
Store the action label and action URL in separate validated fields.
Record a content owner, source URL, source review date, and campaign review date in the CMS.
Configure draft, preview, and published states so an editor can review the complete page before publication.
Add a unique page title, meta description, clear URL, and suitable social-sharing title and description.
Create a publishing checklist that covers claims, sources, links, alternative text, responsive behavior, preview, publication, and later review.
Write a short analytics plan with two measurements and the campaign question each measurement answers. Real tracking is not required.

Level 3.2 definition of done

The project is complete for Level 3.2 when the shared requirements pass, an editor can update the structured campaign content and action without changing the template, source and review ownership are recorded, the preview and publishing states work, the required SEO and sharing fields are complete, and the publishing and analytics plans are ready to use.

Build the campaign message

State the issue, intended audience, and visitor action.
Add three key facts or action points.
Add context, limitations, organization information, and sources.
Connect the primary action to a safe destination.
Read the page from the opening statement through the action and source information.

Check

A visitor can identify the campaign purpose, understand the three key points, and choose the primary action without guessing what the action will do.

Checkpoint: The campaign message and action are complete

What now works: The purpose, audience, three key points, context, primary action, organization, and source information are available.
What remains: Complete and verify the semantic implementation or CMS publishing requirements for the selected level.
Next action: Return to the selected level section and run its first structural or publishing-state check.
If it does not work: If the message is unclear, read only the opening sentence, the three key-point headings, and the action label. Revise the first item that does not state a specific fact or action.

Verify the publication path

Complete the selected level implementation. Follow the campaign as a visitor, then verify the source and publishing information as the person responsible for maintaining it.

Check

Use the primary action, open every source, and confirm that the selected level definition of done passes. Correct the first failed check and repeat the full path.

Checkpoint: The campaign is ready for its intended publication state

What now works: The shared campaign path and the selected level implementation pass their stated checks.
What remains: Run the final self-check and prepare the project for submission.
Next action: Complete the self-check from top to bottom and record the first failed item.
If it does not work: If a source, action, or publishing state fails, correct that one route before reviewing visual details.

Assistance

The complete brief and requirements remain visible above. Open one assistance level when you want more structure.

Assistance 1 — Identify the campaign's one primary action

Complete this sentence: “After reading this page, the intended visitor can…” Keep one concrete action. Move secondary actions below the main campaign path.

Assistance 2 — Use a bounded campaign outline

Use six content areas: purpose, intended audience, three key points, detailed context, primary action, and sources. Complete them in that order before changing the visual design.

Assistance 3 — Follow the publication subgoals

Use this order: confirm the purpose and action, complete the three key points, add sources and ownership, build the page or CMS model, verify the visitor path, then complete the selected level checks.

Self-check

Complete these checks against the required result.

Read the opening content and confirm that it names the issue, intended audience, and primary action.
Confirm that each of the three key points states one distinct fact or action.
Use the primary action and confirm that its label accurately describes the result.
Open every source link and confirm that the surrounding claim matches the source used.
Use only the keyboard to operate every link and control and confirm that focus remains visible.
Check the campaign at a 320px viewport and at 200% browser zoom without horizontal page scrolling.
Run the checks in the selected level definition of done. Requirements from the other level do not apply.

Safe stopping point

Stop after a checkpoint passes. Record what works, which source or publishing check remains, the exact next action, and any required browser, file, or CMS state. Use that note when you resume.