Part of Build and Maintain Your First Website.
You have a website plan. Now comes the tempting part: choosing colors, moving images, and trying themes. Before spending an afternoon adjusting a header, build the three pages that help a visitor understand the service and ask for help.
Your first build needs to demonstrate a useful visitor journey. Bring the content brief you completed in Lesson 2: Plan a Website That Helps Visitors Act. We will continue the same fictional neighborhood repair business, using demonstration information throughout.
Your outcome: a separate WordPress practice site with Home, Services, and Contact pages, navigation, and a documented inquiry destination. Use fictional information and label the project as a demonstration.
Prepare a practice environment
Use a local installation or a separate staging environment provided by your host. If staging is online, restrict access with appropriate authentication. A search-engine discouragement setting is not an access restriction. Do not experiment on an existing customer site.
Record the practice address, platform, and account owner in your provider map. If choosing hosting, check whether backups, staging, email, and support are included before purchasing. WordPress hosting options are available through SkilledWebmaster; check the selected plan’s details against your requirements.
Build the pages from the brief
Open Pages → Add Page in your practice WordPress dashboard. These are pages because visitors need them as ongoing reference points; they are not dated news posts. Enter a title, add the content using blocks, and save a draft while you work. Your editor’s wording may vary slightly.
Create these three pages:
- Home: a plain explanation of the repair business, a short service summary, and a link to Services.
- Services: the approved repair categories, what an inquiry should include, and a link to Contact.
- Contact: contact instructions, a monitored destination, and the inquiry form when configured.
Keep one clear page title and use headings to organize sections. Use meaningful link text, such as “Ask about a laptop repair.” Add alternative text to informative images; decorative images should not repeat surrounding text to screen-reader users.
Start with a Heading block, a Paragraph block, and a link or Button block. Use the link control to select the destination page once it exists. You can build this exercise with the standard editor; a separate page builder is not required.
A worked first-page example
For the fictional Home page, try this small structure:
| Element | Practice content | Purpose |
|---|---|---|
| Heading | Laptop problems? Start with a repair inquiry. | Names the visitor’s problem |
| Short paragraph | Tell us your device type and what happens when you try to use it. We will review the inquiry before discussing next steps. | Explains the process without guaranteeing a repair |
| Main link | Review repair services | Opens Services |
| Secondary link | Send a repair inquiry | Opens Contact |
On Services, explain the demonstration repair categories and what information helps with an inquiry. On Contact, explain how the visitor can send that information and receive a reply. Avoid fictional prices, opening hours, testimonials, or qualifications that could be mistaken for real business claims.
Keep the path visible: Home → Services → Contact. Someone should be able to follow it even if they arrive directly on Services from a search result.
Set the front page and navigation
When the pages are ready, publish them inside your protected practice environment. Publishing makes them available there; it does not mean you should remove staging protection or launch a real business site.
In Settings → Reading, select a static homepage and choose Home, then save. Depending on the theme, its front-page template may also control the layout. If the page you see differs from what you edited, check the theme’s front-page instructions before rebuilding your content.
Add Home, Services, and Contact to the primary navigation:
- Classic theme: use Appearance → Menus, add the three pages, order them, and assign the menu to the theme’s primary location.
- Block theme: use Appearance → Editor and edit the header’s Navigation block. Confirm that it contains the intended page links and save the navigation changes.
If you cannot find one of those screens, check which theme you are using. These are alternative workflows, not two steps everyone must complete.
Check the menu from the visitor-facing site. A saved page is not necessarily linked from the menu, and a draft page will not work for ordinary visitors.
Configure the inquiry path
Choose a maintained form solution appropriate to the project. Set the recipient and delivery method deliberately. Do not assume that installing a form guarantees delivery. Keep secrets and delivery credentials out of page content and screenshots.
Use the fields from Lesson 2 and provide visible labels, validation messages, and a submission confirmation. Avoid unnecessary uploads in the beginner project. Lesson 4 will verify that the inbox actually receives the message.
If the form is not ready, keep the practice page’s delivery status clear in your build record. Do not label a decorative form as working, and do not launch a real Contact page that quietly loses inquiries.
Inspect the build
Open the site on a phone and desktop. Check readable text, navigation, form labels, keyboard access, and visible focus. Remove unused sample content from the visitor-facing site. If comments are unnecessary, disable them for existing and future content.
Copy your build record
Save a document named 03-build-record with these entries:
- Environment: practice address and how access is restricted; no passwords.
- Pages: Home, Services, and Contact addresses and publication status.
- Navigation: primary menu location and the destination of each link.
- Theme and form: selected tools and any required delivery integration.
- Phone and keyboard checks: device/browser, observed issues, and corrections.
- Inquiry destination: monitored test mailbox and person responsible for replies.
- Open issues: what remains unfinished, who owns it, and what blocks launch.
Use test information in screenshots. If a link opens the wrong page, fix the link and repeat the journey from Home rather than checking only the edited page.
Completion check: the correct Home page opens at the practice address; all three pages are reachable; the phone menu works; and the Contact page’s delivery status is documented. A visitor can move from Home to Services to Contact without guessing.
Next: Lesson 4 will test the complete inquiry and reply journey before launch. Return to the series hub for available lessons.
For theme-specific details, use WordPress’s official guides to creating pages, setting a static homepage, and the Navigation block.