Your project files
Open the page, stylesheet and images for the update.
Workspace
Return to the website you need to update.
Keep your portfolio, a client’s site and a small business website ready to work on. Open their folders, find the page to change and return to saved hosting connections.
Saved connections
Return to the client’s saved hosting connection.
At home on your Mac
Find an asset in Finder or check the page in a browser.
Room for each project
Keep a portfolio and client site in separate project windows.
Pick up where you left off
Open the saved site and find the contact page that needs changing. Manage your websites →
Live & PHP Preview
Check a headline or image before publishing.
Change a homepage heading, replace an image or adjust a section and see the page as you work. Keep the preview beside the code while checking the result.
Choose your view
Keep the page visible while editing its source.
Arrange your workspace
Place the code and result side by side when adjusting a section.
Preview on your Mac
Preview a static portfolio page before uploading it.
See changes as you work
Check the new wording as the preview refreshes.
Preview PHP output
Preview a PHP page on your own hosting.
Check it in a browser
Follow the contact or booking link to check its destination.
Choose the right preview
Use local preview for static pages; PHP preview uploads files to a temporary area on your configured server. Check changes as you edit → Preview PHP pages →
Visual Editing
Find why a page element is out of place.
Select a button, heading or image in the preview to inspect its spacing and styles. Find the matching HTML and make a focused correction in the source.
Select a page element
Select the misplaced button in the preview.
See where it belongs
Inspect which section contains the element.
Understand the spacing
Look at margins and padding to understand an unexpected gap.
Find the style that matters
Filter for the font, colour or spacing property you need.
Reach the matching HTML
Reach the matching HTML to make the correction.
Look deeper when needed
Use the Mac web inspector for a deeper look when needed.
Edit text where you see it
Correct an eligible plain-text heading directly in the preview.
Keep the edit reversible
Undo the visual text edit if the new wording does not fit.
A clearer route from page to code
Use source editing for nested markup or script-generated content that cannot be edited as plain text. Find what controls a page → Change text on the page →
Website Publishing
Publish the corrected page.
Update a contact page, replace a menu or publish a new portfolio project. Connect to your hosting, transfer the changed files and check the live page in a browser.
Save your hosting details
Save the hosting connection for the next update.
FTP and FTPS hosting
Use FTP or FTPS when your hosting provides it.
SFTP connections
Use SFTP when your host offers it.
Browse remote files
Find the live contact page or asset you want to update.
Know where the update goes
Confirm the destination: saving an open remote file uploads it to that server location. Publish website changes →
Styling & Snippets
Match the page to your site’s design.
Change a heading font, give buttons your brand colour or add room around a section. Adjust CSS controls and check the result on the page.
Page outline
Find a section through the page outline.
CSS Styling
Set the fonts, colours and spacing in the relevant style rule.
Reusable Snippets
Insert a saved contact block and adapt it to the page.
Colours and page elements
Keep brand colours and common page elements available.
A consistent style, fewer repeated steps
Reuse the same starting patterns while keeping each page’s source editable. Style your website → Reuse page sections →
Code Editor
Write a new service or portfolio page.
Write a service page, add a booking link or change a product section in HTML. Keep the source, related files and preview together while you work.
Navigate by element
Navigate to the section that needs changing.
Select the section you need
Select a whole HTML element when moving or editing the section.
Edit repeated matches
Change repeated matches within the current document.
Preview image references
Check which local image a path refers to before replacing it.
An editor for source files
Write source text without smart quotes altering the code.
Keep indentation tidy
Adjust indentation to keep nested elements readable.
| Area | Formats and tools | Workflow |
|---|---|---|
| Markup | html, htm, xhtml | Edit source, inspect DOM structure and preview rendered output. |
| Styles and scripts | css, js | Maintain page styling and behaviour next to the HTML project. |
| Server and data files | php, json | Open supporting files and preview PHP through a configured server workflow. |
| Writing and notes | md, txt | Edit Markdown and plain text inside the same project workspace. |
Useful patterns within reach
Insert a familiar HTML or form pattern and adapt it to the page. Edit pages & source →
AI Website Assistant
Ask for a new website section.
Ask the assistant to draft a services section, explain an unfamiliar script or suggest a fix to a page. Review the project changes in the editor and preview before publishing.
Choose your AI assistant
Use Claude or Gemini with your own API key, or Apple Intelligence on an eligible Mac.
Review the files the assistant creates or updates, replace placeholder content and check the preview. Build a section with AI →
Understand the code
Ask what an unfamiliar function or style rule does.
Build a starting point
Draft the HTML and CSS for a services or contact section.
Review a change
Ask for a focused review, then inspect the proposed corrections.
Connect another assistant
Connect a compatible external assistant to inspect your project or prepare an edit you review in the app. Connect your AI assistant →
Website Validation
Check a new page for markup mistakes.
Run the relevant check, review the messages and correct the source before publishing.
Check HTML online
Send the active HTML to the online W3C validator.
Read the issue
Read the issue and decide which source change is needed.
Jump to the source
Return to the reported area of the document to correct it.
Check XML locally
Check XML locally for a well-formed document. Check page markup →
Project Search
Replace an old address across the site.
Find an old phone number, address or product name across project files. Review the matches and apply repeated replacements without opening every page by hand.
Search the project
Search the project for the exact old address or phone number.
Replace repeated text
Review matches before applying a repeated replacement.
Refine the search
Narrow the search when a phrase appears in unrelated files.
Keep site-wide changes in view
Preview the affected pages after a site-wide wording change. Update text across a site →
Mac app
Keep the next website job within reach.
Open a project, make a focused update and check the result with the Mac tools you use.
A familiar workspace
Use familiar shortcuts when editing a page.
Your website files
Keep the website’s source files in ordinary folders.
Get HTML Designer
Install the version for the device you use.
Help when you need it
Use the manual when you need the exact controls for a task.